快六一啦，学习CSS3实现一个冰淇淋动画特效

àì夳堔傛蜴生んèń 2023-10-11 22:57 16阅读 0赞

快六一啦，小时候顶多吃个小冰棍，或者是那种小冰袋，现在的小朋友真是好，动不动就能吃到冰淇淋，今天用CSS3实现一个冰淇淋的动画特效吧

![63748e72dc314943857316f3b1f6a386.gif_pic_center][]

**目录**

实现思路

桶身的实现

冰淇淋身体的实现

五彩颗粒的实现

HTML源码

CSS3源码

最后

--------------------

![952ddb67bc8948e4b0141a1200b3a084.png][]

#### 实现思路 ####

>  *  本文采用多DOM的方式进行布局，冰淇淋桶身通过border-radius进行特殊区域进行圆润处理；
>  *  眼部比较容易理解，先做大的border-radius圆角形状，然后内部做小的白色圆角处理，并且进行定位；通过animation动画，使眼睛可以左右移动；
>  *  嘴角做半圆处理，然后再通过rotateZ角度旋转，变为卡通可爱形；
>  *  然后是顶部分三部分处理，包括右上角的樱桃部分；
>  *  最后是五彩颗粒，采用定位的方式，因为原本我们采用的是DIV元素，所以需要使用一定的圆角处理；

#### 桶身的实现 ####

桶身使用**.base**类，对**width**和**height**做固定，使用**position**做定位，所以需要**z-index**的属性加入，需要一定的圆角，又要使用**border-radius**做处理；

底部为了模拟放在桌子表面上，需要有一个放置的阴影效果，这里使用**filter**的属性，并控制其**blur**属性值，

眼睛就是大的DIV套小的DIV，然后采用position进行定位，分别以border-radius做圆角处理，这里需要一个**animation**动画，使其左右转动，注意，分为左右两只可爱小眼睛；

嘴角因为是DIV元素，而且首先做了上半圆的处理，然后再使用**rotateZ(180deg)**将其旋转即可；

部分CSS3代码如下：

.eye{
        width: 4vmax;
        height: 4vmax;
        border-radius: 50%;
        position: absolute;
        background: #472a1c;
        top: 19vmax;
        z-index: 110;
    }
    
    .eye::before{
        content: '';
        position: absolute;
        top: .75vmax;
        left: .75vmax;
        width: 1.15vmax;
        height: 1.15vmax;
        border-radius: 50%;
        background: white;
        animation: 4s eye infinite ;
    
    }
    .eye::after{
        content: '';
        position: absolute;
        top: 2.5vmax;
        left: 1vmax;
        width: .5vmax;
        height: .5vmax;
        border-radius: 50%;
        background: white;
        animation: 4s eye infinite ;
    
    }
    .eye-l{ left: 8.8vmax; }
    .eye-r{ left: 17.5vmax; }

![72de75c112674c34825b4cf8053894e5.png][]

#### 冰淇淋身体的实现 ####

身体部分采用上中下3个DOM元素做分层处理，分别添加**.top\_\_item**类，因为冰淇淋被挤压到桶身后呈圆形，所以**border-radius**真是一个神奇的属性；

然后再通过**::before**和**::after**伪类进行阴影部分的元素定位与布局，再配合**linear-gradient**使特殊部位进行阴影效果，使效果更逼真；

顶部樱桃部分位于最顶部的**.top\_item**类中，但樱桃并非**border-radius:50%**那样的圆角，而是稍微有一点非圆角，部分CSS3代码如下

.top__item:nth-of-type(3)::before{
        content: '';
        position: absolute;
        width: 4vmax;
        height: 4vmax;
        right: 0;
        top: 0vmax;
        border-radius: 50% / 60%;
        background: #e30b5d;
        transform: rotateZ(-10deg);
    }

![6fdfcc36f8694759b4b99baf178e3cbc.png][]

#### 五彩颗粒的实现 ####

五彩颗粒重点在于定位和方位的旋转效果，这里使用了**absolute**定位，并且需要**z-index**的层级比其他元素要高，然后再分别进行**top**值和**left**值的定位，并采用**rotateZ**的旋转属性，使每个五彩颗粒角度方位不同，但其实看这个冰淇淋也就是两种角度，而且为了更吸引小朋友，需要做成不同颜色的，这就需要不同的**background**属性值，这个比较简单，部分CSS3代码如下

.chips{
        width: 2vmax;
        height: .5vmax;
        position: absolute;
        top: 10vmax;
        left: 8vmax;
    
        border-radius: 50%;
        transform: rotateZ(35deg);
        z-index: 200;
    }
    .chips:nth-of-type(2){
        top: 8vmax;
        left: 12vmax;
    }

到这里就算讲解完成了，但讲N遍也不如拿到代码自己看一看，改一改源码玩一玩，下面给出源码

#### HTML源码 ####

#### CSS3源码 ####

#### 最后 ####

最后，希望不管是大人还是小朋友们，都可以渡过一个快乐的六一儿童节，即便自己不是小孩子了，也奖励自己一个六一小礼物吧

[63748e72dc314943857316f3b1f6a386.gif_pic_center]: https://img-blog.csdnimg.cn/63748e72dc314943857316f3b1f6a386.gif#pic_center
[952ddb67bc8948e4b0141a1200b3a084.png]: https://img-blog.csdnimg.cn/952ddb67bc8948e4b0141a1200b3a084.png
[72de75c112674c34825b4cf8053894e5.png]: https://img-blog.csdnimg.cn/72de75c112674c34825b4cf8053894e5.png
[6fdfcc36f8694759b4b99baf178e3cbc.png]: https://img-blog.csdnimg.cn/6fdfcc36f8694759b4b99baf178e3cbc.png