CSS-动画、多列
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;
}