css3 Transition属性(平滑过渡菜单栏案例)
来源:互联网 发布:蔡澜的花花世界淘宝 编辑:程序博客网 时间:2024/06/15 05:35
css3的制作动画的三大属性(Transform,Transition,Animation)下面介绍一下 Transition属性。transition属性是一个速记属性有四个属性:transition-property, transition-duration, transition-timing-function, and transition-delay。
语法
transition: property duration timing-function delay;
属性:
下面给出一个案例
先看效果图:
原理图解:
当鼠标移入菜单列表上,添加一个hover样式。也就是让div.wrap 的top值设置为负值。然后利用transition属性使其平滑过渡。
- 完整demo
<!--html--><style> .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; }</style><div class="menu clearfix"> <ul> <li> <div class="awrap"> <a href=""><i class="fa fa-cog"></i></a> <a href="">菜单</a> </div> </li> <li> <div class="awrap"> <a href=""><i class="fa fa-star-o"></i></a> <a href="">菜单</a> </div> </li> <li> <div class="awrap"> <a href=""><i class="fa fa-user"></i></a> <a href="">菜单</a> </div> </li> <li> <div class="awrap"> <a href=""><i class="fa fa-search"></i></a> <a href="">菜单</a> </div> </li> <li> <div class="awrap"> <a href=""><i class="fa fa-adn"></i></a> <a href="">菜单</a> </div> </li> </ul></div>
注释:其中图标使用字体图标Font Awesome,需要了解的可以搜一下Font Awesome
0 0
- css3 Transition属性(平滑过渡菜单栏案例)
- CSS3过渡属性transition
- CSS3属性transition(过渡)详解
- CSS3元素过渡属性transition
- CSS3 transition 属性过渡效果 详解
- 【CSS3】动画--过渡属性 transition-property
- 详解css3中transition过渡属性
- 【CSS基础】css3 transition过渡属性<四>
- transition属性——css3过渡效果
- css3——transition过渡属性
- css3 transition 实例及分析 图片hover出现文字 sidebar平滑过渡(动画系列3)
- CSS3动画——transition(过渡)
- CSS3——过渡(transition)
- CSS3 过渡之transition
- CSS3之过渡Transition
- CSS3之过渡Transition
- CSS3----过渡transition
- CSS3之过渡Transition
- DDR原理详解
- 博为峰Java面试题-异常处理之Throwable类
- 冒泡排序
- shc对shell脚本加密
- JSOUP实践:解析和遍历HTML文档
- css3 Transition属性(平滑过渡菜单栏案例)
- 9. Palindrome Number
- E.Duang
- zookeeper总结
- C++异常(exception)第一篇--综合讲解
- 微信退款
- 如何在前端用js判断一个元素在一个数组中是否存在
- 【自用】C# 字符串转颜色(如:#“FFFFFF” 转为 Color)
- 电商总结(四)基于共享存储的图片服务器架构