050602课堂css3旋转、过渡、动画

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #first{
                width: 200px;
                height: 200px;
                background-color: orange;
                margin-left: 200px;
                margin-top: 200px;
                /*=========过渡========*/
                transition: 5s;
            }
            #first:hover{
                /*===========2D==========*/
                /*transform: rotate(45deg);*/  /* 平面内旋转*/
                /*transform: translate(30px,30px);   位置的移动,表示向右30px,向下30px*/
                /*transform: scale(2);   倍数的放大*/
                /*transform: skew(0deg,-30deg);  扭曲*/
                /*transform: skew(30deg,30deg);*/
                /*===========3D=============*/
                /*transform: rotateX(180deg);*/
                /*transform: rotateY(360deg);*/
                /*transform: rotateZ(360deg);*/
            }
            #second{
                width: 300px;
                height: 300px;
                background: black;
                position: relative;     /*相对定位*//*由于需要位置改变,所以增加了position属性*/
                animation: mysecond 5s infinite /*alternate;     动画捆绑,两个值,动画名称/时长,加上一个无限执行,交替执行 */;
            }
            @keyframes mysecond{
                /*改变位置和背景颜色*/
            0%{background: red;border-radius: 90px/*为元素添加圆角边框*/;box-shadow: -35px 0px 15px gray;left: 0px;top: 0px;}
            25%{background: yellow;border-radius: 0px;left: 400px;top: 0px;}
            50%{background: blue;border-radius: 90px;left: 400px;top: 300px;}
            75%{background: green;border-radius: 0px;box-shadow: 0px 30px 15px gray;left: 0px;top: 300px;}
            100%{background: red;border-radius: 20px;left: 0px;top: 0px;}
            /*from{background: red;border-radius: 90px;box-shadow: -35px 0px 15px gray;left: 0px;top: 0px;}
            to{background: yellow;border-radius: 0px;left: 400px;top: 0px;}
            }*/
        </style>
    </head>
    <body>
        <!--<div id="first">
            今天周末
        </div>-->
        <!----------------动画--------------->
        <div id="second">
            
        </div>
    </body>
</html>

--旋转transform
-----2D
--------rotate(edg)平面内旋转
--------translate(横向，纵向)
--------scale(宽，高)
--------skew(水平角度，垂直角度)
-----3D
--------rotateX(edg)
--------rotateY(edg)
--过渡transition:3s 时间不是hover加是那个容器需要给那个容器加
--动画
-----属性:animation:动画名称、时长，加上一个无限执行，交替执行
-----@keyframes动画名称{
0%
25%
50%
75%
100%
}
----------------动画名称{
form{}
to{}
}

050602课堂css3旋转、过渡、动画

猜你喜欢