欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

如何用CSS實現(xiàn)蠟燭融化效果-創(chuàng)新互聯(lián)

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

10年積累的成都網站設計、網站制作經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站制作后付款的網站建設流程，更有韓城免費網站建設讓你可以放心的選擇與我們合作。

實現(xiàn)效果

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

實現(xiàn)思路

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

代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>水滴效果</title>
  <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
  <div class="hpc">下雨收衫</div>
</body>
</html>
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 轉化為 CSS 再導入即可。

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

當前標題：如何用CSS實現(xiàn)蠟燭融化效果-創(chuàng)新互聯(lián)
分享鏈接：http://chinadenli.net/article18/edogp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網頁設計公司、標簽優(yōu)化、企業(yè)建站、響應式網站、軟件開發(fā)、自適應網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

網站建設網站維護公司