快六一啦，学习CSS3实现一个冰淇淋动画特效
快六一啦，小时候顶多吃个小冰棍，或者是那种小冰袋，现在的小朋友真是好，动不动就能吃到冰淇淋，今天用CSS3实现一个冰淇淋的动画特效吧
目录
实现思路
桶身的实现
冰淇淋身体的实现
五彩颗粒的实现
HTML源码
CSS3源码
最后
实现思路
- 本文采用多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; }
冰淇淋身体的实现
身体部分采用上中下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>最后
最后，希望不管是大人还是小朋友们，都可以渡过一个快乐的六一儿童节，即便自己不是小孩子了，也奖励自己一个六一小礼物吧
相关文章：
快六一啦，学习CSS3实现一个冰淇淋动画特效
快六一啦，小时候顶多吃个小冰棍，或者是那种小冰袋，现在的小朋友真是好，动不动就能吃到冰淇淋，今天用CSS3实现一个冰淇淋的动画特效吧 目录 实现思路 桶身的实现 冰淇淋身体的实现 五彩颗粒的实现 HTML源码 CSS3源…...
VSCode CMake vcpkg 整合
VSCode 整合 CMake 调试 CMake 工程 // launch.json {"version": "0.2.0","configurations": [{"name": "(gdb) Launch","type": "cppdbg","request": "launch",// Resolved by …...
c++ | win vscode
vscode 适合新手做一些简单的单个的编译和调试 新手适合去配置c 环境，尤其是当涉及复杂一点的编程，如多文件、多线程，在调试的时候会头大，要求会高一点 但怎么说呢？ c 编译和调试是最接近实际开发环境的，与…...
算法-快速排序
给你一个整数数组 nums，请你将该数组升序排列。 输入：nums [5,2,3,1] 输出：[1,2,3,5] 输入：nums [5,1,1,2,0,0] 输出：[0,0,1,1,2,5] 详细思路直接看我录制的视频吧 算法-快速排序_哔哩哔哩_bilibili class Soluti…...
SSM项目-博客系统
在线体验项目：登陆页面 项目连接：huhublog_ssm: 个人博客系统 技术栈：SpringBoot、SpringMVC、Mybatis、Redis、JQuery、Ajax、Json (gitee.com) 1.项目技术点分析 SpringBoot、SpringWeb(SpringMVC)、MyBatis、MySQL(8.x)、Redis(存储验…...
Android Gradle Plugin 编译
1. 源码下载： $ mkdir studio-main $ cd studio-main $ repo init -u https://android.googlesource.com/platform/manifest -b studio-main $ repo sync -c -j4 -q 这个官方网址让下载 studio-master-dev 分支，这个分支很老旧了，我这里直接…...
如何快速掌握水土保持方案编制
1、熟悉水土保持常用的主要法律法规、部委规章、规范性文件及技术规范与标准； 2、了解水土保持方案、监测及验收工作开展的流程； 3、熟悉水土保持方案、监测及验收工作需要收集的资料、现场踏勘注意事项； 4、熟悉常见水土保持工程施工工艺…...
前端笔试---acm模式
前言 之前一直刷力扣，昨天做了小红书笔试，发现是acm模式，不太熟悉，特此总结。其实如果是acm模式就需要自己写一下输入输出。前端一般有两个选择，一个是基于 V8 环境，另一个是基于 node。 V8 // 对于有多…...
国联易安网页防篡改保护系统“渠道招募”启动啦！
作为业内专注于保密与非密领域的分级保护、等级保护、业务连续性安全和大数据安全的领军企业，国联易安网页防篡改保护系统基于“高效同步”、“安全传输”两项技术，具备了独特的“五重防护”新特性，支持网页的全自动发布、网页监控、报警和自…...
JavaScript--WebStorage
目录 WebStorage概述 WebStorage分类 注意： localStorage方法 介绍： 常见方法： 案例演示： sessionStorage方法 介绍： 常见方法： 案例演示： WebStorage概述 WebStorage是HTML5中…...
elementui 的 dialog 常用逻辑总结
菜鸟最近写后台管理系统，发现不管是弹窗、还是编辑、查看、添加等功能，真的代码都差不多，但是每次都要重新写里面的关闭逻辑等，菜鸟就感觉不如搞一个模版，后面只关注于逻辑，其他都直接来这里复制了…...
ip网络广播系统网络音频解码终端公共广播SV-7101
SV-7101V网络音频终端产品简介 网络广播终端SV-7101V，接收网络音频流，实时解码播放。本设备只有网络广播功能，是一款简单的网络广播终端。提供一路线路输出接功放或有源音箱。 产品特点 ■ 提供固件网络远程升级■ 标准RJ45网络接口&…...
【Winform学习笔记（七）】Winform无边框窗体拖动功能
Winform无边框窗体拖动功能 前言正文1、设置无边框模式2、无边框窗体拖动方法1、通过Panel控件实现窗体移动2、通过窗体事件实现窗体移动3、调用系统API实现窗体移动4、重写WndProc()实现窗体移动 前言 在本文中主要介绍 如何将窗体设置成无边框模式、以及实现无边框窗体拖动功…...
【Nginx】静态资源部署、反向代理、负载均衡
个人简介：Java领域新星创作者；阿里云技术博主、星级博主、专家博主；正在Java学习的路上摸爬滚打，记录学习的过程~ 个人主页：.29.的博客 学习社区：进去逛一逛~ nginx静态资源部署、反向代理、负载均衡 &…...
二、框架篇
框架篇 Spring 1. 基础核心技术 第1章-Spring的模块与应用场景 第2章-Spring基于XML配置的容器 第3章-Spring基于注解配置的容器 第4章-Spring基于Java配置的容器 第5章-Spring三种配置方式的混合和迁移 第6章-Spring同类型多个Bean的注入 第7章-Spring的Bean生命周期…...
[LitCTF 2023]Http pro max plus
打开环境后提示说，只允许在本地访问，本地访问，还是想到了XFF字段 好家伙的，直接被嘲讽，还是了解太少了，都不知道还有没有其他方式可以控制ip地址信息 经过查看wp，得知一种新的方式 Client-IP …...
科技的成就（四十九）
381、机器人 Unimate 诞生 "1961 年，第一款工业机器人 Unimate 诞生。工程师恩格尔伯格受阿西莫夫小说《我，机器人》影响，与发明家德沃尔成立了 Unimation。1961 年，公司的第一台机器 人 Unimate 开始在通用电气新泽西工厂试…...
地理信息系统空间分析实验教程 第三版 第八章示例与练习 学校选址
学校选址 背景 合理的学校空间位置布局有利于学生的上课与生活。学校的选址问题需要考虑地理 E八位置、学生娱乐场所配套设施、与现有学校的距离等因素，从总体上把握这些国素能够确定出适宜性比较好的学校选址区 目的 通过练习，熟悉 ArcGIS 栅格数据…...
opencv35-形态学操作-腐蚀cv2.erode()
形态学，即数学形态学（Mathematical Morphology），是图像处理过程中一个非常重要的研 究方向。形态学主要从图像内提取分量信息，该分量信息通常对于表达和描绘图像的形状具有 重要意义，通常是图像理解时所使用…...
数据结构之栈和队列---c++
栈和队列的简单介绍 栈 栈是一个“先进后出”结构 队列 入队演示 队列是一种“先进先出”的结构 出队演示 接下来我们开始本次的内容 栈实现队列 分析 1.我们可以老老实实的写一个栈然后将所有的接口函数实现出来，最后再进行实现队列，但是显然…...
Godot中型项目工程化实践：目录规范、资源引用与状态管理
1. 这不是续集，而是项目落地的分水岭“Godot 游戏引擎项目（二）”——看到这个标题，很多人第一反应是：“哦，上一篇讲了环境搭建和Hello World，这篇该讲节点树和信号了？”但我在带三个…...
番茄小说下载器终极指南：三步构建你的离线阅读自由王国
番茄小说下载器终极指南：三步构建你的离线阅读自由王国 【免费下载链接】Tomato-Novel-Downloader 番茄小说下载器不精简版 项目地址: https://gitcode.com/gh_mirrors/to/Tomato-Novel-Downloader 你是否曾在地铁里读到精彩章节时突然断网？是否在…...
Burp Suite证书安装全解：HTTPS抓包失败的根源与跨平台命令行方案
1. 为什么必须亲手安装Burp Suite证书——不是“点一下就完事”的操作很多人第一次在手机或测试设备上配置Burp Suite代理时，会下意识认为：只要把电脑上的Burp监听地址填进Wi-Fi代理设置，再用浏览器访问http://burp，点击那个绿色的…...
Sora 2 MOV导出画质崩坏真相：HDR10元数据丢失、BT.2020色域截断、帧率标志位误写——3大隐性缺陷紧急修复方案
更多请点击： https://intelliparadigm.com 第一章：Sora 2 MOV导出画质崩坏的系统性认知 Sora 2 在生成高保真视频后，导出为 MOV 格式时频繁出现色度抽样失真、动态范围压缩、帧间伪影加剧等现象，其本质并非单一环节失效ÿ…...
XXPermissions：Android权限管理框架的架构设计与最佳实践
XXPermissions：Android权限管理框架的架构设计与最佳实践 【免费下载链接】XXPermissions Android Permissions Framework, Adapt to Android 16 项目地址: https://gitcode.com/GitHub_Trending/xx/XXPermissions 在Android应用开发中，权限管理一…...
Sora 2 GIF导出速度提升300%？20年多媒体架构师亲授GPU加速转码链路（CUDA 12.4 + cuVID硬编实测）
更多请点击： https://kaifayun.com 第一章：Sora 2 GIF导出方法概览 Sora 2 并非 OpenAI 官方发布的模型，当前（截至2024年）并无名为“Sora 2”的公开产品。因此，所谓“Sora 2 GIF导出”实为社区对视频生成工…...
机器学习力场攻克Peierls相变动力学：从对称性描述符到畴生长标度律
1. 项目概述：当机器学习遇见Peierls相变在凝聚态物理和材料科学的前沿，我们常常被一个核心问题所困扰：如何精确地模拟那些由电子和晶格（原子）强烈耦合所驱动的复杂动力学过程？这类系统，比如电荷…...
面试官问LinkedBlockingQueue和ArrayBlockingQueue区别？别只答有界无界了，这3个实战坑才是重点
面试官追问LinkedBlockingQueue与ArrayBlockingQueue？别只答基础区别，这3个实战陷阱才是关键 当面试官抛出"LinkedBlockingQueue和ArrayBlockingQueue有什么区别"这个问题时，80%的候选人会条件反射般回答"一个有界一个无界&qu…...
四大桌面云品牌评测：从安全、体验到性价比
桌面云不再是大型企业的专属，它已成为各行各业实现数据安全、混合办公和IT降本增效的“标准配置”。经过对市场主流方案的全面评估，我们认为，深信服（Sangfor）aDesk桌面云因其在安全内生化、传输协议自研化、运维管理智…...
摆脱论文困扰!2026年最值得拥有的专业AI智能降重工具
2026年论文降AI率工具已从“基础改写”升级为多维度智能优化系统，核心评价维度涵盖AI生成内容识别精度、语义逻辑一致性、学术格式合规性、查重适配能力及多语言处理水平。本次测评覆盖6款主流工具，测试场景包括中文与英文论文、全流程与专项功能、免费与…...