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

发布网友发布时间：2022-04-23 09:26

共6个回答

热心网友时间：2022-04-06 12:22

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

<!DOCTYPE html>
<html>
<head>
    <title>HTML5</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <style type="text/css">
        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);
            }
        }
    </style>
</head>
<body>

    <div class="div1 animate2"></div>
    <script type="text/javascript">
        window.onload=function(){
            var oDiv=document.querySelector(".div1");
            oDiv.className="div1 animate1";
            setTimeout(function(){
                oDiv.className="div1 animate2";
            },2000);
        }
    </script>
</body>
</html>

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

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

热心网友时间：2022-04-06 13:40

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

热心网友时间：2022-04-06 15:15

主要需要使用-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;}

热心网友时间：2022-04-06 17:06

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

<div></div>

</body>
</html>

热心网友时间：2022-04-06 19:14

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}

.circle {
width: 200px;
height: 200px;
text-align: center;
background-color: #fc3;
border-radius: 50%;
animation: sizeAnimate 1s ease-in, rotateAnimate 1s infinite linear 1s;
}

.animate-show {
width: 20px;
height: 20px;
background-color: #000;
display: inline-block;
}

@keyframes sizeAnimate {
from {
width: 20px;
height: 20px;
}
to {
width: 200px;
height: 200px;
}
}

@keyframes rotateAnimate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>

<body>
<div class="circle"><span class="animate-show"><span></div>
</body>

</html>
随便写了一个

热心网友时间：2022-04-06 21:39

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