大家好，这里是蝉蝉，今天我们来讲对html和css有了一个基础认识后，我们应该怎么样做一个可爱、迷人又简单的小demo呢？那么就来到我们今天的主题------球球kiss。

一、效果图

二、核心要点

htmlh和css常用标签
伪元素
定位
animation动画
认真取名字 ʕ•̀ ω • ʔ

三、html框架

这个demo既然是两个球球kiss，那么它就包括两个球及其眼睛、嘴巴和点睛之笔---腮红【在这也可以叫腮绿的hhh】。

需要重视的一点是，如果我们写这样一个框架，对于小白来说，每个球体里有两个眼睛，两个腮红，一个嘴巴，里面的元素过于丰富，会导致在布局的时候非常乱，那么我们就将球体里的眼睛、嘴巴和腮红放在一个名为face的盒子中。

html 复制代码

<body>
    <div class="container">
        <div class=' ball' id='l-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 class="ball" id='r-ball'>
            <div class=" face face-r">
                <div class="eye eye-l"></div>
                <div class="eye eye-r"></div>
                <div class="mouth mouth-alter"></div>
                <div class="kiss">
                    <div class="kiss-t"></div>
                    <div class="kiss-b"></div>
                </div>
            </div>
        </div>
    </div>
</body>

四、css中的重点

弧形

当我们这样的小白拿到这个demo，第一个困扰应该是我们怎么做出眼睛和嘴巴这样的弧型呢？其实在css中很容易能够做到这一点。

css 复制代码

.eye {
    width: 15px;
    height: 14px;
    border-bottom: 5px solid #000;
    border-radius: 50%;
}

如图所示，我们给到眼睛一个宽高，给其一个比较宽的下框线，再给加一个border-radius的属性，border-radius 允许你设置元素的外边框圆角,因此得出的效果如下：

伪元素

另外，我们的腮红其实使用到了一个伪元素的小重点

总结一下，伪元素的基本知识点其实主要在它以下细节：

如果没有设置'content'属性，伪元素是无用的
伪元素不会继承父元素的样式（如padding,margin等等）
我们可能会潜意识里认为::before 和::after 伪元素可能是插入的内容会被注入到目标元素的前或后，其实不然，注入的内容将是目标元素的子元素，但他会被置于这个元素任何内容的前后

animation动画

事实上，两个球体kiss（也就是平移以及旋转的效果），我们用到关键帧来做，关键帧 keyframes 可以控制动画序列的中间步骤，我们需要注意的就是仔细去敲每一帧的平移长度和旋转角度，另外kiss效果，我们可以给mouth设置两个动画，在某一时间用opacity这个属性隐藏它，再做一个嘴巴出来，只在那一时间显示。

五、css代码展示