CSS3一个很棒的日食光晕特效

solar eclipse，使用CSS3渐变（linear-gradient）、滤镜（filter）和box-shadow实现的光影动画特效。很逼真的光线芒刺模拟。

css3, solar

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #000;
}
.sun {
    background: #fff;
    border-radius: 50%;
    box-shadow: inset 0 0 90px rgba(251, 172, 19, 0.4), 0 0 50px 10px rgba(251, 172, 19, 0.5), 0 0 120px 20px rgba(255, 255, 255, 0.6), 0 0 20px 10px rgba(255, 255, 255, 0.9);
    height: 200px;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 200px;
    z-index: 0;
}
.moon {
    background: #111;
    border-radius: 50%;
    box-shadow: inset -5px 0 20px rgba(251, 172, 19, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.7);
    height: 195px;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(calc(-50% - 10px), -50%);
    transform: translate(calc(-50% - 10px), -50%);
    width: 195px;
    z-index: 2;
}
.corona {
    background: #fff;
    border-radius: 50%;
    box-shadow: inset 0 0 30px rgba(251, 172, 19, 0.1), 0 0 40px 20px white, 0 0 60px 30px rgba(251, 172, 19, 0.5);
    height: 80px;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(calc(-50% + 90px), -50%);
    transform: translate(calc(-50% + 90px), -50%);
    width: 40px;
    z-index: 3;
}
.corona:before,
.corona:after {
    background: -webkit-linear-gradient(left, transparent 0%, white 50%, transparent 100%);
    background: linear-gradient(to right, transparent 0%, white 50%, transparent 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000', GradientType=1);
    content: "";
    position: absolute;
}
.corona:before {
    height: 3px;
    left: -110px;
    opacity: .3;
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
    top: 45px;
    width: 300px;
}
.corona:after {
    height: 3px;
    left: -225px;
    opacity: .2;
    -webkit-transform: rotate(-80deg);
    transform: rotate(-80deg);
    top: 40px;
    width: 500px;
}

HTML

solar eclipse，使用CSS3渐变（linear-gradient）、滤镜（filter）和box-shadow实现的光影动画特效。很逼真的光线芒刺模拟。

css3, solar

编辑器支持Emmet

快捷键

solar eclipse，使用CSS3渐变（linear-gradient）、滤镜（filter）和box-shadow实现的光影动画特效。很逼真的光线芒刺模拟。

css3, solar

使用纯CSS实现一个很棒的3D折纸特效

HTML5/CSS3很棒的日出光线弥漫动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：