CSS3 光圈发散动画

css, 圆形分布的div

css, pulse

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    height: 100%;
}
body {
    background: #1a1a1d;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.block {
    width: 500px;
    height: 500px;
}
.sq_18 {
    position: absolute;
    display: inline-block;
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
}
.sq_17 {
    position: absolute;
    display: inline-block;
    -webkit-transform: rotate(340deg);
    -ms-transform: rotate(340deg);
    transform: rotate(340deg);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
}
.sq_16 {
    position: absolute;
    display: inline-block;
    -webkit-transform: rotate(320deg);
    -ms-transform: rotate(320deg);
    transform: rotate(320deg);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
}
.sq_15 {
    position: absolute;
    display: inline-block;
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    transform: rotate(300deg);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
}
.sq_14 {
    position: absolute;
    display: inline-block;
    -webkit-transform: rotate(280deg);
    -ms-transform: rotate(280deg);
    transform: rotate(280deg);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
}
.sq_13 {
    position: absolute;
    display: inline-block;
    -webkit-transform: rotate(260deg);
    -ms-transform: rotate(260deg);
    transform: rotate(260deg);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
}
.sq_12 {
    position: absolute;
    display: inline-block;
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
}
.sq_11 {
    position: absolute;
    display: inline-block;
    -webkit-transform: rotate(220deg);
    -ms-transform: rotate(220deg);
    transform: rotate(220deg);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
}
.sq_10 {
    position: absolute;
    display: inline-block;
    -webkit-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    transform: rotate(200deg);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
}
.sq_9 {
    position: absolute;
    display: inline-block;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
}
.sq_8 {
    position: absolute;
    display: inline-block;
    -webkit-transform: rotate(160deg);
    -ms-transform: rotate(160deg);
    transform: rotate(160deg);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
}
.sq_7 {
    position: absolute;
    display: inline-block;
    -webkit-transform: rotate(140deg);
    -ms-transform: rotate(140deg);
    transform: rotate(140deg);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
}
.sq_6 {
    position: absolute;
    display: inline-block;
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
}
.sq_5 {
    position: absolute;
    display: inline-block;
    -webkit-transform: rotate(100deg);
    -ms-transform: rotate(100deg);
    transform: rotate(100deg);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
}
.sq_4 {
    position: absolute;
    display: inline-block;
    -webkit-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
}
.sq_3 {
    position: absolute;
    display: inline-block;
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
}
.sq_2 {
    position: absolute;
    display: inline-block;
    -webkit-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    transform: rotate(40deg);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
}
.sq_1 {
    position: absolute;
    display: inline-block;
    -webkit-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
}
.round_3 .sq:before {
    width: 15px;
    height: 15px;
}
.sq:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: #ba8747;
}
.round_1 {
    width: 200px;
    height: 200px;
    padding-top: 100px;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 50%;
    right: 0;
    margin-top: -100px;
    margin-left: -100px;
    -webkit-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
    -webkit-animation: fade_1 1.7s ease-in 0s infinite;
    animation: fade_1 1.7s ease-in 0s infinite;
}
.round_2 {
    width: 260px;
    height: 260px;
    padding-top: 130px;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 50%;
    right: 0;
    margin-top: -130px;
    margin-left: -130px;
    -webkit-animation: fade_2 1.7s ease-in 0s infinite;
    animation: fade_2 1.7s ease-in 0s infinite;
}
.round_3 {
    width: 300px;
    height: 300px;
    padding-top: 150px;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 50%;
    right: 0;
    margin-top: -150px;
    margin-left: -150px;
    -webkit-transform: rotate(8.5deg);
    -ms-transform: rotate(8.5deg);
    transform: rotate(8.5deg);
    -webkit-animation: fade_3 1.7s ease-in 0s infinite;
    animation: fade_3 1.7s ease-in 0s infinite;
}
.round_1 .sq {
    width: 100px;
    height: 20px;
}
.round_2 .sq {
    width: 130px;
    height: 20px;
}
.round_3 .sq {
    width: 150px;
    height: 20px;
}
@-webkit-keyframes fade_1 {
    0% {
        opacity: 0;
    }
    14% {
        opacity: 1;
    }
    28% {
        opacity: 1;
    }
    42% {
        opacity: 1;
    }
    56% {
        opacity: 0;
    }
    70% {
        opacity: 0;
    }
    84% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes fade_2 {
    0% {
        opacity: 0;
    }
    14% {
        opacity: 0;
    }
    28% {
        opacity: 1;
    }
    42% {
        opacity: 1;
    }
    56% {
        opacity: 1;
    }
    70% {
        opacity: 0;
    }
    84% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes fade_3 {
    0% {
        opacity: 0;
    }
    14% {
        opacity: 0;
    }
    28% {
        opacity: 0;
    }
    42% {
        opacity: 1;
    }
    56% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    84% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

HTML

css, 圆形分布的div

css, pulse

编辑器支持Emmet

快捷键

css, 圆形分布的div

css, pulse

CSS3 外发光圆圈错觉式旋转动画

CSS3 外发光影子动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：