这是一组非常有创意的配合场景使用的CSS3鼠标滑过文字动画特效。这组鼠标滑过特效中，以20张不同的图片作为不同的场景，例如图片是一条公路，鼠标滑过这上面的文字时，就会在文字下边出现一条公路的动画效果。

这20种不同的鼠标滑过效果使用了许多新的CSS3特性，不是所有的浏览器都支持这些效果，建议使用Chrome浏览器来查看DEMO演示。

制作方法

第一种鼠标滑过效果是最简单的效果。它的背景图片是一台照相机，在鼠标滑过时，文字的右上角和左下角会出现两个直角边框，模拟摄影机镜头的效果。

HTML结构

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

camera

CSS样式

第一种鼠标滑过效果的CSS样式中，首先为段落元素添加一个背景图片。

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;

}

接着使用元素的: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;

}

最后在鼠标滑过元素时使用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;

}

其它效果的实现代码请参考下载文件。