CSS3八卦和爱心

昨天雷雨交加，燥热有所缓解。今晨空气清新，再加上马上三天小长假，心情很不错，祝各位小长假玩的开心。那么，今天就用CSS3做些“不正紧”的事：画八卦和爱心。

CSS3我们一般都是用来进行布局，在工作中很少会刻意去用它画画，毕竟这有点耗时间。

一、八卦


    分析：它就是多个圆叠加的效果。

    1、给body加个背景色，否则看不清八卦的白色部分：

body{background:#efefef;}

    2、画一个圆，渐变是由白到黑的激烈渐变：

.wrap{width: 300px;
 height: 300px;
 background: linear-gradient(to right,#fff 50%,#000 50%);
 border-radius: 50%
}
<div class="wrap"></div>

    效果图如下：


    3、在上下各画一黑一白两个圆，圆的直径刚好是刚才大圆的半径，同时水平居中，然后让它俩里面的内容水平和垂直居中（方便画里面更小的圆）：

.inner{
 width: 150px;
 height:150px;
 border-radius: 50%;
 margin: auto
}
.white{
 background-color: #fff;
}
.black{
 background-color:#000;
}
<div class="wrap">
 <div class="inner white"></div>
 <div class="inner black"></div>
</div>

    效果图如下：


    4、利用刚才的两个圆的 after 伪元素，各画一个更小的圆，背景色和这两个大圆正好相反，这样就画好了，最终代码如下：

<style type="text/css">
body{background:#efefef;}
.wrap{
 width: 300px;
 height: 300px;
 background: linear-gradient(to right,#fff 50%,#000 50%);
 border-radius: 50%;
}
.inner{
 width: 150px;
 height:150px;
 border-radius: 50%;
 margin: auto;
 display: flex;
 justify-content: center;
 align-items: center;
}
.inner:after{
 content:'';
 width: 50px;
 height: 50px;
 border-radius: 50%
}
.white{
 background-color: #fff;
}
.white:after{
 background-color: #000;
}
.black{
 background-color:#000;
}
.black:after{
 background-color:#fff;
}
</style>
<div class="wrap">
 <div class="inner white"></div>
 <div class="inner black"></div>
</div>

    最终八卦的效果图：


二、爱心
    分析：爱心其实就是两个圆+一个旋转45°的正方形。

    1、先定义一个红色旋转45°的外框，同时相对定位，方便圆的各个组成部分定位：

<style type="text/css">
.heart{
 position: relative;
 background: red;
 width: 300px;
 height: 300px;
 transform:rotate(45deg);
}
</style>
<div class="heart"></div>

    2、利用heart的before和after伪元素，在它的左右各加一个直径和它宽度一样的圆，同时调整两个圆和heart的边相切，最终代码：

<style type="text/css">
.heart{
 position: relative;
 background: red;
 width: 300px;
 height: 300px;
 transform:rotate(45deg);
 margin:auto;
 top:100px;
}
.heart:before,.heart:after{
 content: '';
 position: absolute;
 top: 0;
 left: -150px;
 width: 300px;
 height: 300px;
 border-radius: 50%;
 background: red;
}
.heart:after{
 top: -150px;
 left: 0;
}
</style>
<div class="heart"></div>

    最终效果图：


三、CSS画图的好处：
    CSS画图虽然比直接切成图片引用要耗时间，但是也有很多好处，例如减少请求次数、显示速度快，减少网页大小等，并且画出来的图都是矢量的。简单的图，用CSS画还是比较划算的。
    当然，不建议复杂的图用CSS画，耗时耗力，兼容性还差。

四、结束语：
    上面的图都非常简单，如果用上阴影（CSS3的阴影非常强大）、渐变，效果会更好，画面会更加丰满，立体感更强。


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！