看到哔哩哔哩的幻灯上有一个张嘴的效果很好玩,这里做一个玩一玩
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) } }