CSS动画与布局实践-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34290202/article/details/78378603

index01.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>这是一个初始效果</div>
<br/>
<div class="div1">这是改变后的效果</div>
<div class="DH">动画效果</div>
<br/>
<div class="dl">多列的适配效果可以帮助你自动分栏，这样就减少了麻烦
    多列的适配效果可以帮助你自动分栏，这样就减少了麻烦多列的适配效果可以帮助你自动分栏，这样就减少了麻烦
    多列的适配效果可以帮助你自动分栏，这样就减少了麻烦多列的适配效果可以帮助你自动分栏，这样就减少了麻烦
    多列的适配效果可以帮助你自动分栏，这样就减少了麻烦多列的适配效果可以帮助你自动分栏，这样就减少了麻烦
    多列的适配效果可以帮助你自动分栏，这样就减少了麻烦多列的适配效果可以帮助你自动分栏，这样就减少了麻烦
    多列的适配效果可以帮助你自动分栏，这样就减少了麻烦多列的适配效果可以帮助你自动分栏，这样就减少了麻烦
    多列的适配效果可以帮助你自动分栏，这样就减少了麻烦多列的适配效果可以帮助你自动分栏，这样就减少了麻烦
    多列的适配效果可以帮助你自动分栏，这样就减少了麻烦多列的适配效果可以帮助你自动分栏，这样就减少了麻烦
    多列的适配效果可以帮助你自动分栏，这样就减少了麻烦多列的适配效果可以帮助你自动分栏，这样就减少了麻烦   
    多列的适配效果可以帮助你自动分栏，这样就减少了麻烦多列的适配效果可以帮助你自动分栏，这样就减少了麻烦   
</div>
<div class="container">
    <div><img src="image/1.jpg"></div>
    <p>这里是一个标签</p>
    <br/>
    <div><img src="image/2.jpg"></div>
    <div><img src="image/3.jpg"></div>
    <div><img src="image/4.jpg"></div>
    <div><img src="image/5.jpg"></div>
    <div><img src="image/6.jpg"></div>
    <div><img src="image/7.jpg"></div>
    <div><img src="image/8.jpg"></div>
    <div><img src="image/9.jpg"></div>
    <div><img src="image/1.jpg"></div>
    <div><img src="image/2.jpg"></div>
    <div><img src="image/3.jpg"></div>
    <div><img src="image/4.jpg"></div>
    <div><img src="image/5.jpg"></div>
    <div><img src="image/6.jpg"></div>
    <div><img src="image/7.jpg"></div>
    <div><img src="image/8.jpg"></div>
    <div><img src="image/9.jpg"></div>
    <div><img src="image/1.jpg"></div>
    <div><img src="image/2.jpg"></div>
    <div><img src="image/3.jpg"></div>
    <div><img src="image/4.jpg"></div>
    <div><img src="image/5.jpg"></div>
    <div><img src="image/6.jpg"></div>
    <div><img src="image/7.jpg"></div>
    <div><img src="image/8.jpg"></div>
    <div><img src="image/9.jpg"></div>
</div>
</body>
</html>

style.css

/*div{*/
    /*width: 200px;*/
    /*height: 200px;*/
    /*background-color: aqua;*/
/*}*/

/*移动*/
/*.div1{*/
    /*transform: translate(200px,100px);*/
    /*-webkit-transform: translate(200px,100px);*//*这是支持chrome浏览器的*/
    /*-ms-transform: translate(200px,100px);*//*支持IE浏览器*/
/*}*/

/*旋转*/
/*.div1{*/
    /*transform: rotate(200deg);*/
    /*-webkit-transform: rotate(200deg);*/
/*}*/

/*缩放*/
/*.div1{*/
    /*margin-top: 100px;*/
    /*transform: scale(1,2);*/
    /*-webkit-transform: scale(1,2);*/
/*}*/

/*倾斜*/
/*.div1{*/
    /*transform: skew(20deg,20deg);*/
    /*-webkit-transform:skew(20deg,20deg);*/
/*}*/

/*3D转换*/
 /*.div1{*/

     /*transform: rotateY(150deg);*/
     /*-webkit-transform:rotateY(150deg);*/
 /*}*/

/*过渡*/
.div1{
    width: 100px;
    height: 100px;
    background-color: aqua;
    -webkit-transition: width 2s,height 2s,-webkit-ransfom 2s;
    transition: width 2s,height 2s,transform 2s;
    -webkit-transition-delay: 2s;
    transition-delay: 2s;
}
.div1:hover{
    width: 200px;
    height: 200px;
    transform: rotate(360deg);
    -wenkit-transform：rotate(360deg);
}

/*动画*/
.DH{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    animation: anim 5s infinite alternate;
    -webkit-animation: anim 5s infinite alternate;
}
@keyframes anim {
    0%{
        background-color: blue;
        left: 0px;
        top: 0px;
    }
    25%{
        background-color: blueviolet;
        left: 500px;
        top: 500px;
    }
    50%{
        background-color: chartreuse;
        left: 250px;
        top: 250px;
    }
    75%{
        background-color: darkorange;
        left: 0px;
        top: 500px;
    }
    100%{
        background-color: gold;
        left: 500px;
        top: 0px;
    }
}
@-webkit-keyframes anim {
     0%{
         background-color: blue;
         left: 0px;
         top: 0px;
     }
     25%{
         background-color: blueviolet;
         left: 200px;
         top: 0px;
     }
     50%{
         background-color: chartreuse;
         left: 200px;
         top: 200px;
     }
     75%{
         background-color: darkorange;
         left: 0px;
         top: 200px;
     }
     100%{
         background-color: gold;
         left: 0px;
         top: 0px;
     }

 }
.dl{
    column-count: 6;
    column-gap: 20px;
    column-rule: 5px outset red;
    -webkit-column-rule:5px outset red;
}
.container{
    column-width: 500px;
    -webkit-column-width:500px ;
     column-gap: 5px;
}
.container div{
    width: 500px;
    margin: 5px;
}
.container p{
    text-align: center;
    color: chartreuse;
    font-size: 20px;
}