【动画消消乐 】HTML+CSS 吃豆豆动画 073 (2)

只需要修改box-shadow中的水平偏移量即可完成

span { animation: c 1s linear infinite; } @keyframes c { 0% { box-shadow: 120px 0px 0 -40px rgba(255, 255, 255, .5), 100px 0px 0 -40px rgba(255, 255, 255, .75), 80px 0px 0 -40px rgba(255, 255, 255, 1); } 100% { box-shadow: 100px 0px 0 -40px rgba(255, 255, 255, .5), 80px 0px 0 -40px rgba(255, 255, 255, .75), 60px 0px 0 -40px rgba(255, 255, 255, 1); } }

效果如下图

步骤5

使用span::before和span::after充当嘴闭合的两部分

首先设置span::before

设置为

绝对定位（top: -48px left: -48px）

上边框为：48px red solid

下、左、右边框：48px transparent solid;

span::before { position: absolute; content: \'\'; top: -48px; left: -48px; border-top: 48px red solid; border-bottom: 48px transparent solid; border-left: 48px transparent solid; border-right: 48px transparent solid; }

效果如下图

再圆角化

span::before { border-radius: 50%; }

效果如下图

为span::before添加动画

动画效果描述为：一直绕圆心旋转 0-45度

span::before { animation: a .5s linear infinite alternate; } @keyframes a { 0% { transform: rotate(45deg) } 100% { transform: rotate(0deg) } }

效果如下图

同理 使用span::after

设置为

绝对定位（ top: -48px left: -48px）

下边框：48px red solid;

上、左、右边框：48px transparent solid;

圆角化：border-radius: 50%;

span::after { position: absolute; content: \'\'; top: -48px; left: -48px; border-top: 48px transparent solid; border-bottom: 48px red solid; border-left: 48px transparent solid; border-right: 48px transparent solid; border-radius: 50%; }

效果如下图

再为span::after添加和before一样效果的动画

span::after { animation: b .5s linear infinite alternate; } @keyframes b { 0% { transform: rotate(-45deg) } 100% { transform: rotate(0deg) } }

效果如下图

步骤6

span::after、span::before边框中颜色红色修改为白色

最后span、span::after、span::before三个动画一起显示

得到最终效果

结语

学习来源：

https://codepen.io/bhadupranjal/pen/vYLZYqQ

文章仅作为学习笔记，记录从0到1的一个过程。希望对您有所帮助，如有错误欢迎小伙伴指正～

我是海轰ଘ(੭ˊᵕˋ)੭，如果您觉得写得可以的话，请点个赞吧

写作不易，「点赞」+「收藏」+「转发」

谢谢支持❤️