CSS3转换和动画
2D转换
transform属性
属性值有:
translate(平移,单位px)
rotate(旋转,单位deg)
scale(缩放,给定倍数)
skew(翻转,根据X轴,Y轴,单位deg)
matrix(函数式,自定义)
3D转换
transfrom属性
属性值
rotateX(单位deg)
rotateY(单位deg)
过渡
动画
animation属性
@keyframes规则
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
from同0%
to同100%
在keyframes中创建动画后,要把它绑定到某个选择器,至少要规定动画名称,动画时长
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步