zoukankan html css js c++ java

小练习（4）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>滚动</title>
        <style type="text/css">
            *{
                margin: 0 auto;
            }
            #movie{
                width: 100px;
                height: 100px;
                background-color: red;    
                
                animation :movie 10s infinite alternate;            
            }
        @keyframes movie{
            0%{background-color: blue;margin-left: 0px;}
            30%{background-color: yellow;margin-left: 500px;margin-top:0px;border-radius: 50%;}
            60%{background-color: red;margin-left: 500px;margin-top:200px;}
            90%{background-color: black;margin-left: 0px;margin-top:200px;}
            100%{background-color: blue;margin-left: 0px;}
        }
            #big_box
            {
                width: 350px;
                height: 250px;
            }
            #box1{
                width: 100px;
                height: 100px;
                float: left;
                margin-left: 10px;
                margin-top: 10px;
                overflow: hidden;
                
            }
            img:hover{
                transform: scale(1.5,1.5);
                transition:2s;
            }
            #box2{
                width: 100px;
                height: 100px;
                background-image: url(../../img/qy/qy2.jpg);
                background-size: 100% 100%;
                float: left;
                margin-left: 10px;
                margin-top: 10px;
            }
            #box2:hover{
                transform: rotate(180deg);
                transition:2s;
            }
            #box3{
                width: 100px;
                height: 100px;
                background-image: url(../../img/qy/qy3.jpg);
                background-size: 100% 100%;
                float: left;
                margin-left: 10px;
                margin-top: 10px;
            }
            #box3:hover{
                transform: rotateY(180deg);
                transition:2s;
            }
            #box4{
                width: 100px;
                height: 100px;
                background-image: url(../../img/qy/qy4.jpg);
                background-size: 100% 100%;
                float: left;
                margin-left: 10px;
                margin-top: 10px;
                border: 2px solid red;
                transition: 2s;
            }
            #box4:hover{
                box-shadow: 5px 5px blue;
                border-radius: 10px;    }
            #box5{
                width: 100px;
                height: 100px;
                background-image: url(../../img/qy/qy5.jpg);
                background-size: 100% 100%;
                float: left;
                margin-left: 10px;
                margin-top: 10px;
                transition: 2s;
            }
            #box5:hover{
                filter: hue-rotate(180deg);
            }
            #box6{
                width: 100px;
                height: 100px;
                background-image: url(../../img/qy/qy6.jpg);
                background-size: 100% 100%;
                float: left;
                margin-left: 10px;
                margin-top: 10px;
                transition: 5s;
            }
            #box6:hover{
                background-image: url();
                background-color: blue;                
            }
            
        </style>
    </head>
    <body>
        <div id="movie">
            
        </div>
        <div id="big_box">
            <div id="box1">
                <img src="../../img/qy/qy1.jpg" width="100%" height="100%"/>
            </div>
            <div id="box2"></div>
            <div id="box3"></div>
            <div id="box4"></div>
            <div id="box5"></div>
            <div id="box6"></div>
        </div>
    </body>
</html>

6个div
第一个鼠标移上，图片从中间位置拉近
第二个鼠标移上，2d旋转180deg
第三个鼠标移上，3d Y轴旋转180deg
第四个鼠标移上，给div加边框阴影和圆角
第五个鼠标移上，图片加滤镜
第六个鼠标移上，改div的背景

movie盒子有动画效果

查看全文

相关阅读:
微信小程序HTTPS
微信商城-1简介
 va_list
Event log c++ sample.
EVENT LOGGING
Analyze Program Runtime Stack
unknow table alarmtemp error when drop database (mysql)
This application has request the Runtime to terminate it in an unusual way.
How to check if Visual Studio 2005 SP1 is installed
SetUnhandledExceptionFilter

原文地址：https://www.cnblogs.com/Jxliu/p/8708638.html