导航栏文字滑动阴影特效一

SongKer 发布时间:2016-06-02 分类:分享 阅读:4208次 10 条评论

鼠标滑动到网站导航栏时,出现阴影特效。先给出demo地址:http://songker.com/Code/htmldemo/NavMenu.html

比较简单,简单讲解下。在导航的a标签上有一个before伪元素,初始为一个透明度为0的变形的阴影,鼠标滑动时候添加一个hover样式。

具体样式代码:

a::before {
    color: #161616;
    content: attr(data-hover);
    position: absolute;
    opacity: 0;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    -webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
    -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
    transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    pointer-events: none;
}
a:hover::before,
a:focus::before {
    -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
    -moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
    transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
    opacity: 1;
}


关键字词: CSS3特效

已有10条留言

发表评论:

◎欢迎您的参与讨论。