用css画个苦无
2018-10-19 本文已影响0人
两年半练习程序员
效果图
苦无
首先将布局进行拆分
拆分图
3.png
由四部分组成
苦无头(上)
苦无头(下)
苦无握把
苦无指环
苦无头(上):一个尖头朝上的三角形
苦无下(上):一个尖头朝下的三角形
苦无握把:多个圆角矩形
苦无指环:一个带有渐变色的圆环
<body>
<div class="box">
<!-- 头(上) -->
<div class="top"></div>
<!-- 头(下) -->
<div class="center"></div>
<!-- 握把 -->
<div class="bottom">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- 指环 -->
<div class="round"></div>
</div>
</body>
三角形怎么画?
将元素宽度设置为0,用border撑起宽高,我们来看下效果`
3 (2).png
如上图所示,我们想得到一个三角形只需要将:三边border的颜色设置为transparent
.top {
width: 0;
margin: 0 auto;
border-top: 0px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 200px solid transparent;
}
三角形没问题了我们就可以完成苦无头
苦无指环是一个环形渐变
<div class="round">
<div class="centerRound"></div>
</div>
round为圆型容器,centerRound为圆环空白区,放置在round中间就形成了一个圆环,再给round加一个渐变的伪类after
苦无指环就完成了
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Cc">
<title>苦无</title>
</head>
<style>
* {margin: 0;padding: 0;}
html,body {display: flex;width: 100%;height: 100%;background: #f7f7f7;align-items: center;}
.box {position: relative;width: 200px;margin: 0 auto;transition: all .6s;}
.box:hover{transform: rotate(360deg);}
.top {
width: 0;
margin: 0 auto;
border-top: 0px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 200px solid #6b6b6b;
}
.top_shadow{
position: absolute;
left: 50%;
margin-left: -1px;
top: 15px;
width: 2px;
height: 150px;
background: #fff;
border-radius:50%;
box-shadow: 0 0 10px #fff;
}
.center {
position: relative;
width: 0px;
margin: 0 auto;
border-top: 60px solid #6b6b6b;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 0px solid transparent;
}
.center1{
position: absolute;
top: -80px;
left: 0px;
width: 50px;
height: 2px;
background: #fff;
border-radius:50%;
box-shadow: 0 0 10px #fff;
transform: rotate(35deg);
}
.center2{
position: absolute;
top: -80px;
right: 0px;
width: 50px;
height: 2px;
background: #fff;
border-radius:50%;
box-shadow: 0 0 10px #fff;
transform: rotate(-35deg);
}
.bottom {
z-index: 2;
top: -15px;
position: relative;
width: 50px;
margin: 0 auto;
}
.bottom div{
width: 30px;
height: 8px;
margin: 0 auto;
border-radius: 5px;
background: red;
border-bottom: 0.5px solid #fff;
}
.round{
position: relative;
margin: 0 auto;
top: -20px;
width: 50px;
height: 50px;
border-radius: 50%;
}
.centerRound{
position: absolute;
width: 30px;
height: 30px;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -15px;
background: #fff;
border-radius: 50%;
z-index: 1;
}
.round:after{
position: absolute;
width: 50px;
height: 50px;
background: linear-gradient(to right,red, blue);
content: '';
border-radius: 50%;
background: linear-gradient(to bottom right, #000 , #eee);
}
</style>
<body>
<div class="box">
<div class="top">
<div class="top_shadow"></div>
</div>
<div class="center">
<div class="center1"></div>
<div class="center2"></div>
</div>
<div class="bottom">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="round">
<div class="centerRound"></div>
</div>
</div>
</body>
</html>
