CSS3繪制太陽
.sun { width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle at center, #FFA200, #FF7F00, #FF5D00); box-shadow: 0px 0px 15px #FF7F00; } .sun:before { content: ""; position: absolute; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at center, #FFF, #F5F5F5); top: 20px; left: 20px; } .sun:after { content: ""; position: absolute; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at center, #FFDC35, #FFCD02); top: 35px; left: 35px; }
這是一個簡單的CSS代碼片段,可以用來繪制太陽。代碼使用了CSS3中的radial-gradient來實現漸變色,以及border-radius屬性來實現圓角。
在代碼中,我們使用了偽元素:before和:after來添加太陽上的光芒效果。通過調整它們的position、width和height屬性來實現。
最終結果是一個絢麗的太陽,它的中心是橙色的,周圍由黃、白漸變形成的光環,還有幾個金色的閃光點。
這個CSS代碼段簡單易懂,可以幫助你輕松繪制出一個陽光明媚的夏天。
上一篇ajax 處理重定向請求
下一篇php 5.1.6 漏洞