css3 由小变大然后一直旋转的动画怎么做

答案:6 悬赏:30 手机版

解决时间 2021-01-29 20:16

提问者网友：末路
2021-01-29 16:51

最佳答案

五星知识达人网友：酒者煙囻
2021-01-29 18:23

这个要分成两个css3动画去做
小变大是最外层父级，例如它执行了1s；
内层的负责旋转，延迟1s执行

全部回答

1楼网友：不甚了了
2021-01-29 22:28

亲，css写不了哦。用js去写

2楼网友：话散在刀尖上
2021-01-29 21:41

主要需要使用-webkit-animation如：-webkit-animation:gogogo2sinfinitelinear;其中gogogo是自己定义的动画帧，2s是整个动画的秒数，infinite是永久循环linear是线性变化(step-end则是无线性变化，直接输出结果)代码如下：CSS:@-webkit-keyframesgogogo{0%{-webkit-transform:rotate(0deg);border:5pxsolidred;}50%{-webkit-transform:rotate(180deg);background:black;border:5pxsolidyellow;}100%{-webkit-transform:rotate(360deg);background:white;border:5pxsolidred;}}.loading{border:5pxsolidblack;border-radius:40px;width:28px;height:188px;-webkit-animation:gogogo2sinfinitelinear;margin:100px;}

3楼网友：三千妖杀
2021-01-29 20:01

这个只用css不能完全实现，的配合js的定时器来完成，下面是代码：


    HTML5

        img{width: 200px;}
        .div1{width: 200px;height: 200px;border:1px solid #000;margin: 150px auto;}
        .animate1{
            -webkit-animation:  move1 2s infinite;
        }
        .animate2{
            -webkit-animation:  move2 1s infinite;
        }
        @-webkit-keyframes move1{
            0%{
                -webkit-transform:scale(1);
            }
            100%{
                -webkit-transform:scale(1.5);
            }
        }
        @-webkit-keyframes move2{
            0%{
                -webkit-transform: rotateZ(0deg) scale(1.5);
                -webkit-transform:;
            }
            100%{
                -webkit-transform: rotateZ(360deg) scale(1.5);
            }
        }

原理是：当animate1执行完后，把这个class去掉，换成animate2。其中animate1的执行时间，刚好是js定时器的时间。

当然这里有个问题，js定时的时间不一定会非常的吻合css的动画时间，你可以根据情况作出适当的时间调整。