使用css伪元素的一些遐想

今天看公众号的推送，偶然发现一个面试题：用css3伪元素画一个有凹槽的按钮，于是有了这篇文章~

按钮大概长下面这样：

• 以下html统一使用<span class='main'>XXX<span>

实现的CSS如下：

    .main {
        position: relative;
        background: rgb(140, 98, 56);
        color: #fff;
        height: 50px;
        padding: 10px 25px 10px 10px;
        font-size: 30px;
        box-sizing: border-box;
    }
    .main:after{
        position: absolute;
        content: '';
        background: #fff;
        width: 30px;
        height: 30px;
        border-radius: 100%;
        right: -15px;
        top: 10px;
    }

集思广益，实现对话框：

    .main {
        position: relative;
        display: inline-block;
        background: rgb(140, 98, 56);
        color: #fff;
        height: 70px;
        padding: 10px 25px 10px 10px;
        font-size: 15px;
        border-radius: 5px;
        box-sizing: border-box;
     }
      .main:after{
        position: absolute;
        content: '';
        background: #fff;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 15px solid transparent;
        border-top: 15px solid rgb(140, 98, 56); 
        border-bottom-left-radius: 15px; 
        border-bottom-right-radius: 15px;       
        left: 30px;
        bottom: -15px;
      }

画个可爱的桃心

原理： 画一个正方形，然后利用伪元素在正方形的左边和上边各放一个直径为正方形边长的圆形，留半边圆在正方形外部，然后再整体顺时针旋转45度就OK啦~

    .main{
        position: relative;
        display: inline-block;
        margin: 200px;
        width: 20px;  
        height: 20px;  
        transform: rotate(45deg);  
        background-color: #FF7F00;
      }

      .main:after, .main:before {
        position: absolute;  
        width: 20px;  
        height: 20px;  
        content: '';  
        border-radius: 100%;  
        background-color: #FF7F00;
      }
      .main:before{
        bottom: 0px;  
        left: -10px; 
      }
      .main:after{
        top: -10px;  
        right: 0px;  
      }

既然心都有啦，那让它跳动起来吧

原理： 基础代码和上面一样，然后加上css3的animation，利用box-shadow打造出那种跳动的感觉，因为我在里面加了颜色渐变的效果，所以还要把背景颜色放在动画中跟着一起变，如果不要渐变，就不用加上background啦~

    @keyframes shine {
        0% {
          box-shadow: 0 0 0 0px #FF7F00;
          background: #FF7F00;
        }
        50% {
          box-shadow: 0 0 0 3px #FF6B00;
          background: #FF6B00;
        }
        100% {
          box-shadow: 0 0 0 0px #FF7F00;
          background: #FF7F00;
        }
      }
      .main, .main:before, .main:after {
        background-color: #FF7F00;
        animation: shine 1.5s ease-in-out infinite;
      }
      .main{
        position: relative;
        display: inline-block;
        margin: 200px;
        width: 20px;  
        height: 20px;  
        transform: rotate(45deg);  
        border-radius: 3px; /* 如果不加radius下面正方形会在心变大的时候漏出来一点点？why。。我思考了一下应该是因为正方形的阴影和圆的阴影叠加在了一起导致的~ */
        border-bottom-right-radius: 0;
      }
      .main:after, .main:before {
        position: absolute;  
        width: 20px;  
        height: 20px;  
        content: '';  
        border-radius: 100%;  
      }
      .main:before{
        bottom: 0px;  
        left: -10px;  
      }
      .main:after{
        top: -10px;  
        right: 0px;  
      }

再来一个水波纹吧

    @keyframes wave{
        0% {width: 5px;height: 5px;border-color: rgba(0,69,107,.8);}
        100% {width: 50px;height: 50px;border-color: rgba(0,69,107,0);}
      }

      .main, .main:after, .main:before {
        width: 5px;
        height: 5px;
        border: 1px solid rgba(0,69,107,0);
        border-radius: 100%;
        animation: wave 2s linear infinite;
      }
      .main {
        position: relative;
        display: block;
        animation-delay: .7s;
      }
     .main:before, .main:after{
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid rgba(0,69,107,0);
      }
      .main:before{
        animation-delay: 1.4s;
      }
      .main:after{
        animation-delay: 2.1s;
      }

思考：其实这些都可以再多写两个标签来实现，那伪元素到底有什么存在的意义呢，也许这里有一些靠谱的答案~

总结： 平时写代码最常用到伪元素的时刻，大概是给标题前面加icon、换li标签前面的标识符，其实仔细琢磨琢磨伪元素还是可以做不少图形上面的事~