动画效果学习

 阴影、transform

　　代码如下：

<style type="text/css">
        *{
            margin:0px;padding:0px;
        }
        .box{
            width:300px;
            margin:30px auto;
        }
        .box img{
            width:300px;
            position:relative;
            left:0px;
            top:0px;
            transition:all 1s;
                    
        }
        .box img:hover{
             
            box-shadow:5px 3px 9px 1px #cccccc;
            top: 130px;
           -webkit-transform:scale(1.3);
    </style>

　　运行结果：

 

旋转风车

　　代码如下：

<style type="text/css">
        
        img{
             margin-left:600px; margin-top:0px; 
            animation:scroll 1s linear 0s infinite normal  running forwards;
        }
        @keyframes scroll{
            from{
                transform:rotate(0deg);
            }
            to{
                transform:rotate(360deg);
            }
        }
        img:hover{
            animation-play-state:paused;     
        }
        
         div{
            width:100px;
            height:30px;
            background-color:red;
            text-align:center;
            animation:scroll2 6s linear 0s infinite normal  running forwards;
        }
        @keyframes scroll2{
            25%{
                background-color:blue;
                transform:translate(200px) skew(30deg);
            }
            50%{
                background-color:green;
                transform:translate(200px,200px);
            }
            75%{
                background-color:yellow;
                transform:translate(0px,200px) rotate(180deg);
            }
            100%{
                background-color:gray;
                transform:translate(0px,0px);
            }
        
        div:hover{
            animation-play-state:paused;     
        }
        
    </style>
    <script type="text/javascript"></script>
</head>
<body>
    <div>你好</div>
    <img src="fengche.png"></img>
</body>

 

　　运行结果：

 

 

为什么div:hover{

animation-play-state:paused;

}

　　　　　　不能挺住？？？

 

 

posted @ 2016-11-22 20:09  爱茹寒冰  阅读(183)  评论(1)    收藏  举报