CSS - 绘制圆形、环形的背景效果详解(附:绘制圆形图片)
作者:hangge | 2021-12-15 08:10
有时我们需要在页面绘制一些圆形元素,这个通过 CSS 就可以轻易实现。其原理是只需要将元素的每个边的 border-radius 甚至成 50%,就能得到任意大小的圆,下面通过样例进行演示。
1,效果图
下面分别是纯色圆形、渐变色圆形、圆环、圆形图片的效果:
2,样例代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> #circle1 { border-radius: 50%; width: 160px; height: 160px; display: inline-block; background: #2380be; } #circle2 { border-radius: 50%; width: 160px; height: 160px; display: inline-block; background: radial-gradient(circle at 60% 40%, white, #2380be); background: -ms-radial-gradient(circle at 60% 40%, white, #2380be); background: -webkit-radial-gradient(circle at 60% 40%, white, #2380be); background: -moz-radial-gradient(circle at 60% 40%, white, #2380be); } #circle3 { border-radius: 50%; width: 140px; height: 140px; display: inline-block; border: 10px solid #2380be; } #circle4 { border-radius: 50%; width: 160px; height: 160px; display: inline-block; overflow: hidden; } </style> </head> <body> <!-- 纯色圆形 --> <div id="circle1"></div> <!-- 放射状圆形 --> <div id="circle2"></div> <!-- 圆环 --> <div id="circle3"></div> <!-- 圆形图片 --> <div id="circle4"> <img src="bg.jpg" style="height:100%;height:100%" /> </div> </body> </html>
附:旋转的圆形图片
(1)在实现圆形图片的基础上,我们可以对其再增加一个 animation 动画样式,可以让图片旋转起来。
(2)样例代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> #circle4 { border-radius: 50%; width: 160px; height: 160px; display: inline-block; overflow: hidden; -webkit-animation: spin 3s linear infinite; -moz-animation: spin 3s infinite linear; -o-animation: spin 3s infinite linear; animation: spin 3s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <!-- 圆形图片 --> <div id="circle4"> <img src="bg.jpg" style="height:100%;height:100%" /> </div> </body> </html>
全部评论(0)