CSS3光線效果是一種非常華麗的效果,可以讓你的網站看起來充滿了現代感和動力。如果你想要在你的網站上添加這種效果,下面我們就來介紹一下如何使用CSS3光線效果。
.light { border-radius: 50%; box-shadow: 0 0 200px 80px #fff, 0 0 80px 40px #fff, 0 0 30px 20px #fff; height: 350px; margin: 100px auto; position: relative; width: 350px; } .light:before { background: linear-gradient(transparent, rgba(255, 255, 255, 0.65)); border-radius: 50%; content: ''; height: 10%; left: 45%; position: absolute; top: -5%; transform: skew(0deg, -10deg); width: 10%; } .light:after { background: linear-gradient(rgba(255, 255, 255, 0.65), transparent); border-radius: 50%; content: ''; height: 10%; left: 45%; position: absolute; top: 95%; transform: skew(0deg, 10deg); width: 10%; }
這里我們首先定義了一個類名為“light”的元素,然后通過設置“border-radius”、“box-shadow”、“height”、“margin”、“position”和“width”屬性來配置該元素的樣式。接著我們又通過在該元素前后添加元素來創建了發光的效果,這兩個元素通過設置“background”、“border-radius”、“content”、“height”、“left”、“position”、“top”、“transform”和“width”屬性來實現。最終的效果如下圖所示:
如果你想要為你的網站添加一些炫酷的效果,那么CSS3光線效果絕對是一個不錯的選擇。你可以通過以上的代碼來實現該效果,希望能夠對你有所幫助。