码迷,mamicode.com
首页 > 其他好文 > 详细

动画和变形

时间:2019-08-19 00:11:50      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:动画   一个   lte   iter   alter   ansi   enter   渐变   bic   

动画和变形

盒子动画

简单动画

渐变时间函数:transition-timing-function CSS属性以何种速度进行渐变

贝塞尔曲线:cubic-bezier

贝塞尔曲线是由四个参考点绘制而成的曲线

CSS中,第一个点和第四个点已固定,用户可以设置第二和第三个点曲线的纵坐标表示渐变轨迹,横坐标表示时间  示例:transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)

贝塞尔曲线的预设值

Ease  渐快,匀速,减慢

ease-in   渐快,匀速

ease-out   匀速,减慢

ease-in-out  ease类似,但比ease的加速度大(幅度大)

Linear   全程匀速

复杂动画

涉及到的属性

animation-name:动画名称

animation-duration:单次动画总时长

animation-timing-function:时间函数

animation-delay:播放前延时的时长

animation-iteration-count:播放次数  特殊值:infinite

animation-direction:播放顺序 normal:正常播放    alternate:轮流反向播放

animation库:https://www.dowebork

盒子变形

什么是变形

通过变形可以改变盒子的视觉效果

变形不会改变盒子原本的位置和尺寸,因此不会对其他元素造成影响

 

变形详解

变形的种类

Transition 过渡

旋转(rotate)

缩放(scale)

移动(translate)

倾斜(skew)

其他属性

透视距离:perspective  该属性设置到变形元素的父元素上

背面可见性:backface-visibility  visible:默认值,背面可见   hidden:背面不可见

动画和变形

标签:动画   一个   lte   iter   alter   ansi   enter   渐变   bic   

原文地址:https://www.cnblogs.com/RAINBOW1357/p/11374386.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!