今天早上在群里看到有同学问如何用 CSS3 实现以下效果?
一开始我觉得 CSS3 搞不出来这种效果的吧,主要是白色透明那个地方,后来灵机一动想到了渐变至透明色(不考虑兼容性的情况)应该是可以做出来的。如果你对 CSS3 比较熟悉的话,那么你应该对渐变效果 linear-gradient
也不陌生,不了解的同学可以去查阅文档。
首先我们对这个结构进行一下拆分,看下图所示:
有的同学一看到这张图就已经知道该怎么做了,对,就是用 border-radius + 遮罩。先用 border-radius 做一个圆出来,再加上线性渐变色,中间部分用伪类也做一个圆,定位过去盖上,于是就有了外面的空心圆,即下图所示:
代码如下:
.box1 {
width: 100px;
height: 100px;
position: relative;
border-radius: 50%;
background-image: linear-gradient(
60deg,
#f79533,
#f37055,
#ef4e7b,
#a166ab,
#5073b8,
#1098ad,
#07b39b,
#6fba82);
background-image: linear-gradient(
60deg,
#f79533,
#f37055,
#ef4e7b,
#a166ab,
#5073b8,
#1098ad,
#07b39b,
#6fba82);
}
.box1:after {
width: 90px;
height: 90px;
position: absolute;
top: 5px;
left: 5px;
background-color: #fff;
content: ' ';
border-radius: 50%;
}
.box1:before {
width: 50px;
height: 50px;
position: absolute;
top: 50px;
left: 50px;
content: ' ';
background-image: -webkit-linear-gradient(right top, white 60%, transparent);
background-image:linear-gradient(right top, white 60%, transparent);
}
接下来就是最重要的一步了,用线性渐变画出遮罩层,直接上代码吧:
.box1:before {
width: 50px;
height: 50px;
position: absolute;
top: 50px;
left: 50px;
content: ' ';
background-image: -webkit-linear-gradient(right top, white 60%, transparent);
background-image:linear-gradient(right top, white 60%, transparent);
}
这样一来我们就实现了上面的效果,完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1 {
width: 100px;
height: 100px;
position: relative;
border-radius: 50%;
background-image: linear-gradient(
60deg,
#f79533,
#f37055,
#ef4e7b,
#a166ab,
#5073b8,
#1098ad,
#07b39b,
#6fba82);
background-image: linear-gradient(
60deg,
#f79533,
#f37055,
#ef4e7b,
#a166ab,
#5073b8,
#1098ad,
#07b39b,
#6fba82);
}
.box1:after {
width: 90px;
height: 90px;
position: absolute;
top: 5px;
left: 5px;
background-color: #fff;
content: ' ';
border-radius: 50%;
}
.box1:before {
width: 50px;
height: 50px;
position: absolute;
top: 50px;
left: 50px;
content: ' ';
background-image: -webkit-linear-gradient(right top, white 60%, transparent);
background-image:linear-gradient(right top, white 60%, transparent);
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
最终效果图:
原文地址:点我
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí),寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