详解css3 Transition属性（平滑过渡菜单栏案例）
79 浏览量
2020-09-24
20:05:14
上传
评论
收藏 44KB PDF 举报
详解详解css3 Transition属性（平滑过渡菜单栏案例）属性（平滑过渡菜单栏案例）
主要介绍了详解css3 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-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
transition-delay 定义transition效果开始的时候
下面给出一个案例
先看效果图：
原理图解：
当鼠标移入菜单列表上，添加一个hover样式。也就是让div.wrap 的top值设置为负值。然后利用transition属性使其平滑过渡。
完整完整demo
<!--html-->
<style>
.menu{
margin: 100px auto;
评论0
最新资源