2D动画的制作 - 爱码网

通过css3的transform transition可以实现平移,旋转,缩放,拉伸等效果

1.缩放

-webkit-transform: scale(1);

-moz-transform: scale(1);

-ms-transform: scale(1);

-o-transform: scale(1);

transform: scale(1);

2.平移

-webkit-transform: translate(0px, 0px);

-moz-transform: translate(0px ,0px);

-ms-transform: translate(0px, 0px);

-o-transform: translate(0px, 0px);

transform: translate(0px, 0px);

3旋转 deg是角度的单位

-webkit-transform: rotate(0);

-moz-transform: rotate(0deg);

-ms-transform: rotate(0deg);

-o-transform: rotate(0deg);

transform: rotate(0deg);

4复合效果

-webkit-transform: translate(0px,0px) scale(1) rotate(0);

-moz-transform: translate(0px,0px) scale(1) rotate(0);

-ms-transform: translate(0px,0px) scale(1)rotate(0) ;

-o-transform: translate(0px,0px) scale(1) rotate(0);

transform: translate(0px,0px) scale(1) rotate(0);

5.让它变化持续时间变慢便于观看第一个参数表示全部属性,第二个表示持续时间,第三个表示非线性变化,还有一个开始时间,可以省略

-webkit-transition: all 3s ease ;

-moz-transition: all 3s ease ;

-ms-transition: all 3s ease ;

-o-transition: all 3s ease ;

transition: all 3s ease ;

.test:hover{

-webkit-transform: scale(2)rotate(180deg) translate(200px,200px);

-moz-transform: scale(2) rotate(180deg) translate(200px,200px);

-ms-transform: scale(2) rotate(180deg) translate(200px,200px);

-o-transform: scale(2) rotate(180deg) translate(200px,200px);

transform: scale(2) rotate(180deg) translate(200px,200px);

}

下面是本人做的一个简单的2D动画效果,大家可以参考<!DOCTYPE html>

>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <style type="text/css">
            @keyframes go{
                0%{
                    transform: translate(0,0)  rotateZ(0deg);
                }
                25%{
                    transform: translate(500px,0)  rotateZ(-1000deg);
                }
                50%{
                    transform: translate(500px,300px)  rotateZ(-2000deg);
                }
                75%{
                    transform: translate(0,300px)  rotateZ(-3000deg);
                }
                100%{
                    transform: translate(0,0)  rotateZ(-4000deg);
                }
               }
            .big{
                margin: 0 auto;
                margin-top: 200px;
                width: 600px;
                height: 400px;
                border: 1px solid red;
            }
            .small{
                
                margin: 0 auto;
                width: 400px;
                height: 200px;
                border: 1px solid yellow;
            }
            .a{
                width: 92px;
                height: 92px;
                border-left: 4px solid blue;
                border-bottom: 4px solid red;
                border-top: 4px solid orange;
                border-right: 4px solid aqua;
                background-image: -webkit-radial-gradient( 46px 46px, yellow 20%, red 60%, blue 20%);
                 /*这一句是颜色渐变为了美观*/

                border-radius: 50px;
                animation: go 10s linear;
                animation-iteration-count: infinite;
                
            }
            
            
            
        </style>
    </head>
    <body>
        <div class="big">
            <div class="a"></div>
            <div class="small"></div>
        </div>
        
    </body>
</html>

这样就可以看到有效果了,都写五行是为了做浏览器兼容问题,复合状态下改变顺序会改变效果.

希望对刚入门的新手有所帮助,本人也是刚入门,希望有错的地方大神多多指点