如何灵活的运用before和after-原创手记-慕课网

经常我们在开发的时候，我们会经常遇到这样的小icon的切图，当然通常我们的做法都是直接找ui去要切图。最近在开发自己的项目的时候，才突然发现到其实很多简单的视图都可以用原生css语言来完成。这里我就简单的给大家介绍几个当作敲门砖用吧。

抛砖引玉

一、聊天气泡三角形的实现

1、

新建一个div

   <div class="__arrow"></div>

2、

给气泡设置初始属性

      .__arrow{
        display:inline-block;
        padding:10px;
        background:blue;
        color:#FFF;
        border-radius:8px;
        min-width: 50px;
        line-height: 24px;
        height: 24px;
        position:relative;
      }

3、

用伪类before设置收到的消息

.__arrow:before{
        display:block;
        content:'';
        border-width:8px 8px 8px 8px;
        border-style:solid;
        border-color: transparent #ff4d4d transparent transparent;
        position:absolute;
        left:-16px;
        top:20%;
      }

3、

用伪类after设置我的消息

.__arrow:after{
        display:block;
        content:'';
        border-width:8px 8px 8px 8px;
        border-style:solid;
        border-color: transparent transparent transparent #ff4d4d;
        position:absolute;
        left:100%;
        top:20%;
      }

二、加号

加号的效果
上图就是我想要的加号效果。

step1、

新建一个div

<div class="__plus"></div>

step2、

写div写一个基础样式咯,首先先写一个边框

.__plus{
        width: 100px;
        height: 100px;
        color: black;
        transition: color .25s;
        position: relative;
        border: 1px solid
 }

step3、

然后利用伪类before来写一个横：

.__plus::before{ 
        content: ''; 
        position: absolute; 
        left: 50%; 
        top: 50%; 
        width: 100px; 
        margin-left: -50px; 
        margin-top: -5px; 
        border-top: 10px solid;
      }

step3、

同样，最后用伪类after来写一个竖：

.__plus::after {
        content: ''; 
        position: absolute; 
        left: 50%;
        top: 50%; 
        height: 100px;
        margin-left: -5px;
        margin-top: -50px; 
        border-left: 10px solid; 
      }

这样一个简单的视图就完成了，这主要是通过那啥伪类来完成的这里有这么一种情况啊：就是是不是意味着每次我新建一个不同大小的视图就要重新写一遍呢？
回答当然不是的。（我是最讨厌写重复代码的人），我这里就用stylus做了一个简单的封装，具体的代码如下：

/**
  $size：视图的长度
  $plusWidth：加号的宽度
  $color：加号的颜色
 */
plus_icon($size, $plusWidth = 2px, $color = #fff)
  width: $size;
  height: $size;
  color: $color;
  transition: color .25s;
  position: relative;
  &::after
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    height: $size;
    margin-left: -($plusWidth/ 2);
    margin-top: -(0.5 *$size);
    border-left: $plusWidth solid;
  &::before
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: $size;
    margin-left: -(0.5 *$size);
    margin-top: -($plusWidth/ 2);
    border-top: $plusWidth solid;

最后在使用的时候，直接简单的：

.add
  plus_icon(12px, 4px)

就能看到效果了

三、齿轮

关于齿轮呢？我会用到box-shadow,不清楚的小伙伴可以去看看。然后进入绘画流程

第一步、画出同心圆

.__gear {
        width: 200px;
        height: 200px;
        box-shadow: 0 0 0 50px black inset, 0px 0px 0px 50px white inset;
        margin: 200px auto;
        position: relative;
        border-radius: 50%;
      }

第二步、利用伪类before画出部分齿轮

.__gear::before {
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        position: absolute;
        border-radius: 5px;
        box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
        -webkit-box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
        -moz-box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
      }

第三步、利用伪类after画出剩余部分齿轮

代码如下：

.__gear::after   {
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        position: absolute;
        border-radius: 5px;
        box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
        -webkit-box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
        -moz-box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
        transform-origin: 100px 100px;
        webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
      }

同理，我也做了一个比较通用的方法，也是用stylus写的,代码如下：

gear_icon_common($size, $cicle_size, $tri_size)
  $_size01 = (($size/ 2) - ($tri_size/ 2))
  $_size02 = (-0.8 *$tri_size)
  $_size03 = ($size - ($tri_size/ 5))

  content: "";
  display: block;
  width: $tri_size;
  height: $tri_size;
  position: absolute;
  border-radius: $tri_size / 5;
  box-shadow: $_size01 $_size02 0 black, $_size01 $_size03 0 black, $_size02 $_size01 0 black, $_size03 $_size01 0 black;
  -webkit-box-shadow: $_size01 $_size02 0 black, $_size01 $_size03 0 black, $_size02 $_size01 0 black, $_size03 $_size01 0 black;
  -moz-box-shadow: $_size01 $_size02 0 black, $_size01 $_size03 0 black, $_size02 $_size01 0 black, $_size03 $_size01 0 black;

/**
  $size:整个视图的宽度
  $cicle_size: 环的宽度
  $tri_size: 齿轮的宽度
  $Hcolor:环/齿轮的颜色
  $Icolor:内圆的颜色
*/
gear_icon($size, $cicle_size, $tri_size, $Hcolor = #000, $Icolor = #fff)
  width: $size;
  height: $size;
  box-shadow: 0 0 0 $cicle_size $Hcolor inset, 0px 0px 0px $cicle_size $Icolor inset;
  margin: $size auto;
  position: relative;
  border-radius: 50%;
  &::after
    gear_icon_common($size, $cicle_size, $tri_size)
  &::before
    gear_icon_common($size, $cicle_size, $tri_size)
    transform-origin: ($size/ 2) ($size/ 2)
    webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)

在使用的时候就直接使用：

 .__artical_content_setting
  gear_icon(14px, 4px, 3px)

写在最后

最近我发现我发表的很多文章呢有很多私聊我、评论，首先我很开心能被大家看到，其次我简单说明一下：
平台上面很多的技术类文章呢？我都是当作读书笔记来做的，很多用词用句不是很严谨，基本都是用到了，觉得不错就写下来了。

其次就是最近买了一个服务器，想自己独立搭建一个集后台、前端、android端、小程序等多端通用的一个个人写作平台。后续也会在平台中分享我在开发中所使用到的技术。

最后最后提到一句，欢迎大家点赞，关注我的个人博客，我会源源不断的输出高质量文章的。