css3实现吃豆豆的效果 和 text-shadow实现文字立体效果
话不多说直接上代码看效果：
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgb(0,0,0);
}
.eat-wrap {
width: 200px;
height: 200px;
margin-top: 100px;
background-color: rgb(0,0,0);
border-radius: 50%;
box-shadow:
250px 0px 0px -80px red,
350px 0px 0px -80px red,
450px 0px 0px -80px red,
550px 0px 0px -80px red;
animation: eaty-move 1s infinite;
}
.eat-wrap::before {
content: '';
width: 200px;
height: 100px;
display: block;
margin-left:80px;
border-radius: 100px 100px 0px 0px;
background-color: peru;
transform: rotate(-20deg);
/* infinite 无限循环 */
animation: eaty-top 1s infinite;
}
.eat-wrap::after {
content: '';
width: 200px;
height: 100px;
margin-left: 80px;
display: block;
border-radius: 0px 0px 100px 100px;
background-color: peru;
/* 变化:角度rotate(20deg) */
transform: rotate(20deg);
animation: eaty-bot 1s infinite;
}
//文字立体效果
h2 {
font-size:104px;
color: purple;
margin-left: 50px;
/* x,y,阴影距离，颜色 */
text-shadow:
0px 0px 0 #b89800,
1px -1px 0 #b39400,
2px -2px 0 #ad8f00,
3px -3px 0 #a88b00,
4px -4px 0 #a38700,
5px -5px 0 #9e8300,
6px -6px 0 #a88b00,
7px -7px 0 #a38700,
8px -8px 0 #9e8300;
}
@keyframes eaty-top {
0% {
transform: rotate(-0deg);
}
50% {
transform: rotate(-20deg);
}
100% {
transform: rotate(-0deg);
}
}
@keyframes eaty-bot {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(20deg);
}
100% {
transform: rotate(0deg);
}
}
//吃豆豆动画
@keyframes eaty-move {
0% {
box-shadow: 250px 0px 0px -80px greenyellow,
350px 0px 0px -80px greenyellow,
450px 0px 0px -80px greenyellow,
550px 0px 0px -80px greenyellow;
}
100% {
box-shadow: 150px 0px 0px -80px greenyellow,
250px 0px 0px -80px greenyellow,
350px 0px 0px -80px greenyellow,
450px 0px 0px -80px greenyellow;
}
}
</style>
<body>
<div class="eat-wrap"></div>
<h2>Loding...</h2>
</body>
