当前位置：首页 > 网页特效 > 动画效果

7种鼠标滑过超链接动画特效

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

7种鼠标滑过超链接动画特效

简介

##### HTML结构
每一个超链接的效果的HTML结构都基本相同，使用一个div元素来作为包裹容器，在它的里面是一个超链接a元素。

```html
<div class="link-1">
  <a href="#" class="demo">
    <span class="thin">link</span><span class="thick">one</span>
  </a>
</div>   
```            
#####  CSS样式
实现为超链接元素设置一些基本样式：超链接元素显示为块级元素，它的包裹元素显示为内联块级元素。

```html
a.demo {
  text-transform: uppercase;
  font-size: 36px;
  color: white;
  text-decoration: none;
  position: relative;
  display: block;
}
[class^="link-"] {
  display: inline-block;
  margin: 2em
}       
```
在第一种超链接动画效果中，鼠标滑过超链接时，超链接底部会有2个线条从两侧向中间延伸。这两根线条使用a元素的:before和:after伪元素来制作。它们使用绝对定位，一条定位在超链接的左下角位置，另外一条定位在超链接的右下角位置。开始时它们的宽度都被设置为0。

```html
.link-1 a.demo:before, .link-1 a.demo:after {
  content: '';
  border-bottom: solid 1px white;
  position: absolute;
  bottom: 0;
  width: 0;
}
 
.link-1 a.demo:before { left: 0; }
.link-1 a.demo:after { right: 0; }      
```            
在鼠标滑过超链接时，:before和:after伪元素的宽度分别被增加50%，形成线条从两侧向中间延伸的动画效果。

.link-1 a.demo:hover:before, .link-1 a.demo:hover:after {
```html
  width: 50%;
}
 
.link-1 a.demo:before, .link-1 a.demo:after {
  -webkit-transition: all 0.2s ease;
          transition: all 0.2s ease;
}         
```

web299.com

7种鼠标滑过超链接动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果