第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

CSS3實(shí)現(xiàn)原型進(jìn)度條效果

標(biāo)簽:
CSS3

今天早上在群里看到有同学问如何用 CSS3 实现以下效果?

http://wx3.sinaimg.cn/square/a5bab661ly1fi7qa45yhyj206a066mx5.jpg

一开始我觉得 CSS3 搞不出来这种效果的吧,主要是白色透明那个地方,后来灵机一动想到了渐变至透明色(不考虑兼容性的情况)应该是可以做出来的。如果你对 CSS3 比较熟悉的话,那么你应该对渐变效果 linear-gradient 也不陌生,不了解的同学可以去查阅文档

首先我们对这个结构进行一下拆分,看下图所示:

http://wx4.sinaimg.cn/square/a5bab661ly1fi7qcqtglaj20bu0b2aa6.jpg

有的同学一看到这张图就已经知道该怎么做了,对,就是用 border-radius + 遮罩。先用 border-radius 做一个圆出来,再加上线性渐变色,中间部分用伪类也做一个圆,定位过去盖上,于是就有了外面的空心圆,即下图所示:

http://wx4.sinaimg.cn/square/a5bab661ly1fi7qj2gg76j206i06ojrh.jpg

代码如下:

.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>

最终效果图:

http://wx2.sinaimg.cn/square/a5bab661ly1fi7qtlp5eij206s06mt8r.jpg

原文地址:点我

點(diǎn)擊查看更多內(nèi)容
TA 點(diǎn)贊

若覺得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評(píng)論
  • 收藏
  • 共同學(xué)習(xí),寫下你的評(píng)論
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消