趣味CSS3效果挑戰小彙總

神三元發表於2019-07-24
CSSS3

眾所周知，在CSS3中產生了諸多優秀的特性，現在就來分享一下我這段時間對於這些特性的效果實踐，希望對大家有所啟發。

挑戰1: 畫一個對話方塊

要畫一個對話方塊，首先來學習做一個三角形。其實非常的簡單。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .triangle{
      width: 0;
      height: 0;
      border: 50px solid;
      border-color: #f00 #0f0 #ccc #00f;
    }
  </style>
</head>
<body>
  <div class="triangle"></div>
</body>
</html>
複製程式碼

出現如下效果：

趣味CSS3效果挑戰小彙總
估計你已經知道border的構成原理，然後只需改一行程式碼：

// 四個引數對應 ：上 右 下 左
border-color: transparent transparent #ccc transparent;
複製程式碼

於是就只剩下面的三角形部分啦！

趣味CSS3效果挑戰小彙總
現在來利用三角形技術做對話方塊：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .dialog {
      position: relative;
      margin-top: 50px;
      margin-left: 50px;
      padding-left: 20px;
      width: 300px;
      line-height: 2;
      background: lightblue;
      color: #fff;
    }
    .dialog::before {
      content: '';
      position: absolute;
      border: 8px solid;
      border-color: transparent lightblue transparent transparent;
      left: -16px;
      top: 8px;
    }
  </style>
</head>
<body>
  <div class="dialog">這是一個對話方塊鴨！</div>
</body>
</html>
複製程式碼

效果如下：

趣味CSS3效果挑戰小彙總

挑戰2: 畫一個平行四邊形

利用skew特性，第一個引數為x軸傾斜的角度，第二個引數為y軸傾斜的角度。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .parallel {
      margin-top: 50px;
      margin-left: 50px;
      width: 200px;
      height: 100px;
      background: lightblue;
      transform: skew(-20deg, 0);
    }
  </style>
</head>
<body>
  <div class="parallel"></div>
</body>
</html>
複製程式碼

大家可以自己動手試試。 效果如下：

趣味CSS3效果挑戰小彙總

挑戰3: 用一個div畫五角星

趣味CSS3效果挑戰小彙總
對於這個五角星而言，我們可以拆分成三個部分，想一想是不是這樣？

趣味CSS3效果挑戰小彙總
那我們現在就來實現這三個部分。 對於最上面的三角，我們在第一個部分已經實現了三角形，這個不難。但是下面的兩個如何實現呢？

其實也非常的簡單，想一想，下面這兩個是不是就是一個向上的三角形旋轉而來呢？明白了這一點，就可以動手實現啦！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #star {
      position: relative;
      margin: 200px auto;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent transparent red transparent;
      border-width: 70px 100px;
      transform: rotate(35deg);
    }
    #star::before {
      position: absolute;
      content: '';
      width: 0;
      height: 0;
      top: -128px;
      left: -95px;
      border-style: solid;
      border-color: transparent transparent red transparent;
      border-width: 80px 30px;
      transform: rotate(-35deg);
    }
    #star::after {
      position: absolute;
      content: '';
      width: 0;
      height: 0;
      top: -45px;
      left: -140px;
      border-style: solid;
      border-color: transparent transparent red transparent;
      border-width: 70px 100px;
      transform: rotate(-70deg);
    }
  </style>
</head>
<body>
  <div id="star"></div>
</body>
</html>
複製程式碼

效果如下：

趣味CSS3效果挑戰小彙總

你沒看錯，這就是CSS3的威力！

挑戰4: 畫一個愛心?

看起來好像不容易下手，我們先來分解一下這個心形的結構：

趣味CSS3效果挑戰小彙總

是兩個形狀相同的部分，對其中一種稍微旋轉一下：

趣味CSS3效果挑戰小彙總
現在就來構造這個部分：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .heart {
      width: 100px;
      height: 90px;
      position: relative;
      margin: 100px auto;
    }
    .heart::before {
      content: '';
      position: absolute;
      width: 50px;
      height: 90px;
      background: red;
      border-radius: 50px 45px 0  0;
      /* 設定旋轉中心 */
      transform-origin: 0 100%;
      transform: rotate(-45deg);
    }
    .heart::after {
      content: '';
      position: absolute;
      width: 50px;
      height: 90px;
      top: -35px;
      left: -35px;
      background: red;
      border-radius: 50px 45px 0  0;
      /* 設定旋轉中心 */
      transform-origin: 0 100%;
      transform: rotate(45deg);
    }
  </style>
</head>
<body>
  <div class="heart"></div>
</body>
</html>
複製程式碼

效果如下：

趣味CSS3效果挑戰小彙總
同樣一個div完成了這個效果，是不是非常酷炫呢：)

挑戰5: 畫一個八卦陣

趣味CSS3效果挑戰小彙總
還是來分解它的結構：

趣味CSS3效果挑戰小彙總

按照之前的思路，估計你也有想法了，這個時候依然可以用偽類來畫出兩個小的圓，那麼問題來了，像這種顏色不同的同心圓如何用CSS表達呢？

其實很簡單，根據border-radius可以影響padding的形狀這一規則，外面的一圈用border來表達，而中間利用白色的背景顏色將padding填滿，寬度和高度都可以設為0。

另一個問題是:大圓的效果如何實現？ 有兩種實現思路，一種是用border-left來表示左邊的半圓，右邊的半圓利用本身的寬度。 第二種方案其實是從《CSS揭祕》獲得的靈感，可以利用linear-gradient顏色漸變的屬性來調整。

