CSS 圆圈扩散 - 踏得网

CSS, 圆圈扩散

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.success-coins-div {
            width: (520px/2);
            height: (520px/2);
            margin-bottom: 1px;

/* 产生动画（向外扩散变大）的圆圈 第一个圆 */
            .pulse {
                position: absolute;
                width: (520px/2);
                height: (520px/2);
                left: -6px;
                top: -6px;
                border: 7px solid #000;
                border-radius: 50%;
                z-index: 1;
                opacity: 0;
                animation: warn1 2s linear 1s infinite;
                /* box-shadow: 1px 1px 30px #F56C6C; 阴影效果 */
            }

/* 产生动画（向外扩散变大）的圆圈 第二个圆 */
            .pulse1 {
                position: absolute;
                width: (520px/2);
                height: (520px/2);
                left: -6px;
                top: -6px;
                border: 7px solid #000;
                border-radius: 50%;
                z-index: 1;
                opacity: 0;
                animation: warn1 2s linear 1.5s infinite;
                /* box-shadow: 1px 1px 30px #F56C6C; 阴影效果 */
            }
        }

@keyframes warn1 {
            0% {
                transform: scale(0.2);
                opacity: 0.0;
            }

25% {
                transform: scale(0.2);
                opacity: 0.1;
            }

50% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.3;
            }

75% {
                transform: scale(0.5);
                -webkit-transform: scale(0.5);
                opacity: 0.5;
            }

100% {
                transform: scale(0.9);
                -webkit-transform: scale(0.8);
                opacity: 0.0;
            }
        }

HTML

CSS, 圆圈扩散

编辑器支持Emmet

快捷键

CSS, 圆圈扩散

CSS3 多个不同颜色位置重叠的圆圈错位旋转加载动效

CSS3 Grid离散宽度调整动画和Flexbox平滑扩展动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：