css3實戰彙總（附源碼）

時間 2019-11-05

標籤 css3 css 實戰彙總源碼欄目 CSS 简体版

原文原文鏈接

本文是繼上一篇文章用css3實現驚豔面試官的背景即背景動畫（高級附源碼）的續篇也是本人最後一篇介紹css3技巧的文章，由於css這塊知識難點不是不少，更多的在於去熟悉css3的新特性和基礎理論知識。因此寫這篇文章的目的一方面是對本身工做中一些css高級技巧的總結，另外一方面也是但願能教你們一些實用的技巧和高效開發css的方式，以提升在工做中的效率。javascript

咱們將學到

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

正文

1.box-shadow的高級應用

利用css3的新特性能夠幫助咱們實現各類意想不到的特效，接下來的幾個案例咱們來使用css3的box-shdow來實現，立刻開始吧！css

實現水波動畫

知識點：box-shadowhtml

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

css3實現核心代碼vue

<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，是否是感受還行？java

實現加載動畫

知識點：box-shadow多陰影node

加載動畫你們想必也不陌生，雖然能夠用不少方式實現加載動畫，好比用僞元素，用gif，用js，可是更優雅的實現我以爲仍是直接上css：react

核心代碼以下：ios

<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方案，歡迎你們和我交流。css3

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

知識點： 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。

最後

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

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

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

歡迎你們相互學習交流，一塊兒探索前端的邊界。