斗罗大陆魂师对决|HTML知识梳理大全（五）！ acgn漫评

文章图片

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

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

【斗罗大陆魂师对决|HTML知识梳理大全（五）！】第二步，引用动画：
animation:动画的名称动画所用的时间动画将如何完成一个周期动画什么时候开始动画应该播放多少次是否循环交替反向播放动画动画结束后的位置;
animation-timing-function 。动画将如何完成一个周期，默认值是ease ，以低速开始，然后加快，在结束前变慢。还有其他的参数可以设置：
animation-delay 属性定义动画什么时候开始。
animation-iteration-count属性定义动画应该播放多少次。默认是一次，可以设置为infinite ，无限循环播放。
animation-direction 属性定义是否循环交替反向播放动画。
animation-fill-mode 动画结束后的位置。