CSS3动画-animation光晕动画案例2

仿进度条，使用CSS3新增选择器：before改写样式

css3, wave

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4038
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
     background: #161616;
 }
 * {
     margin: 0;
     padding: 0;
     outline: none;
 }
 .container {
     width: 960px;
     margin: 0 auto;
     overflow: hidden;
 }
 /* PROGRESS BAR */
 
 #progress {
     list-style: none;
     width: 500px;
     margin: 0 auto;
     padding-top: 50px;
     padding-bottom: 50px;
 }
 #progress li {
     float: left;
     position: relative;
     width: 30px;
     height: 30px;
     border: 1px solid #fff;
     border-radius: 50%;
     margin-left: 20px;
     background: #000;
 }
 #progress li:first-child {
     margin-left: 0;
 }
 .running .ball {
     background-color: #2187e7;
     background-image: linear-gradient(90deg, #2187e7 25%, #a0eaff);
     width: 30px;
     height: 30px;
     border-radius: 50%;
 }
 .running .ball:before {
     content: "";
     width: 30px;
     height: 30px;
     border-radius: 50%;
     border: 1px solid #00c6ff;
     box-shadow: 0 0 5px #00c6ff;
     position: absolute;
     top: -1px;
     left: -1px;
 }
 #progress li:hover .ball:before {
     animation: pulse 2s linear
 }
 @keyframes pulse {
     0% {
         transform: scale(0);
         opacity: 0;
     }
     10% {
         transform: scale(1);
         opacity: 0.5;
     }
     50% {
         transform: scale(1.75);
         opacity: 0;
     }
     100% {
         transform: scale(0);
         opacity: 0;
     }
 }

HTML

仿进度条，使用CSS3新增选择器：before改写样式

css3, wave

编辑器支持Emmet

快捷键

仿进度条，使用CSS3新增选择器 ：before改写样式

css3, wave

分别使用SVG path和CSS3 motion-path实现的粒子漂浮动画

使用H5动画演示CSS3变换原点（transform-origin）工作原理

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

仿进度条，使用CSS3新增选择器：before改写样式