怎么使用纯CSS实现在容器中反弹的小球

小编给大家分享一下怎么使用纯CSS实现在容器中反弹的小球，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联主营松阳网站建设的网络公司,主营网站建设方案,成都APP应用开发,松阳h5微信小程序定制开发搭建,松阳网站营销推广欢迎松阳等地区企业咨询

代码解读

定义dom，只有一个元素：

<divclass="loader"></div>

居中显示：

body{

margin:0;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

background-color:black;

}

定义容器的尺寸：

.loader{

width:10em;

height:3em;

border:0.3emsolidsilver;

border-radius:3em;

font-size:20px;

}

把容器左右两侧分别涂上不同的颜色：

.loader{

border-left-color:hotpink;

border-right-color:dodgerblue;

}

在容器中画一个小球：

.loader{

position:relative;

}

.loader::before{

content:'';

position:absolute;

top:0;

left:0;

width:3em;

height:3em;

border-radius:50%;

background-color:dodgerblue;

}

让小球在容器中往复移动：

.loader::before{

animation:shift3slinearinfinite;

}

@keyframesshift{

50%{

left:7em;

}

}

再让小球在撞到两端时变色：

.loader::before{

animation:

shift3slinearinfinite,

change-color3slinearinfinite;

}

@keyframeschange-color{

0%,55%{

background-color:dodgerblue;

}

5%,50%{

background-color:hotpink;

}

}

最后，让容器不停地旋转：

.loader{

animation:spin3slinearinfinite;

}

@keyframesspin{

to{

transform:rotate(360deg);

}

}

以上是“怎么使用纯CSS实现在容器中反弹的小球”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

本文标题：怎么使用纯CSS实现在容器中反弹的小球
本文链接：https://www.cdcxhl.com/article8/gdhoop.html

成都网站建设公司_创新互联，为您提供Google、做网站、外贸网站建设、网站设计、定制网站、自适应网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联