有趣的CSS - 弹跳的圆

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是用css写一个好玩的不停弹跳变形的圆。

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

整体效果

使用伪选择器 :before 和 :after ，并配合 animation 属性并设置 transform 变形参数，实现一个圆不停的弹跳的效果。

一个好玩的不停弹跳变形的圆。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<div class="yuan19"></div>

主体一个 div 标签。

css 部分代码

.yuan19:before{content: '';width: 20px;height: 20px;position: absolute;border-radius: 50%;background-color: #333;animation: yuan191 .5s ease infinite alternate;
}
@keyframes yuan191 {0% {top: 60px;height: 5px;border-radius: 50px 50px 25px 25px;transform: scaleX(1.5);}50% {height: 20px;border-radius: 50%;transform: scaleX(1);}100% {top: 0;}
}
.yuan19:after{content: '';width: 20px;height: 4px;border-radius: 50%;position: absolute;top: 62px;animation: yuan192 .5s ease infinite alternate;
}
@keyframes yuan192 {0% {filter: blur(1px);transform: scaleX(1.5);background-color: rgba(0,0,0,0.9);}50% {transform: scaleX(1);background-color: rgba(0,0,0,0.6);}100% {filter: blur(2px);transform: scaleX(0.5);background-color: rgba(0,0,0,0.3);}
}

用伪选择器 :before 和 :after 分别画两个圆，一个作为主体弹跳圆形，一个作为其阴影部分，分别设置 animation 动画参数，注意这里设置了反向播放参数 alternate 。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8"><link rel="stylesheet" href="style.css"><title>弹跳的圆</title></head><body><div class="app"><div class="yuan19"></div></div></div></body>
</html>

css 样式

/** style.css **/
.app{width: 100%;height: 100vh;background-color: #ffffff;position: relative;display: flex;justify-content: center;align-items: center;
}
.yuan19{width: 20px;height: 66px;position: relative;
}
.yuan19:before{content: '';width: 20px;height: 20px;position: absolute;border-radius: 50%;background-color: #333;animation: yuan191 .5s ease infinite alternate;
}
@keyframes yuan191 {0% {top: 60px;height: 5px;border-radius: 50px 50px 25px 25px;transform: scaleX(1.5);}50% {height: 20px;border-radius: 50%;transform: scaleX(1);}100% {top: 0;}
}
.yuan19:after{content: '';width: 20px;height: 4px;border-radius: 50%;position: absolute;top: 62px;animation: yuan1912 .5s ease infinite alternate;
}
@keyframes yuan1912 {0% {filter: blur(1px);transform: scaleX(1.5);background-color: rgba(0,0,0,0.9);}50% {transform: scaleX(1);background-color: rgba(0,0,0,0.6);}100% {filter: blur(2px);transform: scaleX(0.5);background-color: rgba(0,0,0,0.3);}
}