一、實現一個對話框
步驟：
（1）三角形的實現
初始效果顯示：
初始效果的源代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title> perfect*</title> <style> .tr{ width:0; height:0; border: 50px solid; border-color: #f00 #0f0 #ccc #00f; } </style> </head> <body> <div class="tr"></div> </body> </html>
<meta http-equiv="X-UA-Compatible" content="edge" />
Edge 模式通知 Windows Internet Explorer 以最高級別的可用模式顯示內容，這實際上破壞了“鎖定”模式。即如果你有IE9的話說明你有IE789，那么就調用高版本的那個也就是IE9。
X-UA-Compatible是針對IE8新加的一個設置，對於IE8之外的瀏覽器是不識別的，這個區別與content="IE=7"在無論頁面是否包含<!DOCTYPE>指令，都像是使用了 Windows Internet Explorer 7的標准模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。對於多數網站來說，它是首選的兼容性模式。
border-color：<color>{1,4}
默認值：看每個獨立屬性
相關屬性：[ border-top-color ] || [ border-right-color ] || [ border-bottom-color ] || [ border-left-color ]
說明：
設置或檢索對象的邊框顏色。參閱
border-colors屬性。
- 如果提供全部四個參數值，將按上、右、下、左的順序作用於四邊。
- 如果只提供一個，將用於全部的四邊。
- 如果提供兩個，第一個用於上、下，第二個用於左、右。
- 如果提供三個，第一個用於上，第二個用於左、右，第三個用於下。
- 如果border-width等於0或border-style設置為none，本屬性將被忽略。
- 對應的腳本特性為borderColor。
最終實現的效果：
將上述源代碼中的border-color改為：
border-color: transparent transparent #ccc transparent;//上、右、下、左
transparent為默認值，邊框顏色為透明的
現在使用三角形進行來進行制作對話框：
對話框最終效果：
對話框最終的代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title> perfect*</title> <style> /*.tr{ width:0; height:0; border: 50px solid; border-color: transparent transparent #ccc transparent; }*/ .ts{ position: relative; margin-top: 50px; margin-left: 50px; padding-left:20px ; width: 300px; line-height: 2; background:blueviolet; color: #fff; } .ts::before{ content:''; position: absolute; border: 8px solid; border-color: transparent blueviolet transparent transparent; left: -16px; top: 8px; } </style> </head> <body> <div class="ts">這是一個對話框！！</div> </body> </html>
:before 選擇器在被選元素的內容前面插入內容。
二、畫一個平行四邊形
其最終的效果：
利用skew特性，第一個參數為x軸傾斜的角度，第二個參數為y軸傾斜的角度。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>perfect*</title>
<style>
.par{
margin-top:50px ;
margin-left: 50px;
width: 200px;
height: 100px;
background: blueviolet;
transform: skew(-20deg,0);
}
</style>
</head>
<body>
<div class="par"></div>
</body>
</html>
三、用一個div畫一個五角星
最終實現的效果：
實現該效果的源代碼：
<!DOCTYPE html>
<html>
<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>perfect*</title>
<style>
#str{
position: relative;
margin: 200px auto;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent blueviolet transparent;
border-width: 70px 100px;
transform: rotate(35deg);
}
#str::before{
position: absolute;
content:'';
width: 0;
height: 0;
top: -128px;
left: -95px;
border-style:solid;
border-color: transparent transparent blueviolet transparent;
border-width: 80px 30px;
transform: rotate(-35deg);
}
#str::after{
position: absolute;
content: '';
width: 0;
height: 0;
top: -45px;
left: -140px;
border-style:solid ;
border-color: transparent transparent blueviolet transparent;
border-width: 70px 100px;
transform: rotate(-70deg);
}
</style>
</head>
<body>
<div id="str"></div>
</body>
</html>
四、用一個div實現💗
實現該效果的源代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta charset="UTF-8">
<title>perfect*</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實現一個八卦圖
最終實現的效果：
實現該效果的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>perfect*</title>
<style>
body{
background-color: #ccc;
}
.yuang{
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%);/*圖像的線性漸變*/
}
.yuang::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;/*背景被裁剪到內邊距框*/
}
.yuang::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="yuang"></div>
</body>
</html>
linear-gradient是屬於CSS3中Gradient中的兩個屬性一個，這兩個屬性分別為linear-gradient（線性漸變）和radial-gradient（徑性漸變）,其中linear-gradient線性漸變呈現線性變化，大家一看名稱就可以知道這相當於是直線變化，比如充左上角到右下角的變化，或者從上到下，而radial-gradient徑性漸變呈現徑性變化，圓圈漸變效果，從圖像的中間向四周進行變化。
接下來就使用這兩個屬性值，做出下面的效果：
六、超級棒棒糖
實現的最終效果：
實現該效果的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>perfect*</title>
<style>
.line{
width: 300px;
height: 300px;
margin: 20px auto;
border-radius: 50%;
/*重復徑向漸變*/
background-image:repeating-radial-gradient(orange 20px,#ffcc 40px,#ccff 50px);
position: relative;
}
.line::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="line"></div>
</body>
</html>
七、跳動的字節
最終實現的效果圖：
從效果圖中看出是不是有點loading的感覺，實現該效果用animation-delay即可控制五個元素的錯落感
實現該效果的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>perfect*</title>
<style>
.spin{
margin:100px auto;
width:50px;
height: 50px;
text-align: center;
font-size: 10px;
}
.spin>div{
display: inline-block;
background-color: rgb(43,128,226);
height: 100%;
width: 5px;
margin-right: 1px;
animation: bytedance 1s infinite;
}
.spin>div:nth-child(2){
background-color:rgb(49,84,124);
animation-delay:-0.8s;
}
.spin>div:nth-child(3){
background-color:rgb(88,128,173);
animation-delay:-0.8s;
}
.spin>div:nth-child(4){
background-color:rgb(88,128,173);
animation-delay:-0.7s;
}
.spin>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="spin">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
animation-delay 屬性定義動畫何時開始。
animation-delay 值以秒或毫秒計。
提示：允許負值，-2s 使動畫馬上開始，但跳過 2 秒進入動畫。
通過 @keyframes 規則，能夠創建動畫。
創建動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。
在動畫過程中，您能夠多次改變這套 CSS 樣式。
以百分比來規定改變發生的時間，或者通過關鍵詞 "from" 和 "to"，等價於 0% 和 100%。
0% 是動畫的開始時間，100% 動畫的結束時間。
為了獲得最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。
注釋：請使用動畫屬性來控制動畫的外觀，同時將動畫與選擇器綁定。
八、漣漪緩動效果
實現的最終效果：
實現該效果的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>perfect*</title>
<style>
.spin{
width:60px;
height: 60px;
position: relative;
margin: 100px auto;
}
.spin>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;
}
.spin>div:nth-child(2){
animation-delay:-0.7s;
}
@keyframes loading{
0%,100%{
transform: scale(0.0);
}
20%{
transform: scale(1.0);
}
}
</style>
</head>
<body>
<div class="spin">
<div></div>
<div></div>
</div>
</body>
</html>
看到上面有趣的效果是不是喜歡上css了呀！！
博文參考於：https://zhuanlan.zhihu.com/p/75450511