运行效果

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{background-color: #cbcbcb;}.main{height: 200px;width: 180px;display: grid;grid-template-columns: repeat(6,16.666%);grid-template-rows: repeat(1,100%);text-align: center;position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);}.main span{position: absolute;font-size: 25px;}.main .main-circle-1{color:#00FFFF;left: 0;animation: move 1s ease-in-out infinite;animation-delay:0s;}.main .main-circle-2{color:#FF8C00;left: 16.6%;animation: move 1s ease-in-out infinite;animation-delay:0.1s;}.main .main-circle-3{color:  #FFD700;left: 33.3%;animation: move 1s ease-in-out infinite;animation-delay:0.2s;}.main .main-circle-4{color:#EE82EE;left: 50%;animation: move 1s ease-in-out infinite;animation-delay:0.3s;}.main .main-circle-5{color:#FF6347;left: 66.6%;animation: move 1s ease-in-out infinite;animation-delay:0.4s;}.main .main-circle-6{color:#40E0D0;left: 83.3%;animation: move 1s ease-in-out infinite;animation-delay:0.5s;}/*.main .main-circle-1{animation: move 1s ease-in-out infinite;}*/@keyframes move {0%{top: 80%}100%{top: 0}}</style>
</head>
<body>
<div class="main"><span class="main-circle-1">●</span><span class="main-circle-2">●</span><span class="main-circle-3">●</span><span class="main-circle-4">●</span><span class="main-circle-5">●</span><span class="main-circle-6">●</span>
</div>
</body>
</html>

CSS：实现跳动小球蒙版效果相关推荐

filter滤镜实现img图片的CSS蒙版效果、模糊效果
文章目录 ```filter滤镜```实现```img图片```的CSS```蒙版效果.模糊效果``` 1. 效果图 2.代码实例注意: 3.兼容性对比 filter滤镜实现img图片的CSS蒙版效 ...
CSS制作类似 Photoshop 模糊蒙版效果
CSS制作类似 Photoshop 模糊蒙版效果引言不兼容IE的纯css实现代码实现代码实现原理兼容IE10,IE11的模糊蒙版效果,使用canvas 实现代码实现原理引言为了使一个在 ...
css 蒙版效果_CSS蒙版的过渡效果
css 蒙版效果 View demo 查看演示 Download Source 下载源 Today we'd like to show you how to create an intriguingl ...
用css3实现ps蒙版效果+动画
说实话,css3越来越强大,使用css也可以做越来越多意想不到的效果. 今天,见到有人用css3实现了ps的蒙版效果,如下所示: 实现原理这个动画,其实也并不复杂.它使用background-cli ...
顺时针小球圆周运动Java编程_如何使用CSS实现圆周运动小球的实例
我们时常在页面中见到一些动画效果,这些动画效果,很多可以仅通过CSS来实现. 在这里我们用到了CSS3的animation属性. animation 属性是一个简写属性,用于设置六个动画属性: ani ...
小白学编程(CSS)：跳动的文字
先上效果: CSS:文字跳动特效思路: 这次我们的目标是实现文字的跳动.第一步:在页面中显示文字.HTML代码如下: <body><h1><span>嗨</ ...
一个精美的跳动小球—手把手教你用贝塞尔曲线实现一个酷炫跳动动画。
一个精美的跳动小球-手把手教你用贝塞尔曲线实现一个酷炫跳动动画. 2017-08-07 BraveJoy 终端研发部前言介绍手把手教你用贝塞尔曲线实现一个精美的跳动的小球. 正文效果展示: 说点 ...
如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...
使用css实现瀑布流的效果
使用css实现瀑布流的效果主要是通过display:flex弹性布局的方式. 注意要设置列数图片的宽度要一致,否则图片显示会有问题 <!DOCTYPE html> <html la ...
css有些效果不显示,css导入成功但没有效果怎么办
css导入成功但没有效果的解决办法:1.打开网页调试工具,根据显示错误进行修改:2.查看link标签的"rel="stylesheet""是否有错,并修改即可. ...

CSS：实现跳动小球蒙版效果

运行效果

代码

CSS：实现跳动小球蒙版效果相关推荐

最新文章

热门文章