CSS3燈光照射源碼是一種在網頁制作中常用的技巧,它可以讓網頁呈現出3D效果,給人非常強烈的視覺沖擊。下面,我們來看一下CSS3燈光照射的源碼:
/*恩格爾部分*/ .engel { position: relative; width: 300px; height: 300px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 100px 100px, #a7d8f0, #4682b4); box-shadow: inset 0 0 3px rgba(0, 0, 0, .5); } /*燈光部分*/ .light { position: absolute; top: 10px; left: 60px; width: 180px; height: 180px; border-radius: 50%; box-shadow: 0 0 20px 200px rgba(255, 255, 255, .8); }
我們先來看engel部分,它是一個半徑為50%的圓形,并且設置了背景為徑向漸變色,用到了CSS3的radial-gradient屬性。這個圓形加上了一個陰影效果,用到了CSS3的box-shadow屬性。
接下來是light部分,它是一個半徑為50%的圓形,但是它不是用background顏色設置的,而是用box-shadow屬性制作出的燈光效果,這個屬性需要設置四個參數,分別為“水平方向陰影位置”,“垂直方向陰影位置”,“模糊距離”,“陰影擴展半徑”。最后一個參數就是控制燈光大小的,你可以隨意調整。
在實際使用中,我們可以將class屬性加在相應的元素上,即可呈現出想要的效果。比如,我們可以在一個div標簽上加上class="engel light",這樣就可以在頁面上體現出CSS3燈光照射的效果了。