Html5动画代码

最新推荐文章于 2024-10-09 12:10:17 发布

MissGentlemen

最新推荐文章于 2024-10-09 12:10:17 发布

阅读量8k

点赞数 4

<html>
<head>
<meta charset="utf-8" />
<title>

</title>
<style>
.div1{
width: 60px;
height: 60px;
border: 1px solid red;
background-color: aqua;
}
.div1:hover{
transform: scale(2) rotate(30deg);;

}
.div2{
width: 60px;
height: 60px;
border: 1px solid red;
background-color: mediumvioletred;
}
.div2:hover{
transform: translate(50px) ;
}
.div3{
width: 60px;
height: 60px;
border: 1px solid red;
background-color: mediumseagreen;
}
.div3:hover{
transform: skew(30deg,30deg);
transform-style: preserve-3d;
}
.div4{
width: 60px;
height: 60px;
border: 1px solid red;
background-color: mediumblue;
}
.div4:hover{
transform: matrix(1,20,20,2,10,10);
}
.div5{
width: 60px;
height: 60px;
border: 1px solid red;
background-color:crimson;
transition: all 3s linear;
}
.div5:hover{
transform: rotate(360deg) translate(50px) scale(1.5);
}
.div6{
width: 200px;
height: 200px;
background-repeat: no-repeat;
-webkit-animation: Animation 3s infinite;
}
@-webkit-keyframes Animation{
0%{
background: url(img/s01.jpg);
}
10%{background: url(img/s02.jpg);}
20%{background: url(img/s03.jpg);}
30%{background: url(img/s04.jpg);}
40%{background: url(img/s05.jpg);}
50%{background: url(img/s06.jpg);}
60%{background: url(img/s07.jpg);}
70%{background: url(img/s08.jpg);}
}
</style>
</head>
<body>
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
</body>
</html>