CSS 生成灯泡效果 - .gui 样式类

.gui { width: 100px; height: 100px; background-color: #333; border-radius: 50%; box-shadow: 0 0 30px #fff; position: relative; }

.gui:before { content: ''; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 60px; height: 60px; background-color: #fff; border-radius: 50%; box-shadow: inset 0 0 20px #ddd; }

.gui:after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; background-color: #fff; border-radius: 50%; box-shadow: 0 0 20px #fff, 0 0 40px #fff, 0 0 60px #fff, 0 0 80px #fff; animation: blink 2s infinite; }

@keyframes blink { 50% { box-shadow: 0 0 20px #fff, 0 0 40px #fff, 0 0 60px #fff, 0 0 80px #fff, inset 0 0 20px #ddd; } }