css3导航设计1

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

css3导航设计1

本实例通过:before和:after生成高度和宽度透明度都为0且背景为渐变的两个内容,两个不同点在于绝对定位的位置一个为left,一个为right,然后渐变背景的方向刚好相反;最后当鼠标滑过改变高度宽度及透明度,就完成了该动画。因为是对:hover状态下的:before和:after生成的内容进行宽度变化,所以该实例如同先前的那个:hover状态下的激发伪元素动画一样,webkit内核是不支持的。

demodownload

css主要代码为:

.effects:after, .effects:before {
    -moz-transition:width 0.5s ease 0s;
    height: 0px;
    width: 0px;
    position: absolute;
    content: ' ';
    display: block;
    opacity:0;
    box-shadow: 0px 0px 5px #00c6ff;
}

.effects:after {
    background: -moz-linear-gradient(left, #0ad, #08b);
    top: 84px;
    left: 75px;
}

.effects:before {
    background: -moz-linear-gradient(right, #0ad, #08b);
    top: 84px;
    right:75px;
}

.effects:hover:after, .effects:hover:before{
    width: 72px;
    height: 1px;
    opacity:1;
} 

demodownload

更多资料:http://www.alessioatzeni.com/blog/css3-navigation-with-transitions/

NIKE HYPERLIVE EP

如需转载,烦请注明出处:https://www.w3cplus.com/demo/414.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部