接下來編碼實現：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body{
      background-color: #ccc;
    }
    /* 大圓部分第一種思路 (注意下面的小圓定位要調整下)*/
    /* .bagua{
      position: relative;
      width: 150px;
      height: 300px;
      margin: 100px auto;
      border-radius: 50%;
      background-color: #fff;
      border-left: 150px solid #000;
    } */
    /* 大圓部分第二種思路 */
    .bagua{
      position: relative;
      width: 300px;
      height: 300px;
      margin: 100px auto;
      border-radius: 50%;
      background-color: #000;
      /*從0-50%用背景色，50%開始到100%用#fff */
      background-image: linear-gradient(to right, transparent 50%, #fff 50%);
    }
    .bagua::before{
      content: '';
      position: absolute;
      left: 75px;
      width: 0;
      height: 0;
      padding: 25px;
      border-radius: 50%;
      border: 50px solid #000;
      background: #fff;
      background-clip: padding-box;
    }
    .bagua::after{
      content: '';
      position: absolute;
      top: 150px;
      left: 75px;
      width: 0;
      height: 0;
      padding: 25px;
      border-radius: 50%;
      border: 50px solid #fff;
      background: #000;
      background-clip: padding-box;
    }
  </style>
</head>
<body>
  <div class="bagua"></div>
</body>
</html>
複製程式碼

效果如下：

趣味CSS3效果挑戰小彙總

挑戰6: 超級棒棒糖

這裡直接擺出效果吧：

趣味CSS3效果挑戰小彙總

其中利用了兩個CSS3中非常重要的屬性————線性漸變和徑向漸變。 其中圓形部分利用radial-gradient屬性，也就是徑向漸變，棒子的顏色利用linear-gradient，之前已經用過，也就是線性漸變。

程式碼參考如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .linear{
      width: 300px;
      height: 300px;
      margin: 20px auto;
      border-radius: 50%;
      /* 重複性徑向漸變 */
      background-image: repeating-radial-gradient(red 0px, green 30px, orange 40px);
      position: relative;
    }
    .linear::after{
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      width: 10px;
      height: 500px;
      border-radius: 0 0 10px 10px;
      /* 線性漸變 */
      background-image: linear-gradient(to top, red 20%, orange 40%, lightblue 60%, green 80%);
    }
  </style>
</head>
<body>
  <div class="linear"></div>
</body>
</html>
複製程式碼

挑戰7：跳動的位元組

先亮出效果:

趣味CSS3效果挑戰小彙總

相當於是一個loading的效果。其實實現起來是非常簡單的，這裡直接用animation-delay即可控制五個元素的錯落感。直接貼上程式碼，大家可以參考一下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .spinner{
        margin: 100px auto;
        width: 50px;
        height: 50px;
        text-align: center;
        font-size: 10px;
    }
    
    .spinner > div{
      display: inline-block;
      background-color: rgb(43, 128, 226);
      height: 100%;
      width: 5px;
      margin-right:1px;
      animation: bytedance 1s infinite;
    }
    
    .spinner >div:nth-child(2) {
      background-color: rgb(49, 84, 124);
      animation-delay: -0.9s;
    }
    .spinner >div:nth-child(3) {
      background-color: rgb(88, 128, 173);
      animation-delay: -0.8s;
    }
    .spinner >div:nth-child(4) {
      background-color: rgb(88, 128, 173);
      animation-delay: -0.7s;
    }
    .spinner >div:nth-child(5) {
      background-color: rgb(142, 187, 240);
      animation-delay: -0.6s;
    } 
    
    @keyframes bytedance{
      0%, 40%, 100%{
        transform: scaleY(0.4);
      }
      20%{
        transform: scaleY(1);
      }
    }
  </style>
</head>
<body>
  <div class="spinner">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>
</html>
複製程式碼

挑戰8: 漣漪緩動效果

趣味CSS3效果挑戰小彙總
這裡顯然可以分解成兩個圓，仍然是利用animation-delay來實現錯落感。 當一個圓縮小為0的時候，另一圓剛好擴充套件為最大，依次規律迴圈。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Loading</title>
  <style>
      .spinner{
      width: 60px;
      height: 60px;
      position: relative;
      margin: 100px auto;
    }
    
    .spinner > div{
      width: 100%;
      height: 100%;
      opacity: 0.6;
      border-radius: 50%;
      background-color: lightblue;
      position: absolute;
      top: 0;
      left: 0;
      animation: loading 1.4s infinite ease-in;
    }
    
    .spinner > div:nth-child(2){
      animation-delay: -0.7s;
    }
    
    @keyframes loading{
      0%, 100% {
        transform: scale(0.0);
      }
      50% {
        transform: scale(1.0);
      }
      
    }
  </style>
</head>
<body>
  <div class="spinner">
    <div></div>
    <div></div>
  </div>
</body>
</html>

複製程式碼

通過這些有趣的挑戰，相信你已經體會到CSS3世界的奇妙了，但是但是，有部分屬性並不是所有的瀏覽器都支援，保守起見，最好在CSS3新特性名之前加上瀏覽器的字首，本文側重效果的實現，相容這塊暫不做處理。

作為前端工程師，平時通常拿CSS做頁面佈局，甚至有時候會出現很多莫名其妙的bug，於是很多人不太願意來寫CSS，但實際上更多的時候是因為我們瞭解不夠，功夫不到家，才會覺得這個東西不友好，感到不喜歡，當你開始擺脫門外漢的姿態，真正踏進那個廣袤的世界，能夠對它的各種特點信手拈來，又會情不自禁地愛上這個東西。因此，有時候我們缺少的不是能力，而是一種包容的心態。

這篇文章只是起一個拋磚引玉的作用，希望對你有啟發，當然，CSS3的世界遠比我們想象中要豐富的多，我之後也會做更多的分享，讓大家領略CSS之美。

相關文章