1,效果图
2,源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
margin: 0;
}
P {
color: #FFC0CB;
font-size: 50px;
margin-left: 120px;
}
.eat-wrap {
width: 200px;
height: 200px;
margin-top: 100px;
box-shadow: 300px 0px 0px -80px pink,
450px 0px 0px -80px pink,
600px 0px 0px -80px pink,
750px 0px 0px -80px pink;
border-radius: 50%;
animation: run 1s infinite;
}
.eat-wrap::before {
content: "";
/* 激活伪元素 */
display: block;
width: 200px;
height: 100px;
margin-left: 100px;
background-color: pink;
border-radius: 100px 100px 0 0;
transform: rotate(-30deg);
animation: topmove 1s infinite;
}
.eat-wrap::after {
content: "";
/* 激活伪元素 */
display: block;
width: 200px;
height: 100px;
margin-left: 100px;
background-color: pink;
border-radius: 0 0 100px 100px;
transform: rotate(30deg);
animation: bottommove 1s infinite;
}
@keyframes topmove {
0%,
100% {
transform: rotate(0deg);
}
50% {
transform: rotate(-30deg);
}
}
@keyframes bottommove {
0%,
100% {
transform: rotate(0deg);
}
50% {
transform: rotate(30deg);
}
}
@keyframes run {
0% {
box-shadow: 300px 0px 0px -80px pink,
450px 0px 0px -80px pink,
600px 0px 0px -80px pink,
750px 0px 0px -80px pink;
}
100% {
box-shadow: 150px 0px 0px -80px pink,
300px 0px 0px -80px pink,
450px 0px 0px -80px pink,
600px 0px 0px -80px pink;
}
}
</style>
</head>
<body>
<div class="eat-wrap"></div>
<p>LODADING</p>
</body>
</html>
记录每一个前端小案例!