关键帧动画旋转效果

                关键帧动画旋转效果

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： CSS

撰写时间：2021/5/28

注意红色箭头指向内容，本文将分为9张图片，并按从上到下顺序操作

1.我们先简单看看效果。

2.它的效果是固定中心轴向右旋转，并且心的颜色是按照设置好的不断变化。

3.开始，如下图，我们先添加两个div标签在body标签里面；

4.然后我们给这两个div标签各自添加一个类，我给这两个类分别起名为v1、v2；

5.之后我们在v2添加一个爱心(按照需要添加)；

6.接下来，我们在title标签下面添加一个style标签用于存放css样式(也可另外创建一个css文档，然后引入到html)；

7.如下图，在style标签里面我先写了一些简单样式方便接下来操作(按照自己的需要添加样式)；

8.如下图，我们先设置类v1的动画，在v1里面添加一个简写属性animation，它可设置动画的六个属性，如图中的三个方框内容，意思分别是：需要绑定到keyframe的名称、动画的时间、速度(infinite意思是恒速) ；

9.然后再设置类v2的内容，方框内容意思和图2一样

10.图4内容，我们叫@keyframes为关键帧，lei是我们在上面设置好的名称；

11.然后我们设置从0%到100%的这个效果；

12.transform属性：向元素应用2D或3D转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜。

13.totateY()方法：元素围绕Y轴以及给定的度数进行旋转。

14.图5同上，方框内容是0%到100%颜色值的变化，color为字体颜色(根据个人需要设置颜色值)。

15.最后，附上以上所有内容的完整图，以方便您观看！

此方法通过关键帧实现动画旋转效果，图片里面已标注好注释以方便您阅读，然后以此方式进行分享，希望可以帮助到你们，新手小白懂得不多，如有不当还望见谅，多多关照！

以上就是我的分享，如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！