vue1秒刷新一下div怎么写_用纯css3写一个大大的滑稽

前言

　　其实这篇文章我很早就写好了，还在知乎的回答上引用过，这次单独发到知乎文章。

正文

　　某天突发奇想，真的是一时来灵感，觉得可以用css写一个斜眼笑的表情，也就是已经被用烂了的滑稽，所以自己就试着写了一下，觉得效果还不错。怎么实现的呢？我是这样写的。
首先给这个滑稽写个圆：
html：

<div class="comical"></div> 

css：

.comical{width:200px; height:200px; background:#fd8; border:5px solid #ea5; border-radius:50%;}

为了让它更有立体感，给它加上阴影box-shadow：

 .comical{width:200px; height:200px; background:#fd8; border:5px solid #ea5; border-radius:50%; box-shadow:3px 8px 20px 2px rgba(0,0,0,0.3),0 0 20px 10px rgba(238,170,85,0.7) inset, -10px -20px 20px 20px rgba(244,151,58,0.3) inset;}

这样一个圆圆的金蛋就出来了。

然后加上嘴巴，这种弧形的图形可以通过border来实现，先在div.comical内添加元素：

<div class="comical">
  <div class="mouth"></div>
</div>

因为要用到定位，所以在其父元素div.comical的样式中要加上“position:relative”。

css：

.comical{width:200px; height:200px; background:#fd8; border:5px solid #ea5; border-radius:50%; box-shadow:3px 8px 20px 2px rgba(0,0,0,0.3),0 0 20px 10px rgba(238,170,85,0.7) inset, -10px -20px 20px 20px rgba(244,151,58,0.3) inset; position:relative;}
.mouth{width:160px; height:140px; border-bottom:6px solid #533; border-left:0px solid transparent; border-right:0px solid transparent; border-radius:50%/50%; position:absolute; bottom:25px; left:20px;}

这样就得到了弧形的嘴巴。

接下来写眼睛，从图形上来看，这个需要做些复杂的处理。办法就是，可以定义一个使溢出部分隐藏起来的框：

html：

<div class="e2"></div>

css：

.e2{position:absolute; top:0; left:0; width:70px; height:70px; overflow:hidden;}

然后利用它的伪元素，在其中画一个圆角矩形：

.e2::before{content:""; width:300px; height:300px; position:absolute; border:5px solid #fb7; border-radius:120px;}

这样就可以得到一段弧线，然后复制一份，调整下位置，作为眼睛的上眼睑和下眼睑：

html：

<div class="e2"></div>
<div class="e3"></div>

css：

.e2{position:absolute; top:0; left:0; width:70px; height:70px; overflow:hidden;}
.e3{position:absolute; top:14px; left:14px; width:65px; height:65px; overflow:hidden;}
.e2::before, .e3::before{content:""; width:300px; height:300px; position:absolute; border:5px solid #fb7; border-radius:120px;}

接着需要两个小半圆来填补左右两边：

html：

<div class="e4"></div>
<div class="e5"></div>

css：

.e4{position:absolute; top:72px; left:9px; width:24px; height:12px; overflow:hidden; transform:rotate(-160deg);}
.e5{position:absolute; top:15px; left:66px; width:24px; height:12px; overflow:hidden; transform:rotate(70deg);}
.e4::before, .e5::before{content:""; position:absolute; width:14px; height:14px; border:5px solid #fb7; border-radius:120px;}

然后用同样的方法画出眼白，再加上黑色的圆形瞳孔：

html：

<div class="e1"></div>
<div class="e6"></div> 

css：

 .e1{position:absolute; top:3px; left:3px; width:76px; height:76px; overflow:hidden;}  .e1::before{content:""; width:300px; height:300px; position:absolute; border:20px solid #fff; border-radius:120px;}
 .e6{position:absolute; top:62px; left:17px; width:15px; height:15px; background:#433; border-radius:10px;}

将组成眼睛的这几个元素用一个总元素包起来，再将这个总元素复制一份，分别作为左眼右眼，将其放在div.comical元素之下，并调整旋转角度与定位：

html：

<div class="eye eye_l">
  <div class="e1"></div>
  <div class="e2"></div>
  <div class="e3"></div>
  <div class="e4"></div>
  <div class="e5"></div>
  <div class="e6"></div>
</div>
<div class="eye eye_r">
  <div class="e1"></div>
  <div class="e2"></div>
  <div class="e3"></div>
  <div class="e4"></div>
  <div class="e5"></div>
  <div class="e6"></div>
</div>

css：

.eye{position:absolute; top:-10px; transform:rotate(45deg);}
.eye_l{left:40px;}
.eye_r{left:160px;}

这样一张脸就差不多出来了，还需要画上眉毛和红晕，这几个元素也放在div.comical之下：

html：

<div class="eyebrow eyebrow_l"></div>
<div class="eyebrow eyebrow_r"></div>
<div class="flush flush_l"></div>
<div class="flush flush_r"></div>

css：

.eyebrow{width:40px; height:40px; border-top:7px solid #444; border-radius:30px; border-left:0px solid transparent; border-right:0px solid transparent; position:absolute; top:10px;}
.eyebrow_l{left:20px; transform:rotate(20deg);}
.eyebrow_r{left:140px; transform:rotate(-20deg);}
.flush{width:40px; height:20px; border-radius:50%/50%; box-shadow:0 10px 6px 5px rgba(255,80,150,0.3) inset; position:absolute; top:70px;}
.flush_l{left:12px;}
.flush_r{left:148px;}

这样一个完整的滑稽脸就出来了。

为了让它更生动一点，可以通过animation加上动画，这就看各自的喜好了。

这里提供一个参考：

用纯css3写一个大大的滑稽​www.aghikari.com

css的可能性是意想不到的，其实要画个滑稽，还有很多种方法可以实现，这里只是其中一种方法，仅供参考。

原文：

用纯css3写一个大大的滑稽​www.aghikari.com