文本/链接
CSS3鼠标悬停文字幻影动画特效
PetitQ
这是一款 CSS3 鼠标悬停文字幻影动画特效。该特效利用 before 和 after 伪元素来制作当鼠标悬停在超链接文本上的时候的幻影效果。
使用方法
在页面中引入 bootstrap.css、jquery 和 photoviewer.js 文件。
也想出现在这里？联系我们吧
<link href="dist/bootstrap.css" rel="stylesheet">
HTML 结构
在页面中添加一个<a>元素，并设置它的 data-hover 属性和它的显示文字相同。
<a href="#" class="link" data-hover="鼠标移过来">鼠标移过来</a>
CSS 样式
然后通过下面的 CSS 样式来制作鼠标悬停在超链接文字上的幻影动画特效。
.link{color: #555;
font-family: 'Courgette', cursive;
font-size: 30px;
line-height: 25px;
display: inline-block;
position: relative;
z-index: 1;
transition: all 0.5s;
}.link:hover{ color: transparent; }
.link:before,
.link:after{
content: attr(data-hover);
white-space: nowrap;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
transition:all 0.5s;
}.link:after{
color: #1da493;
opacity: 0;
left: -10px;
}.link:hover:before{
left: 15px;
opacity: 0;
}.link:hover:after{
left: 0;
opacity: 1;
transition-delay:0.1s;
}@media only screen and (max-width: 990px){
.link span{ font-size: 20px; }
}@media only screen and (max-width: 767px){
.link{ margin: 0 0 30px; }
}
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
