CSS3是一種比之前版本更加強大的樣式表語言。在CSS3中,有許多有趣且好玩的特性,其中圓形波浪就是其中之一。
圓形波浪可以為網站添加一個很炫酷的效果,它可以使頁面看起來更加的有活力。在CSS3中,實現圓形波浪的代碼非常簡單,你只需要使用RADIAL-GRADIENT屬性即可。它可以根據你的需要生成一個圓形或橢圓形的漸變效果。
.wave{ width: 200px; height: 200px; background-image: radial-gradient(circle at 50% 50%, #4fb0c6, #fff 70%); border-radius: 50%; }
在這段代碼中,我們首先定義了一個類名為“wave”,它的寬高都為200px,并且使用了“RADIAL-GRADIENT”屬性來生成漸變效果。其中,“circle at 50% 50%”表示畫一個圓形,在50%的位置上,并在圓形中心點上,漸變顏色由#4fb0c6逐漸變為#fff,這個漸變的百分比長度為70%。最后,我們為這個元素添加了一個50%的border-radius,就可以讓它變為一個圓形的波浪了。
當然,頁面上可以有更多的圓形波浪,你可以多次使用上述代碼,只需要改變circle at的位置和顏色漸變即可。另外,你還可以給圓形波浪添加其它效果,如透明度、顏色疊加等,使你的網站更加的有趣。
上一篇java對象和類的創建
下一篇css3 在ie