纯css布局模拟日全食光晕效果
代码语言:html
所属分类:布局界面
代码描述:纯css布局模拟日全食光晕效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> 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%; -we.........完整代码请登录后点击上方下载按钮下载查看
网友评论0