
看到嗶哩嗶哩的幻燈上有一個張嘴的效果很好玩,這里做一個玩一玩
html代碼:
<div class="center"> <div class="eat-up"> </div> <div class="eat-down"> </div> </div>
css代碼:
.center{
width: 100px;
height:100px;
margin: 100px auto;
}
.eat-up {
background-color: green;
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
animation: eat-haha-up 1s infinite;
transform-origin: center bottom;
}
.eat-down{
background-color: green;
width: 100px;
height: 50px;
border-radius: 0 0 50px 50px;
animation: eat-haha-down 1s infinite;
transform-origin: center top;
}
@keyframes eat-haha-up {
0% {transform: rotate(0)
}
25% {transform: rotate(-45deg)
}
50% {transform: rotate(0)
}
75% {transform: rotate(-45deg)
}
to {transform: rotate(0)
}
}
@keyframes eat-haha-down {
0% {transform: rotate(0)
}
25% {transform: rotate(45deg)
}
50% {transform: rotate(0)
}
75% {transform: rotate(45deg)
}
to {transform: rotate(0)
}
}