• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > CSS3+HTML5 >  CSS3八卦和爱心正文

CSS3八卦和爱心

作者:网页模板
类型:图文教程
点击次数:
发布时间:2019-06-06 13:54
分享到:
昨天雷雨交加,燥热有所缓解。今晨空气清新,再加上马上三天小长假,心情很不错,祝各位小长假玩的开心。那么,今天就用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的阴影非常强大)、渐变,效果会更好,画面会更加丰满,立体感更强。
(责任编辑:网页模板)
  • 本文标签:
  • CSS3八卦
前端干货:CSS3 var变量详解
canvas getContext()方法