本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。
在css中,可以使用transition-timing-function属性设置动画匀速,只需要在元素中添加“transition-timing-function:linear;”样式即可。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
ease:
1、ease:(逐渐变慢)默认值
2、linear:(匀速)
3、ease-in:(加速)
4、ease-out:(减速)
5、ease-in-out:(加速然后减速)
6、cubic-bezier
如:
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html>< html lang = "en" >< head >
< meta charset = "UTF-8" >
< title >Document</ title >
< style type = "text/css" >
*{margin:0; padding: 0;}
.icon_down{ width: 0; height: 0; border-left:20px solid transparent; border-right: 20px solid transparent; border-top:20px solid #B03939; transition: all .1s ease-in 0ms; margin:50px auto; cursor: pointer; }
.icon_down:hover{ transform: rotate(180deg);}
</ style ></ head >< body >
< p class = "icon_down" ></ p ></ body ></ html >
|
效果图:鼠标经过旋转180度,
阅读剩余部分
相关阅读 >>
css如何让盒子浮动
css 预处理器
html css怎么设置字体大小
css如何设置字间距
css怎么实现六边形
css如何使页面整体居中
css绘制扇形进度条
css实现聚光灯效果的代码分享
css怎么设置分割线
html中表单的相关知识总结(代码实例)
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css动画怎么匀速