首页 前端知识 快六一啦,学习CSS3实现一个冰淇淋动画特效

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

2024-01-25 10:01:23 前端知识 前端哥 644 358 我要收藏

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

 

目录

实现思路

桶身的实现

冰淇淋身体的实现

五彩颗粒的实现

HTML源码

CSS3源码

最后


实现思路

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

桶身的实现

桶身使用.base类,对widthheight做固定,使用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; }

 

冰淇淋身体的实现

身体部分采用上中下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);
}

 

五彩颗粒的实现

五彩颗粒重点在于定位和方位旋转效果,这里使用了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源码

<body>
<div class="main">
	<div class="base"></div>
	<div class="sdw"></div>
	
	<div class="eye eye-l"></div>
	<div class="eye eye-r"></div>
	<div class="shadow shadow-l"></div>
	<div class="shadow shadow-r"></div>
	<div class="mouth"></div>
	
	<div class="top">
		<div class="top__item"></div>
		<div class="top__item"></div>
		<div class="top__item"></div>
	</div>
	
	<div class="colors">
		<div class="chips chips--blue"></div>
		<div class="chips chips--pink chips--rotate"></div>
		<div class="chips chips--green"></div>
		<div class="chips chips--blue chips--rotate"></div>
		<div class="chips chips--pink"></div>
		<div class="chips chips--green chips--rotate"></div>
		<div class="chips chips--blue"></div>
	</div>
</div>

CSS3源码

<style>
	*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background: #FFD275;
    color: white;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
    position: relative;

}
a{
    font-family: sans-serif;
    font-size: 12px;
    font-weight: normal;
    text-decoration: none;
    letter-spacing: 0;
    cursor: pointer;
    color: #00b1b7;
}
.particles{
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 1;
}

.main{
    height: 30vmax;
    width: 30vmax;
    position: relative;
    animation: 2s jump ease-out infinite alternate;
    z-index: 10;
}
.base{
    position: absolute;
    width: 18vmax;
    bottom: 4vmax;
    left: 6vmax;

    border-top: 10vmax solid #ff87a4;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-left: 3vmax solid transparent;
    border-right: 3vmax solid transparent;
    border-bottom: none;
    z-index: 90;

}
.base::after{
    content: '';
    position: absolute;
    width: 12vmax;
    height: 4vmax;
    background: linear-gradient(to bottom, #ff87a4 60%, #e3748f);
    bottom: -1.65vmax;
    border-radius: 50%;
}

.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; }

.shadow{
    position: absolute;
    width: 2vmax;
    height: 1vmax;
    bottom: 6.5vmax;
    z-index: 109;
    border-radius: 50%;
    background: #ff2a7b;
    animation: .1s shake infinite;

}
.shadow-l{ left: 8.4vmax; }
.shadow-r{ left: 19.5vmax; }

.mouth{
    position: absolute;
    top: 23vmax;
    left: calc(15vmax - 1.5vmax);

    border-top-left-radius: 1.5vmax;
    border-top-right-radius: 1.5vmax;
    border: 1.5vmax solid #ff2a7b;
    transform: rotateZ(180deg);

    z-index: 110;
    animation: 2s mouth infinite alternate;

}


.top{
    position: absolute;
    width: 22vmax;
    height: 15vmax;
    bottom: 12vmax;
    left: 4vmax;
}
.top__item:nth-of-type(1){
    position: absolute;
    width: 100%;
    height: 8vmax;
    border-radius: 5vmax;
    bottom: 0;
    z-index: 100;
    background: #f2e7e8;

}
.top__item:nth-of-type(1)::after{
    content: '';
    position: absolute;
    width: 10vmax;
    height: 10vmax;
    right: -.5vmax;
    top: -2vmax;
    border-radius: 50%;
    background: #f2e7e8;
    background: linear-gradient(120deg, rgba(242, 231, 232, 1) 40%, #d6c6c8);

}
.top__item:nth-of-type(1)::before{
    content: '';
    position: absolute;
    width: 18vmax;
    height: 3vmax;
    left: 2vmax;
    bottom: -.8vmax;
    border-radius: 50%;
    background: linear-gradient(to bottom, #f2e7e8 30%, #d6c6c8);

}
.top__item:nth-of-type(2){
    position: absolute;
    width: 16vmax;
    height:5vmax;
    bottom: 6vmax;
    left: 3vmax;
    border-radius: 5vmax;
    z-index: 80;
    background: #f2e7e8;
}
.top__item:nth-of-type(2)::after{
    content: '';
    position: absolute;
    width: 4vmax;
    height: 4vmax;
    right: 0;
    top: -1vmax;
    border-radius: 50%;
    background: #f2e7e8;
}
.top__item:nth-of-type(3){
    position: absolute;
    width: 12vmax;
    height: 10vmax;
    left: 5vmax;
    border-radius: 50%;
    top: 0;
    z-index: 70;
    background: #f2e7e8;
}
.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);
}
.top__item:nth-of-type(3)::after{
    content: '';
    position: absolute;
    width: 1vmax;
    height: 1vmax;
    right: 1vmax;
    top: .75vmax;
    border-radius: 50%;
    background: white;
    opacity: .4;
}


.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;
}
.chips:nth-of-type(3){
    top: 4vmax;
    left: 14vmax;
}
.chips:nth-of-type(4){
    top: 14vmax;
    left: 14vmax;
}
.chips:nth-of-type(5){
    top: 15vmax;
    left: 18vmax;
}
.chips:nth-of-type(6){
    top: 9vmax;
    left: 20vmax;
}
.chips:nth-of-type(7){
    top: 15vmax;
    left: 6vmax;
}

.chips--rotate{ transform: rotateZ(-35deg); }
.chips--blue{ background: #00b1b7; }
.chips--pink{ background: #ff2c7c; }
.chips--green{ background: #00df4a; }


.sdw{
    width: 12vmax;
    height: 4vmax;
    position: absolute;
    bottom: 1.5vmax;
    left: calc(50% - 6vmax);

    background: black;
    border-radius: 50%;
    filter: blur(3px);
    animation: 2s sdw ease-out infinite alternate;

}
@keyframes sdw {
    0%, 90%{
        opacity: .3;
        transform: translateY(0vmax) scale(.98);
    }
    100%{
        transform: translateY(5vmax) scale(.95);
        opacity: .1;
    }
}

@keyframes eye {
    0%, 45%{ transform: translateX(0vmax);}
    50%, 95%{ transform: translateX(1.25vmax);}
}
@keyframes mouth {
    0%, 80%{
        border: 1.5vmax solid #ff2a7b;
        border-bottom: 0;
    }
    100%{
        border: 1.5vmax solid #ff2a7b;
    }
}

@keyframes shake {
    0%{ transform: translateY(-1px); }
    100%{ transform: translateY(1px);}
}
@keyframes jump {
    0%, 90%{
        transform: translateY(2vmax) scale(1);
    }
    100%{
        transform: translateY(-3vmax) scale(.95);
    }
}
@keyframes move {
    0%{
        transform: translateY(0) rotateZ(35deg);
        opacity: 0;
    }
    10% ,90%{
        opacity: .35;
    }
    100%{
        transform: translateY(35vmax) rotateZ(-35deg);
        opacity: 0;
    }
}

</style>

最后

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/294.html
评论
发布的文章

Ajax学习(3rd)

2024-02-04 11:02:39

jQuery之事件触发器trigger()

2024-02-04 11:02:02

数据可视化一、ECharts

2024-02-04 11:02:45

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!