斗罗大陆魂师对决|HTML知识梳理大全(五)!

斗罗大陆魂师对决|HTML知识梳理大全(五)!

文章图片

【斗罗大陆魂师对决|HTML知识梳理大全(五)!】斗罗大陆魂师对决|HTML知识梳理大全(五)!

1.旋转中心点怎么设置?如何实现缩放效果?
方法:旋转中心点通过transform-origin进行设置 , transform-origin:X 轴的位置y轴的位置z轴的位置;如下图 , 我们以左下角为旋转中心点 , 就可以这样设置:

2.动画如何使用?
第一步 , 需要定义动画:
@keyframes动画的名称 <{p>动画的位置 {初始位置
动画的最终位置 {最终位置


第二步 , 引用动画:
animation:动画的名称 动画所用的时间 动画将如何完成一个周期动画什么时候开始 动画应该播放多少次 是否循环交替反向播放动画动画结束后的位置;
animation-timing-function 。 动画将如何完成一个周期 , 默认值是ease , 以低速开始 , 然后加快 , 在结束前变慢 。 还有其他的参数可以设置:
animation-delay 属性定义动画什么时候开始 。
animation-iteration-count属性定义动画应该播放多少次 。 默认是一次 , 可以设置为infinite , 无限循环播放 。
animation-direction 属性定义是否循环交替反向播放动画 。
animation-fill-mode 动画结束后的位置 。

    相关经验推荐