图片/图形
场景CSS3鼠标滑过文字动画特效
PetitQ
这是一组非常有创意的配合场景使用的 CSS3 鼠标滑过文字动画特效。这组鼠标滑过特效中，以 20 张不同的图片作为不同的场景，例如图片是一条公路，鼠标滑过这上面的文字时，就会在文字下边出现一条公路的动画效果。这 20 种不同的鼠标滑过效果使用了许多新的 CSS3 特性，不是所有的浏览器都支持这些效果，建议使用 Chrome 浏览器来查看 DEMO 演示。第一种鼠标滑过效果是最简单的效果。它的背景图片是一台照相机，在鼠标滑过时，文字的右上角和左下角会出现两个直角边框，模拟摄影机镜头的效果。
HTML 结构
第一种效果的 HTML 结构非常简单：使用一个
也想出现在这里？联系我们吧
<section class="p10">
<a href="">camera</a>
</section>
CSS 样式
第一种鼠标滑过效果的 CSS 样式中，首先为段落<section>元素添加一个背景图片。
section.p10 {
background-image: url("http://i.imgur.com/N6vLwJR.jpg");
}
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 伪元素来制作镜头的直角边框。并设置过渡动画效果。
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()函数来将两个直角边框移动到相应的位置上。
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;
}
其它效果的实现代码请参考下载文件。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
