当前位置：首页 > 网页特效 > 文字效果

20种配合场景的CSS3鼠标滑过文字动画特效

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

简介

##### HTML结构
第一种效果的HTML结构非常简单：使用一个section元素来包裹一个超链接元素，超链接中的文本是要制作鼠标滑过效果的文字。

```html
<section class="p10">
  <a href="">camera</a>
</section>  
```    
#####  CSS样式
第一种鼠标滑过效果的CSS样式中，首先为段落section元素添加一个背景图片。

```html
section.p10 {
  background-image: url("http://i.imgur.com/N6vLwJR.jpg");
}  
```              
然后a元素设置固定的宽度和高度，并使用绝对定位来居中对齐。

```html
section.p10 a {
  width: 353px;
  height: 94px;
  line-height: 94px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -176.5px;
  margin-top: -47px;
}        
```        
接着使用a元素的:before和:after伪元素来制作镜头的直角边框。并设置过渡动画效果。

```html
section.p10 a:before, section.p10 a:after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border-color: #FF0000;
  border-style: solid;
  border-width: 0;
  transition: all 0.5s cubic-bezier(1, 0.2, 0.26, 0.7);
  transform: translate(0px, 0px) scale(0.8);
  opacity: 0;
}
section.p10 a:before {
  left: 0;
  bottom: 0;
  border-bottom-width: 1px;
  border-left-width: 1px;
}
section.p10 a:after {
  top: 0;
  right: 0;
  border-top-width: 1px;
  border-right-width: 1px;
}      
```          
最后在鼠标滑过a元素时使用translate()函数来将两个直角边框移动到相应的位置上。

```html
section.p10 a:hover:before, section.p10 a:hover:after {
  transition: all 2s cubic-bezier(0.14, 1.13, 0, 0.91);
  opacity: 1;
}
section.p10 a:hover:before {
  transform: translate(-30px, 20px) scale(1);
  border-bottom-width: 12px;
  border-left-width: 12px;
}
section.p10 a:hover:after {
  transform: translate(30px, -20px) scale(1);
  border-top-width: 12px;
  border-right-width: 12px;
}      
```          
其它效果的实现代码请参考下载文件。

web299.com

20种配合场景的CSS3鼠标滑过文字动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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