一、如何用css畫一個三角形
搜索學(xué)習(xí)資源：Google >>css tricks shape
>> 畫一個如下圖這樣的三角形
三角形
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>triangle</title>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
css
1.先設(shè)置div元素，為它上下邊界設(shè)置不同顏色，方便改動
5.簡化代碼
二、如何用css畫一個太極(帶animation動效)
靜態(tài)效果圖
- 用到偽元素，省略了兩個div標(biāo)簽
- 用到css animation
思路:
1.先畫1個大圓，設(shè)置相對定位
2.再畫2個半徑大小為大圓一半的小圓，設(shè)置絕對定位
3.通過設(shè)置小圓的padding做出太極的圓點(diǎn)（注意結(jié)合padding調(diào)整小圓寬高）
4.將兩個小圓移動移動合適的位置上色形成太極
5.加入animation動畫讓太極旋轉(zhuǎn)
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="yinyang">
</div>
<br><br>
<p>道生一，一生二，二生三，三生萬物 ——《道德經(jīng)》</p>
</body>
</html>
css
body{
background: #444;
color:white;
}
p{
text-align: center;
}
.yinyang{
width:200px;
height:200px;
border-radius:50%;
background: linear-gradient(to bottom, #1e5799 0%,#ffffff 0%,#ffffff 50%,#000000 50%,#000000 100%);
position:relative;
margin:50px auto;/* 通過margin左右auto可實(shí)現(xiàn)居中 */
animation-duration:3s;
animation-name:spin;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
.yinyang::before{
content:'';
width:20px;
height:20px;
border:40px solid black;
border-radius:50%;
position:absolute;
top:50px;
background-color:white;
}
.yinyang::after{
content:'';
width:20px;
height:20px;
border:40px solid white;
border-radius:50%;
position:absolute;
top:50px;
left:100px;
background-color:black;
}
@keyframes spin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}/* 加旋轉(zhuǎn)動畫 */
其他圖形畫法可參考css tricks shape
end
