h5学习-css3的一些内容整理 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3变形功能 transform属性</title>
    <style type="text/css">
        div{
            width:300px;
            height: 300px;
            background-color:#000;

        }
        div:hover{
        /*-moz-transform: rotate(45deg); 旋转*/
        /*-moz-transform: scale(2,2); 缩放，不能设置为负值，可以设置小数 0.5*/
        /*-moz-transform: skew(30deg);倾斜*/
        /*-moz-transform: translate(50px);移动*/
    }
</style>
</head>

<body>
<h1>rotate旋转</h1>
<div></div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css动画功能</title>
    <style type="text/css">
        div{
            width:200px;
            height: 200px;
            background-color: aqua;
            -moz-transition:all 1s linear;
        }
        div:hover{
           background-color: #e54d26;
            width: 400px;
            height: 400px;
        }

    </style>
</head>
<body>
<div></div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3 animation属性的使用</title>
    <style>
        div{
           width: 10px;
            height: 20px;
            background-color: aquamarine;
        }
      /*  关键帧的定义*/
        @-webkit-keyframes mycolor {
            0%{
                background-color: #D2D2D2;
            }
            10%{
                background-color: #646464;
                width: 10px;
            }
            20%{
                background-color: aqua;
                width:20px ;
            }
            80%{
                background-color: #e54d26;
                width: 80px;
            }
            100%{
                background-color: blueviolet;
                width: 100px;
            }
        }

        div:hover{
            -webkit-animation-name: mycolor;
            -webkit-animation-duration: 5s;
            -webkit-animation-timing-function: linear;
            -moz-animation-iteration-count:1;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

 

posted @ 2017-03-22 16:17  蒙小米  阅读(626)  评论(0)    收藏  举报