这次给大家带来css3的Transition平滑过渡菜单栏实现，实现Transition平滑过渡菜单栏的注意事项有哪些，下面就是实战案例，一起来看一下。
CSS3的制作动画的三大属性（Transform,Transition,Animation）下面介绍一下 Transition属性。transition属性是一个速记属性有四个属性：transition-property, transition-duration, transition-timing-function, and transition-delay。
语法
transition: property duration timing-function delay;
属性：
transition-property指定CSS属性的name，transition效果transition-durationtransition效果需要指定多少秒或毫秒才能完成transition-timing-function指定transition效果的转速曲线transition-delay定义transition效果开始的时候
下面给出一个案例
先看效果图：
原理图解：
当鼠标移入菜单列表上，添加一个hover样式。也就是让p.wrap 的top值设置为负值。然后利用transition属性使其平滑过渡。
完整demo
.menu{ margin: 100px auto; } .menu ul li{ float:left; width: 50px; height: 25px; background-color: #2aabd2; margin-right: 5px; line-height: 25px; position: relative; overflow: hidden; } .menu ul li a{ display: block; height:25px; width: 50px; text-align: center; line-height: 25px; color: white; } .menu ul li .awrap{ position: absolute; top:0; left: 0; } .menu ul li .awrap:hover{ transition: all .3s ease-in; top:-25px; }
注释：其中图标使用字体图标Font Awesome，需要了解的可以搜一下Font Awesome
相信看了本文案例你已经掌握了方法，更多精彩请关注创想鸟其它相关文章！
推荐阅读：
css3的pointer-events使用详解
focus-within的使用详解
CSS3做出无缝轮播广告
以上就是css3的Transition平滑过渡菜单栏实现的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609378.html
微信扫一扫 
支付宝扫一扫 
