《用CSS画一对会"眉目传情"的球球 | 前端创意小实验》前言：这两个球在干嘛？各位前端艺术家们，今天我们要用纯CSS

前言：这两个球在干嘛？

各位前端艺术家们，今天我们要用纯CSS画一对神奇的小球球。左边那个看起来人畜无害，右边那个却在疯狂挑眉——这简直就是CSS版的"你瞅啥？瞅你咋地！"（笑）

HTML结构设计
CSS选择器精髓
display属性奥秘
定位(position)玄学

完整代码见文章末，请结合完整代码食用

一些需要掌握的知识：

定位
- position 定位 static 没有定位能力 relative 相对定位
  - 子元素想对它定位
  - 相对于自身的位置定位 absolute 绝对定位 absolute 找到离它（管着它的）最近的position 不为static 的元素定位 absolute 找到离他最近的position 不为static 的属性定位直到body 为止
- display属性 display 切换行内块级的格式化上下文能力
  inline-block 行内块级设置宽高在一行
  inline 行内不可以设置宽高
  block 块级可以设置宽高独占一行

一、HTML结构：用Emmet语法光速编码

首先我们来构建基础结构：

html

<div class="container">
  <!-- 左边球球 -->
  <div id="l-ball" class="ball">/*圆形的脸*/
    <div class="face face-l">/*两只眼睛*/
      <div class="eye eye-l"></div>
      <div class="eye eye-r"></div>
      <div class="mouth"></div>/*嘴*/
    </div>
  </div>
  
  <!-- 右边球球（那个不安分的） -->
  <div id="r-ball" class="ball">
    <div class="face face-r">
      <div class="eye eye l eye-r-p"></div>
      <div class="eye eye-r eye-r-p"></div>
      <div class="mouth mouth-r"></div>
    </div>
  </div>
</div>

Emmet语法小课堂：

div#l-ball.ball → <div id="l-ball" class="ball"></div>
.container>#l-ball.ball+#r-ball.ball → 生成有父子关系的结构
> 子选择器，+ 兄弟选择器

二、CSS核心技巧揭秘

1. 居中大法好

        .container{
            position: absolute;/*定位*/
            top: 50%;
            left: 50%;
            width: 238px;
            height: 238px;
            background-color: #333637;
            transform: translate(-50%,-50%);/* 这才是真·居中 */
        }

这招比margin: 0 auto厉害多了，连垂直居中都能搞定！

2. 画圆不靠美术功底

 .ball {
            width: 100px;
            height: 100px;
            border: 8px solid black;
            border-radius: 50%;/* 变圆魔法 */
            display: inline-block;/*让两个园在一行*/
            background: white;
            position: relative;
            margin: 0 10px;
        }
             .face {
            width: 70px;
            height: 30px;
            position: absolute;
            right: 0;
            top: 30px;
        }

display: inline-block;的重要性，如果没有则不在一行：

3.在脸上加一些东西

比如随意加点东西

.face
        {
            width: 70px;
            height: 30px;
            position: absolute;/*绝对定位，子元素相对它定位*/;
            right: 0;
            top: 30px;
            border-top-right-radius: 15px;
            background-color: green;
        }

加上眼睛

 .eye
        {
            width: 15px;
            height: 14px;
            border-radius: 50%;
            border-bottom: 5px solid black;
            position: absolute;/*绝对定位，子元素相对它定位*/;
            /*圆角*/
        }

化一只眼为两只

嘴巴

.mouth{
            width: 30px;
            height: 14px;
            border-radius: 50%;
            border-bottom: 5px solid black;
            position: absolute;/*绝对定位，子元素相对它定位*/;
            bottom: -5px;
            transform: translateX(3px);
            left: 0;
            right: 0;
            margin: auto;
        }

4.眼睛弯曲的秘密

        .eye-r-p{
                border-top: 5px solid black;
                border-bottom: 0px;
        }

右边球球通过这个类实现了"挑眉"效果，CSS界的表情管理大师！

三、优化我们的画面

/* background-color: #333637; transform: translate(-50%,-50%); */是去掉灰框让我们的图案在页面上更和谐

去掉脸上的绿框

四、完整代码优化版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body
        {
            background-color: #217e8c;
            margin: 0;
        }
        .container{
            position: absolute;/*定位*/
            top: 50%;
            left: 50%;
            width: 238px;
            height: 238px;
            /* background-color: #333637;
            transform: translate(-50%,-50%); */
        }
        .ball
        {
            width: 100px;
            height: 100px;
            border: 8px solid black;
            border-radius: 50%;
            display: inline-block;            /* 行内块级 */
            background: white;
            vertical-align: top;
            position: relative;/*相对定位，子元素相对它定位*/;
        }
        .face
        {
            width: 70px;
            height: 30px;
            position: absolute;/*绝对定位，子元素相对它定位*/;
            right: 0;
            top: 30px;
            border-top-right-radius: 15px;
            /* background-color: green; */
        }
        .eye
        {
            width: 15px;
            height: 14px;
            border-radius: 50%;
            border-bottom: 5px solid black;
            position: absolute;/*绝对定位，子元素相对它定位*/;
            /*圆角*/
        }
        .eye-l
        {
            left: 10px;
        }
       .eye-r
        {
            right: 5px;
        }
        .mouth{
            width: 30px;
            height: 14px;
            border-radius: 50%;
            border-bottom: 5px solid black;
            position: absolute;/*绝对定位，子元素相对它定位*/;
            bottom: -5px;
            transform: translateX(3px);
            left: 0;
            right: 0;
            margin: auto;
        }
        .eye-r-p{
                border-top: 5px solid black;
                border-bottom: 0px;
        }
    </style>
</head>
<body>
  <div class="container">
    <div id="l-ball" class="ball">
      <div class="face face-l">
        <div class="eye eye-l"></div>
        <div class="eye eye-r"></div>
        <div class="mouth"></div>
      </div>
    </div>
    <div id="r-ball" class="ball">
      <div class="face face-r">
        <div class="eye eye l eye-r-p"></div>
        <div class="eye eye-r eye-r-p"></div>
        <div class="mouth mouth-r"></div>
        </div>
    </div>
  </div>
</body>
</html>

结果演示

五、知识点总结

技术点	应用场景	幽默解读
绝对定位	元素精准定位	CSS版的"我的地盘听我的"
border妙用	画眼睛眉毛	一根border走天下
transform	居中/动画	CSS的变形金刚
嵌套结构	组织复杂元素	俄罗斯套娃式编程

🚀 下期预告：《用CSS让这两个球球谈恋爱》

（到底要让它们kiss还是打架？评论区说了算！）