整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天我們一起來看幾個有趣的css動畫效果，用到的CSS3的知識點
線條圍繞著容器轉動
運行效果
首先，我們看下運行出來的效果圖
實現方式
這個效果并不是直接使用animation來實現的，而是通過clip屬性來實現的。外邊的藍色運動的線條實際為一個完整的div，只是通過clip屬性裁剪后只剩下上下左右之中的一邊
clip屬性依據上-右-下-左的順序，以左上角(0, 0)為標準點進行裁剪，如果傳入的參數為auto，則表示不裁剪
實例代碼
html部分的代碼
css部分的代碼
CSS部分代碼
CSS實現餅圖
在我們畫餅圖的時候會想到使用Canvas或者SVG，使用CSS我們同樣可以模擬出餅圖的形狀
運行效果
實現方式
首先要使用border-radius屬性將div設置為圓角
使用animation-delay屬性控制動畫效果
實例代碼
html部分代碼
css部分代碼
總結
今天這兩個有趣的CSS動畫效果，你學會了嗎？
篇點題，嘿嘿嘿!
首先來聊聊今日主角：今天在公司，偶然間和同事談天說地，聊古說今簡直就是無shi不歡吧。所以今天咱不玩個人英雄主義，咱來聊一聊規模宏大的HTML通shi，別想太多了是“史真香的史”！
（集翔物鎮樓）
前幾期我承認都比較黃，所以今天為了改變下大家的胃口，咱來聊聊史。（很帶逼格吧）
就在今天和同事聊史的時候偶然間突發奇想，其實每個HTML標簽何嘗不是一段史記，他們記載著這段HTML代碼的興衰。
所以這期我們先來簡單介紹一下HTML標簽的基礎皇室體系：
角色： 國王本體： 標簽本身（例如：<a>,<div>,<span>）
自我介紹：每個朝代雖然都有國王但是每個國王卻代表著不同朝代，國王象征著至高權利。
角色： 王后本體： id
自我介紹：每個國王標配一位王后，王后是王朝的另一個代表，雖然可被替換，但是僅此一款。利用自己的小政權（js,css等）輔助國王治理國家。
角色： 王妃本體： class
自我介紹：哪個國王不好色，后宮三千爭芳斗艷，一個國王可以有一群的王妃，但總有幾位是比較出眾的，她們同樣可以使用自己的小政權（js,css等）來吸引國王并輔助治理國家，但是權力相對應沒有王后大。
角色： 王子本體： style
自我介紹：國王最親近的人，未來王朝的接班人，俗話說虎毒不食子，style王子是集萬千寵愛于一身，他的小政權（css）是最受國王關注的，但是品質優秀的style王子可以為王朝更添風采，而頑劣不堪的則會拖垮整個王朝。雖然說style是王子，但是如果遇到太強勢的王后，可能他就被這么雪藏了（比如武則天？慈禧？）又或者說他的國王老爹比較Low撐不到這狗腿子耍威風就垮臺了。
角色： 剛正不阿的史官本體： title
自我介紹：為什么在史官前面加了個剛正不阿呢？為人太過正直以致于寫出來的史不夠浮夸不夠拉風，這裝逼不到位皇帝老兒肯定不高興（司馬遷：你在說我么~），和css,js這種前衛，會造勢的文武官比起來自然就較為不被重視。但他們所寫的內容往往是后世人對于這個王朝的標注。
他們的故事是這樣發展的
<div id="惠文后" class="羋月" style="display:block" title="" > </div>
Long, long ago有個王朝叫秦國，他們的國王叫秦惠文王（div）,話說這國王各種牛逼，秦國一哥，北掃義渠，西平巴蜀，東出函谷，南下商於，為秦統一中國打下堅實基礎。業績這么好后宮也是風生水起，王后惠文后（id）給他生了個胖小子取名叫贏蕩（style，很淫蕩哦~）日子很幸福，時不時還跟小秘羋月（class）談談情說說愛，這生活簡直沒誰了。贏蕩王子天生神力，殷勇善戰深得惠文王喜愛，惠文王病逝時將大業傳位于其，然而贏蕩卻因一時好斗與人比舉鼎結果脫力被砸死英年早逝。
可能有人會疑惑，一整個王朝耶~，怎么可能就這么點阿貓阿狗的，其他人呢？這個嘛每個王朝都有自己的特色，也有屬于自己那個時代的superStar，小編我又不是在寫紀傳體史書，怎么可能寫那么細，再說了就我這半吊子歷史水平能把牛逼吹到這已經算不錯了。。。。
文章節選自：優聚YOUJ知識手冊《HTML后宮秘史》
優聚YOUJ知識共享平臺是專為-2到2歲的職場人士打造的學習社區，提供系統化的崗位知識手冊，并幫助建立自己的工作知識庫。
章出處：趣味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>
出現如下效果：
估計你已經知道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畫五角星
對于這個五角星而言，我們可以拆分成三個部分，想一想是不是這樣？
那我們現在就來實現這三個部分。 對于最上面的三角，我們在第一個部分已經實現了三角形，這個不難。但是下面的兩個如何實現呢？
其實也非常的簡單，想一想，下面這兩個是不是就是一個向上的三角形旋轉而來呢？明白了這一點，就可以動手實現啦！
<!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的威力！
挑戰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完成了這個效果，是不是非?？犰拍兀?
關注我的頭條號，分享更多的技術學習文章，我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。
挑戰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，但實際上更多的時候是因為我們了解不夠，功夫不到家，才會覺得這個東西不友好，感到不喜歡，當你開始擺脫門外漢的姿態，真正踏進那個廣袤的世界，能夠對它的各種特點信手拈來，又會情不自禁地愛上這個東西。因此，有時候我們缺少的不是能力，而是一種包容的心態。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
