如何用CSS實現(xiàn)蠟燭融化效果

這篇文章主要介紹“如何用CSS 實現(xiàn)蠟燭融化效果”，在日常操作中，相信很多人在如何用CSS 實現(xiàn)蠟燭融化效果問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何用CSS 實現(xiàn)蠟燭融化效果”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

創(chuàng)新互聯(lián)建站是一家集成都網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站頁面設(shè)計、網(wǎng)站優(yōu)化SEO優(yōu)化為一體的專業(yè)網(wǎng)站建設(shè)公司，已為成都等多地近百家企業(yè)提供網(wǎng)站建設(shè)服務(wù)。追求良好的瀏覽體驗,以探求精品塑造與理念升華,設(shè)計最適合用戶的網(wǎng)站頁面。合作只是第一步，服務(wù)才是根本,我們始終堅持講誠信，負責任的原則，為您進行細心、貼心、認真的服務(wù),與眾多客戶在蓬勃發(fā)展的市場環(huán)境中,互促共生。

實現(xiàn)效果

如何用CSS 實現(xiàn)蠟燭融化效果

實現(xiàn)思路

融化效果是利用 filfilter 的 contrast 和 blur 實現(xiàn)的。
在父元素中設(shè)置 contrast 并在子元素中設(shè)置 blur 即可實現(xiàn)兩者相融的效果。

代碼




  
  水滴效果
  


  下雨收衫

html,body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  filter: contrast(20);
}


.both{
  left: 0;
  content: "";
  width: 10px;
  height: 20px;
  bottom: -20px;
  border-radius: 50%;
  position: absolute;
  background-color: #fff;
}
.hpc{
  top: 80px;
  left: 100px;
  color: #fff;
  width: 400px;
  height: 107px;
  font-size: 6rem;
  filter: blur(3px);
  font-style: italic;
  position: relative;
  transform: skewY(5deg);
  font-family: "Comic Sans MS";
  border-bottom: 10px solid #fff;

  &::before{
    @extend .both;
    animation: move 6s ease-in-out infinite;
  }

  &::after{
    @extend .both;
    animation: move 6s 1s ease-in-out infinite;
  }

  @keyframes move{
    70%{
      bottom: -20px;
      transform: translate(380px, 5px);
    }
    80%{
      transform: translate(380px, 3px);
      opacity: 1;
    }
    100%{
      transform: translate(380px, 180px);
      opacity: 0;
    }
  }
}

將 SCSS 轉(zhuǎn)化為 CSS 再導入即可。

到此，關(guān)于“如何用CSS 實現(xiàn)蠟燭融化效果”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
網(wǎng)頁名稱：如何用CSS實現(xiàn)蠟燭融化效果
當前URL：http://weahome.cn/article/jssgeg.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

如何用CSS實現(xiàn)蠟燭融化效果

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管