欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css3光線效果

老白2年前11瀏覽0評論

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光線效果

如果你想要為你的網站添加一些炫酷的效果,那么CSS3光線效果絕對是一個不錯的選擇。你可以通過以上的代碼來實現該效果,希望能夠對你有所幫助。