CSS3太阳光效果可以通过使用渐变和动画等特性来实现。以下是一段实现太阳光效果的CSS代码:
.sun { position: relative; width: 200px; height: 200px; background-color: #Ffdb58; border-radius: 50%; overflow: hidden; } .sun::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom,rgba(255,255,0) 0%,0) 10%,0.2) 20%,0.5) 40%,0.8) 60%,0.9) 80%,1) 100%); animation: sun-moon 30s linear infinite; transform-origin: center center; } @keyframes sun-moon { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } }
在上面的代码中,我们创建了一个类名为.sun的div元素,将它的背景颜色设置为黄色,圆角半径为50%。接着,我们给.sun元素的before伪类添加样式,用线性渐变在透明的背景上添加白色光线,通过动画将背景旋转360度,形成太阳旋转的效果。