移动的眼睛：
思路：
用一个大盒子将两个眼睛包起来，用flex布局将两个眼睛水平均匀分配，垂直居中，眼睛里包着眼仁，用flex布局控制眼仁在眼球里的位置，之后运用动画让眼球在眼仁里动起来，匀速、一直循环。
充电电池：
思路：
建立两个大盒子，一个是盒子的头，一个是盒子的身子，身子里面再建立两个盒子，利用轮播图的思路，让它溢出隐藏，之后在背景颜色那个盒子里设两个电池身子长度，并在里面建立两个盒子，前面盒子透明背景颜色，后面盒子白色背景颜色，利用动画让它动起来，并一直循环，这样就会产生动态充电电池的动态图片的效果了。
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.most{
width: 300px;
height: 300px;
background-color: blue;
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 10px;
}
.yan1{
width: 100px;
height: 100px;
background-color: white;
border-radius: 50%;
display: flex;
flex-direction: column-reverse;
}
.yan1 div{
width: 30px;
height: 30px;
background-color: blue;
border-radius: 50%;
margin-left: 10px;
margin-bottom: 10px;
animation: donghua 1s linear infinite;
}
.yan2{
width: 100px;
height: 100px;
background-color: white;
border-radius: 50%;
display: flex;
flex-direction: column-reverse;
}
.yan2 div{
width: 30px;
height: 30px;
background-color: blue;
border-radius: 50%;
margin-left: 10px;
margin-bottom: 10px;
animation: donghua 1s linear infinite;
}
@keyframes donghua {
from{
}
to{
margin-left: 60px;
}
}
.most1 {
width: 200px;
height: 200px;
background-color: rebeccapurple;
display: flex;
justify-content: center;
}
.diana {
width: 100px;
height: 50px;
border: white solid 3px;
border-radius: 10px;
overflow: hidden;
}
.dianb {
width: 10px;
height: 20px;
background-color: white;
border: white solid 3px;
margin-bottom: 13px;
}
.dianb,
.diana {
display: inline-block;
}
.dianc {
margin-top: 60px;
}
.diand {
width: 200px;
height: 50px;
display: flex;
position: relative;
left: -100px;
animation: qq 3s linear infinite;
}
@keyframes qq {
0% {}
100% {
position: relative;
left: 3px;
}
}
.dianwu {
width: 100px;
height: 50px;
background-color: white;
}
.dianliu {
width: 100px;
height: 50px;
opacity: 100%;
}
</style>
</head>
<body>
<div class="most">
<div class="yan1">
<div></div>
</div>
<div class="yan2">
<div></div>
</div>
</div>
<div class="most1">
<div class="dianc">
<div class="diana">
<div class="diand">
<div class="dianwu"></div>
</div>
</div>
<div class="dianb"></div>
</div>
</div>
</body>
</html>
1268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
