趣味CSS3效果挑戰小彙總

時間 2019-11-07

原文原文鏈接

衆所周知，在CSS3中產生了諸多優秀的特性，如今就來分享一下我這段時間對於這些特性的效果實踐，但願對你們有所啓發。css

挑戰1: 畫一個對話框

要畫一個對話框，首先來學習作一個三角形。其實很是的簡單。html

<!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>
複製代碼

出現以下效果：前端

估計你已經知道border的構成原理，而後只需改一行代碼：

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

因而就只剩下面的三角形部分啦！瀏覽器

如今來利用三角形技術作對話框：

<!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>
複製代碼

效果以下：前端工程師

挑戰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>
複製代碼

你們能夠本身動手試試。效果以下：學習

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

對於這個五角星而言，咱們能夠拆分紅三個部分，想想是否是這樣？

那咱們如今就來實現這三個部分。對於最上面的三角，咱們在第一個部分已經實現了三角形，這個不難。可是下面的兩個如何實現呢？

其實也很是的簡單，想想，下面這兩個是否是就是一個向上的三角形旋轉而來呢？明白了這一點，就能夠動手實現啦！ui

<!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的威力！spa

挑戰4: 畫一個愛心💗

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

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

如今就來構造這個部分：

<!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>
複製代碼

效果以下：

一樣一個div完成了這個效果，是否是很是酷炫呢：)

挑戰5: 畫一個八卦陣

仍是來分解它的結構：

按照以前的思路，估計你也有想法了，這個時候依然能夠用僞類來畫出兩個小的圓，那麼問題來了，像這種顏色不一樣的同心圓如何用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>
複製代碼

效果以下：

挑戰6: 超級棒棒糖

這裏直接擺出效果吧：

其中利用了兩個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：跳動的字節

先亮出效果:

至關因而一個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: 漣漪緩動效果

這裏顯然能夠分解成兩個圓，仍然是利用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之美。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。