css3實戰匯總（附源碼）

  • 2019 年 10 月 7 日
  • 筆記

本文是繼上一篇文章用css3實現驚艷面試官的背景即背景動畫（高級附源碼）的續篇也是本人最後一篇介紹css3技巧的文章，因為css這塊知識難點不是很多，更多的在於去熟悉css3的新特性和基礎理論知識。 所以寫這篇文章的目的一方面是對自己工作中一些css高級技巧的總結，另一方面也是希望能教大家一些實用的技巧和高效開發css的方式，以提高在工作中的效率。

我們將學到

  • box-shadow的高級應用
  • 製作自適應的橢圓
  • 純css3實現餅圖進度動畫
  • 用border來實現一個對話框樣式
  • css3 filter的簡單應用
  • css3偽元素實現自定義複選框
  • 在線製作css3動畫的利器

正文

1.box-shadow的高級應用

利用css3的新特性可以幫助我們實現各種意想不到的特效，接下來的幾個案例我們來使用css3的box-shdow來實現，馬上開始吧！

實現水波動畫

知識點：box-shadow

想想我們如果不用css3，是怎麼實現水波擴散的動畫呢？想必一定是寫一大堆的js才能實現如下的效果：

css3實現核心程式碼

<style>  .wave {    margin-left: auto;    margin-right: auto;    width: 100px;    height: 100px;    border-radius: 100px;    border: 2px solid #fff;    text-align: center;    line-height: 100px;    color: #fff;    background: #06c url(http://p3g4ahmhh.bkt.clouddn.com/me.jpg) no-repeat center center;    background-size: 100%;    animation: wave 4s linear infinite;  }  @keyframes wave {      0% {          box-shadow: 0 0 0 0 rgba(245, 226, 226, 1), 0 0 0 0 rgba(250, 189, 189, 1);      }      50% {          box-shadow: 0 0 0 20px rgba(245, 226, 226, .5), 0 0 0 0 rgba(250, 189, 189, 1);      }      100% {          box-shadow: 0 0 0 40px rgba(245, 226, 226, 0), 0 0 0 20px rgba(245, 226, 226, 0);      }  }  </style>  <div class="wave"></div>

這裡我們主要使用了box-shadow的多級陰影來實現的，動畫部分我們使用的@keyframes，是不是感覺還行？

實現載入動畫

知識點：box-shadow多陰影

載入動畫大家想必也不陌生，雖然可以用很多方式實現載入動畫，比如用偽元素，用gif，用js，但是更優雅的實現我覺得還是直接上css：

核心程式碼如下：

<style>  .loading {    margin-left: auto;    margin-right: auto;    width: 30px;    height: 30px;    border-radius: 30px;    background-color: transparent;    animation: load 3s linear infinite;  }  @keyframes load {      0% {          box-shadow: -40px 0 0 rgba(250, 189, 189, 0),                      inset 0 0 0 15px rgba(250, 189, 189, 0),                      40px 0 0 rgba(250, 189, 189, 0);      }      30% {          box-shadow: -40px 0 0 rgba(250, 189, 189, 1),                      inset 0 0 0 15px rgba(250, 189, 189, 0),                      40px 0 0 rgba(250, 189, 189, 0);      }      60% {          box-shadow: -40px 0 0 rgba(250, 189, 189, 0),                      inset 0 0 0 15px rgba(250, 189, 189, 1),                      40px 0 0 rgba(250, 189, 189, 0);      }      100% {          box-shadow: -40px 0 0 rgba(250, 189, 189, 0),                      inset 0 0 0 15px rgba(250, 189, 189, 0),                      40px 0 0 rgba(250, 189, 189, 1);      }  }  </style>  <div class="loading"></div>

我們這裡也是採用box-shadow多背景來實現，也是我當時思考的一個方向，至於其他的css方案，歡迎大家和我交流。

實現對話框及對話框的不規則投影

知識點：filter和偽元素

這裡涉及到css濾鏡的知識，不過也很簡單，大家在css3官網上看看就理解了，我們直接看效果：

我們會通過filter的drop-shadow來實現不規則圖形的陰影，然後利用偽元素和border來實現頭部三角形：

<style>  .odd-shadow{      margin-left: auto;      margin-right: auto;      width: 200px;      height: 80px;      border-radius: 8px;      color: #fff;      font-size: 24px;      text-align: center;      line-height: 80px;      background: #06c;      filter: drop-shadow(2px 2px 2px rgba(0,0,0,.8))  }  .odd-shadow::before{      content: '';      position: absolute;      display: block;      margin-left: -20px;      transform: translateY(20px);      width:0;      height: 0;      border: 10px solid transparent;      border-right-color: #06c;  }  </style>    <div class="odd-shadow">哎呦，豬先森</div>複製程式碼

模糊效果

知識點：filter

這個比較簡單，這裡我直接上圖和程式碼：

filter: blur(20px)

2.製作自適應的橢圓

border-radius的出現讓我們實現圓角效果提供了極大的便利，我們還可以通過對Border-radius特性的進一步研究來實現各種圖形效果，接下來就讓我們看看它的威力吧！

知識點:border-radius: a / b; //a,b分別為圓角的水平、垂直半徑,單位若為%,則表示相對於寬度和高度進行解析

核心程式碼：

<style>  .br-1{    width: 200px;    height: 100px;    border-radius: 50% /10%;    background: linear-gradient(45deg,#06f,#f6c,#06c);  }  .br-2{    width: 100px;    border-radius: 20% 50%;  }  .ani{    animation: skew 4s infinite;  }  .ani1{    animation: skew1 4s infinite 2s;  }  .ani2{    animation: skew2 4s infinite 3s;  }  @keyframes skew{    to{      border-radius: 50%;    }  }  @keyframes skew1{    to{      border-radius: 20px 20px 100%;    }  }  @keyframes skew2{    to{      transform: rotate(360deg);    }  }  </style>  <div class="br-1 black-theme"></div>  <div class="br-1 black-theme ani"></div>  <div class="br-1 black-theme ani1"></div>  <div class="br-1 br-2 black-theme ani2"></div>

這裡我們主要使用了背景漸變來實現華而不實的背景，用border-radius實現各種規格的橢圓圖案。

3.純css3實現餅圖進度動畫

知識點：border-radius: a b c d / e f g h; animation多動畫屬性;

效果如下：

核心程式碼：

<style>  .br-31{    width: 100px;    height: 100px;    border-radius: 50%;    background: linear-gradient(to right,#f6c 50%,#333 0);  }  .br-31::before{    content: '';    display: block;    margin-left: 50%;    height: 100%;    border-radius: 0 100% 100% 0 / 50%;    background-color: #f6c;    transform-origin: left;    animation: skin 4s linear infinite,               bg 8s step-end infinite;  }  @keyframes skin{    to{      transform: rotate(.5turn);    }  }  @keyframes bg{    50%{      background: #333;    }  }  .br-32::before{    animation-play-state: paused;    animation-delay: inherit;  }  </style>  <div class="br-31 black-theme"></div>  <div class="br-31 br-32 black-theme" style="animation-delay:-1s"></div>複製程式碼

這塊的實現我們主要用了漸變背景，也是實現扇形進度的關鍵，包括程式碼中的如何遮擋半圓，如何對半圓做動畫，如何改變旋轉原點的位置等，這些雖然技巧性很強，但是我們稍微畫一畫，也可以實現的。

4.css3偽元素實現自定義複選框

我們都知道原生的複選框控制項樣式極難自定義，這對於工程師實現設計稿的難度加大了一大截。css3的出現，增加了:checked選擇器，因此我們可以利用:checked和label來實現各式各樣的表單選擇控制項，接下來讓我們來看看如何實現吧！

我們來看看如何實現上述自定義的複選框：

<style>  .check-wrap{      text-align: center;  }  .checkbox{      position: absolute;      clip: rect(0,0,0,0);  }  .checkbox[type="checkbox"]:focus + label::before{      box-shadow: 0 0 .6em #06c;  }  .checkbox[type="checkbox"] + label::before{      content: 'a0'; /* 不換行空格 */      display: inline-block;      margin-right: .3em;      width: 2em;      height: 2em;      border-radius: .3em;      vertical-align: middle;      line-height: 2em; /* 關鍵 */      font-size: 20px;      text-align: center;      color: #fff;      background: gray;  }  .checkbox[type="checkbox"]:checked + label::before{      content: '2713'; /* 對勾 */      background: black;  }    label{      margin-right: 40px;      font-size: 20px;  }  </style>  <div class="check-wrap">      <input type="checkbox" class="checkbox" id="check-1" />      <label for="check-1">生男孩</label>      <input type="checkbox" class="checkbox" id="check-2" />      <label for="check-2">生女孩</label>  </div>

這裡為了隱藏原生的checkbox控制項，我們用了clip: rect(0,0,0,0)進行截取，然後使用checkbox的偽類:checked來實現交互。

接下來擴展一下，我們來實現自定義開關：

這裡原理是一樣的，只不過樣式做了改動，直接上程式碼：

<style>  .check-wrap{      margin-bottom: 20px;      text-align: center;  }  .switch{      position: absolute;      clip: rect(0,0,0,0);  }    .switch[type="checkbox"] + label{      width: 6em;      height: 3em;      padding: .3em;      border-radius: .3em;      border: 1px solid rgba(0,0,0,.2);      vertical-align: middle;      line-height: 2em; /* 關鍵 */      font-size: 20px;      text-align: center;      color: #fff;      box-shadow: 0 1px white inset;      background-color: #ccc;      background-image: linear-gradient(#ddd,#bbb);  }  .switch[type="checkbox"]:checked + label{      box-shadow: 0.05em .1em .2em rgba(0,0,0,.6) inset;      border-color: rgba(0,0,0,.3);      background: #bbb;  }    label{      margin-right: 40px;      font-size: 14px;  }    .switch-an{      position: absolute;      clip: rect(0,0,0,0);  }    .switch-an[type="checkbox"] + label{      position: relative;      display: inline-block;      width: 5em;      height: 2em;      border-radius: 1em;      color: #fff;      background: #06c;      text-align: left;  }    .switch-an[type="checkbox"] + label::before{      content: '';      width:2em;      height: 2em;      position: absolute;      left: 0;      border-radius: 100%;      vertical-align: middle;      background-color: #fff;      transition: left .3s;  }  .switch-an[type="checkbox"] + label::after{      content: 'OFF';      margin-left: 2.6em;  }  .switch-an[type="checkbox"]:checked + label::before{      transition: left .3s;      left: 3em;  }  .switch-an[type="checkbox"]:checked + label::after{     content: 'NO';     margin-left: .6em;  }  </style>  <div class="check-wrap">      <input type="checkbox" class="switch" id="switch-1" />      <label for="switch-1">生男孩</label>      <input type="checkbox" class="switch" id="switch-2" />      <label for="switch-2">生女孩</label>  </div>    <div class="check-wrap">      <input type="checkbox" class="switch-an" id="switch-an-1" />      <label for="switch-an-1"></label>  </div>

是不是感覺css3提供了更強大的動畫和自定義功能呢？其實我們可以實現更酷炫更實用的效果，等待你去嘗試。

5.在線製作css3動畫的利器

最後推薦一個在線製作各種貝塞爾曲線的工具，也是本人在做動畫時經常使用的：

cubic-bezier。

地址：https://cubic-bezier.com/#.17,.67,.83,.67

最後

筆者2天後將推出開源的CMS系統，技術架構：

  • 後台Node+Koa+redis+JsonSchema
  • 管理後台介面 vue-cli3 + vue + ts + vuex + antd-vue + axios
  • 客戶端前台 react + antd + react-hooks + axios

後面將推出該系統的設計思想，架構和實現過程，歡迎在公眾號《趣談前端》里查看更詳細的介紹。

另外我們組建了 趣談前端社群

歡迎大家和來自不同公司前端開發者，一起交流討論前端開發場景，前端日常工作中遇到的問題及解決辦法，以及前端職業發展的探討。

歡迎大家相互學習交流，一起探索前端的邊界。

Tags:

VirMach 便宜 VPS