前端（09 HTML知识）
2018-08-17 本文已影响0人
周肸
1动图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动图</title>
<style type="text/css">
.box{
width: 500px;
height: 200px;
border: 1px solid black;
margin: 0 auto;
}
.box1{
width: 40px;
height: 80px;
background:red;
float: left;
margin-top: 50px;·
margin-left: 50px;
border-radius: 10px;
animation: moving 500ms ease 0ms infinite alternate both;
}
.box2{
width: 40px;
height: 80px;
background: purple;
float: left;
margin-top: 50px;
margin-left: 50px;
border-radius: 10px;
animation: moving 500ms ease 100ms infinite alternate both;
}
.box3{
width: 40px;
height: 80px;
background: green;
float: left;
margin-top: 50px;
margin-left: 50px;
border-radius: 10px;
animation: moving 500ms ease 200ms infinite alternate both;
}
.box4{
width: 40px;
height: 80px;
background: yellow;
float: left;
margin-top: 50px;
margin-left: 50px;
border-radius: 10px;
animation: moving 500ms ease 300ms infinite alternate both;
}
.box5{
width: 40px;
height: 80px;
background: pink;
float: left;
margin-top: 50px;
margin-left: 50px;
border-radius: 10px;
animation: moving 500ms ease 400ms infinite alternate both;
}
@keyframes moving{
from{
transform: scaleY(1);
}
to{
transform: scaleY(0.5);
}
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
</body>
</html>
2.图片翻面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片翻面</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
backface-visibility: red;
animation: moving 1s ease 0s 5 infinite alternate/* forwards*//*both*/;
animation-play-state: paused;
}
.box:hover{
animation-play-state: running;
}
@keyframes moving{
from{
width: 100px;
}
to{
}
}
</style>
</head>
<body>
