Loading... ## 变形 语法：`transform: 属性值;` 属性值解释 * translate(x,y)：平移函数，基于X、Y坐标重新定位元素的位置 * scale(数字)：缩放函数，可以使任意元素对象尺寸发生变化 * rotate(??deg)：旋转函数，取值是一个度数值 * skew(??deg)：倾斜函数，取值是一个度数值 [会改变元素原有的形状] ## 过渡 ### 语法 ```css transition:[过渡属性 过渡所需时间 过渡速度 过渡延时]; /* transition : transition-property 过渡属性 transition-duration 过渡所需时间 transition-timing-function 过渡速度 transition-delay 过渡延时 */ ``` 属性值解释 * 过渡属性: 是指哪些属性将会拥有过渡效果,比如:背景,宽度,高度等,一般情况可以写成 all; * 过渡所需时间: 是指过渡效果需要多长的时间来完成一般是以秒(s)为单位,或者以毫秒(ms)为单位; * 过渡速度: * ease：速度由快到慢（默认值） * linear：速度恒速（匀速运动） * ease-in：速度越来越快（渐显效果） * ease-out：速度越来越慢（渐隐效果） * ease-in-out：速度先加速再减速（渐显渐隐效果） * 过渡延时: 该过渡效果需要在多长时间(毫秒[ms] / 秒[s])之后触发 ## 动画 ### 定义动画关键帧 ```css @keyframes 关键帧的名字{ 0%{xxxx} 10%{xxxx} ..... 100%{xxxx} } ``` ### 使用动画 ```css animation: 关键帧的名字 动画完成所需时间 动画完成速度 动画延时 动画播放次数 动画播放方向 动画播放状态 动画开始之前或结束之后的操作; /* animation: animation-name 关键帧的名字 animation–duration 动画完成所需时间 animation-timing-function 动画完成速度 animation-delay 动画延时 animation-iteration-count 动画播放次数 animation-direction 动画播放方向 animation-play-state 动画播放状态 animation-fill-mode; 动画开始之前或结束之后的操作 */ ``` 属性值解释 * 关键帧的名字: 填写关键帧名称即可 * 动画完成所需时间: 以s或者ms为单位 * 动画完成速度: 和过渡效果一致,请参阅第二条 * 动画延时: 和过渡延时效果一致 * 动画播放次数: 1:则表示运行1次 如需循环播放,则填写:infinite * 动画播放方向: * normal 正常 * alternate 交替 * 动画播放状态: * running 正在播放 * paused 暂停动画播放 * 动画开始之前或结束之后的操作: * forwards:将动画停留在最后一个关键帧 * backwards:在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义） --- <div class="tip inlineBlock share simple"> html+css3系列的文章到这里就结束了，很开心你能够将这个系列的内容全部阅读完毕，如果可以的话，我希望你能够再动手做一个小项目，可以参考我们在校学员所完成的作品：[青鸟技术栈-学员作品](https://pro.jbea.cn)！ 祝：学有所成～ </div> 最后修改：2022 年 08 月 31 日 © 允许规范转载 赞 1 都滑到这里了，不点赞再走！？
