当前位置： 首页 > news >正文

六一儿童节创意项目：教你用HTML5和CSS3制作可爱的雪糕动画

news 2026/5/21 17:42:19

六一儿童节快到了，这是一个充满童趣和欢乐的日子。为了给孩子们增添一份节日惊喜，我们决定用HTML5和CSS3制作一个生动有趣的雪糕动画。通过这个项目，不仅能提升你的前端技能，还能带给孩子们一份特别的节日礼物。无论你是前端开发新手还是经验丰富的开发者，这篇教程都会为你揭示如何一步一步实现这个创意十足的动画效果。准备好了吗？让我们一起动手吧！

目录

1 实现思路

2 身体部分的实现

3 雪糕的尖角顶部实现

4 第二区域的实现

5 中间动画区域实现

6 尾部雪糕棍儿的实现

7 完整源代码

1 实现思路

实现过程包含顶部的雪糕尖尖部分、中间区域、雪糕小人儿动画部分、底部部分和雪糕棍儿部分。

在这篇教程中，我们将用CSS3制作一个生动的雪糕动画。

  1. 首先，使用HTML创建雪糕的基础结构，包括雪糕体和雪糕棒。
  2. 然后，利用CSS3的渐变和圆角属性为雪糕添加颜色和形状。
  3. 接着，应用关键帧动画（@keyframes）实现雪糕的上下浮动效果，让雪糕看起来栩栩如生。
  4. 最后，通过CSS的过渡效果（transition）添加一些交互，例如悬停时雪糕会轻微摇摆。让我们开始这个有趣的项目吧！

2 身体部分的实现

这里主要是主体身体的区域部分，主要利用了flex布局、border-radius针对四个边角的圆形实现，box-shadow添加阴影部分。

<!-- HTML5部分  -->
<div class="container"><div class="icecream"><div class="icecream-body"></div></div>
</div>// css3部分
.container {width: 100%;height: 100%;position: relative;display: flex;align-items: center;justify-content: center;
}
.container .icecream {width: 27rem;height: 58rem;display: flex;flex-direction: column;align-items: center;justify-content: center;
}

3 雪糕的尖角顶部实现

这里主要是设定了div元素的高度，设定了色值。重点是父元素的overflow通过hidden的设定，将雪糕顶部不至于超出范围。

<!-- HTML5部分 -->
<div class="icecream-body__slice"></div>// css3部分
.container .icecream .icecream-body__slice {display: flex;border-bottom: 1rem solid #461b19;
}
.container .icecream .icecream-body__slice:nth-child(2n-1) {height: 30%;
}

4 第二区域的实现

 凸显雪糕的不同色值，可以让人更有味觉，仍然通过设定高度，设定border-bottom等边框的值，不超出父元素区域，高度适中，要给下面关键区域流出空白区域。

.container .icecream .icecream-body__slice:nth-child(2n-1) {height: 30%;
}
.container .icecream .icecream-body__slice:nth-child(2n) {height: 20%;
}
.container .icecream .icecream-body__slice:nth-child(1) {background: #a9d8ea;
}
.container .icecream .icecream-body__slice:nth-child(2) {background: #ab96db;
}
.container .icecream .icecream-body__slice:nth-child(3) {align-items: center;justify-content: center;background: #fcbad2;
}

 

5 中间动画区域实现

 中间动画区域，要制作动画，就要有开心的笑脸，笑脸分别由眼睛2个，鼻子一个，眼睛和鼻子分别又有动画展示，还要有鼻涕的流出，体现出六一的儿童氛围。用到的技术点有position定位、transform倾斜、border-radius圆角设定、transform-origin旋转、animation动画等

.container .icecream .icecream-body__slice:nth-child(3) .mouth {position: relative;width: 3rem;height: 2.8rem;margin: 0 1rem;
}
.container .icecream .icecream-body__slice:nth-child(3) .mouth__lip {width: 100%;height: 100%;background: #461b19;border-radius: 30% 30% 50% 50% / 29% 29% 65% 65%;position: absolute;z-index: 1;
}
.container .icecream .icecream-body__slice:nth-child(3) .mouth__saliva {width: 1.5rem;height: 2.5rem;background: #ffffff;border-radius: 1rem;position: absolute;transform-origin: 0 0;z-index: 0;animation: saliva 0.75s cubic-bezier(0.4, 0, 1, 1) infinite alternate;
}

 

6 尾部雪糕棍儿的实现

 尾部雪糕棍儿区域，display: flex;：将雪糕棒子设置为弹性盒模型，以便在需要时可以调整内部元素的布局。border-radius: 0 0 10rem 10rem;：设置雪糕棒子的底部边缘为圆角，使其看起来更加平滑和真实。border: 1.7rem solid #461b19;：设置雪糕棒子的边框，宽度为1.7rem，颜色为深棕色。box-shadow: 2.5rem 2.4rem 0 #d3cec4;：添加阴影效果，使雪糕棒子看起来有深度，颜色为浅灰色，阴影向右和向下偏移。

.container .icecream .icecream-stick {display: flex;height: 25%;width: 10rem;border-radius: 0 0 10rem 10rem;border: 1.7rem solid #461b19;border-top: 0;background: #ffd379;position: relative;box-shadow: 2.5rem 2.4rem 0 #d3cec4;
}

7 完整源代码

 小伙伴们可以直接跳过之前的讲解，新建HTML文档，将以下源代码拷贝过去，然后再打开，就可以看到效果啦，源代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>六一雪糕</title><style>@keyframes move {50% {transform: translateX(-0.5rem) rotate(-5deg);}100% {transform: translateX(0.25rem) rotate(1deg);}
}
@keyframes eyes {0% {transform: scaleY(1) translate(0, 0);}10% {transform: scaleY(-1) translate(0, -0.5rem);}100% {transform: scaleY(-1) translate(0, -0.5rem);}
}
@keyframes lip {to {transform: scaleY(0.7);}
}
@keyframes saliva {0% {transform: scaleY(1.5);}50% {transform: scaleY(1.75);}75% {transform: scaleY(1.6);}100% {transform: scaleY(2);}
}
*,
*:after,
*:before {box-sizing: border-box;
}html {font-size: 50%;overflow: hidden;height: 100%;
}body {margin: 0;padding: 0;width: 100%;height: 100%;background: #f5f4ed;
}.container {width: 100%;height: 100%;position: relative;display: flex;align-items: center;justify-content: center;
}
.container .icecream {width: 27rem;height: 58rem;display: flex;flex-direction: column;align-items: center;justify-content: center;
}
.container .icecream:hover {animation: move 1s ease-in-out infinite alternate;
}
.container .icecream:hover .icecream-body__slice:nth-child(3) .eye {animation: eyes 1s ease-in infinite alternate;
}
.container .icecream:hover .icecream-body__slice:nth-child(3) .mouth__lip {animation: lip 0.5s ease-in infinite alternate;
}
.container .icecream:hover .icecream-body__slice:nth-child(3) .mouth__saliva {opacity: 0;
}
.container .icecream .icecream-body {display: flex;flex-direction: column;height: 75%;width: 100%;border-radius: 27rem 27rem 6rem 6rem;border: 1.4rem solid #461b19;position: relative;overflow: hidden;box-shadow: 2.5rem 2.5rem 0 #d3cec4;
}
.container .icecream .icecream-body:before {content: "";width: 100%;height: 100%;border-radius: 20rem 27rem 0 0;position: absolute;box-shadow: inset 1.8rem 0 0 rgba(255, 255, 255, 0.2);
}
.container .icecream .icecream-body:after {content: "";width: 100%;height: 100%;border-radius: 27rem 18rem 0 0;position: absolute;box-shadow: inset -2.4rem 0 0 rgba(0, 0, 0, 0.2);
}
.container .icecream .icecream-body__slice {display: flex;border-bottom: 1rem solid #461b19;
}
.container .icecream .icecream-body__slice:nth-child(2n-1) {height: 30%;
}
.container .icecream .icecream-body__slice:nth-child(2n) {height: 20%;
}
.container .icecream .icecream-body__slice:nth-child(1) {background: #a9d8ea;
}
.container .icecream .icecream-body__slice:nth-child(2) {background: #ab96db;
}
.container .icecream .icecream-body__slice:nth-child(3) {align-items: center;justify-content: center;background: #fcbad2;
}
.container .icecream .icecream-body__slice:nth-child(3) .eye {width: 2.8rem;height: 1.5rem;background: #461b19;border-radius: 2.8rem 2.8rem 0 0;position: relative;margin-bottom: 3.5rem;transform-origin: 0 50%;
}
.container .icecream .icecream-body__slice:nth-child(3) .eye:before {content: "";width: 0.9rem;height: 0.9rem;background: #461b19;border-radius: 100%;position: absolute;bottom: 0;left: 0;transform: translate(0, 0.4rem);position: absolute;z-index: 1;
}
.container .icecream .icecream-body__slice:nth-child(3) .eye:after {content: "";width: 0.9rem;height: 0.9rem;background: #461b19;border-radius: 100%;position: absolute;bottom: 0;right: 0;transform: translate(0, 0.4rem);position: absolute;z-index: 1;
}
.container .icecream .icecream-body__slice:nth-child(3) .eye__retina {width: 1rem;height: 1rem;background: #fcbad2;border-radius: 100%;position: absolute;bottom: 0;left: 50%;transform: translate(-0.5rem, 0.5rem);z-index: 1;
}
.container .icecream .icecream-body__slice:nth-child(3) .mouth {position: relative;width: 3rem;height: 2.8rem;margin: 0 1rem;
}
.container .icecream .icecream-body__slice:nth-child(3) .mouth__lip {width: 100%;height: 100%;background: #461b19;border-radius: 30% 30% 50% 50% / 29% 29% 65% 65%;position: absolute;z-index: 1;
}
.container .icecream .icecream-body__slice:nth-child(3) .mouth__saliva {width: 1.5rem;height: 2.5rem;background: #ffffff;border-radius: 1rem;position: absolute;transform-origin: 0 0;z-index: 0;animation: saliva 0.75s cubic-bezier(0.4, 0, 1, 1) infinite alternate;
}
.container .icecream .icecream-body__slice:nth-child(4) {background: #ffffd2;border-bottom: 0;
}
.container .icecream .icecream-stick {display: flex;height: 25%;width: 10rem;border-radius: 0 0 10rem 10rem;border: 1.7rem solid #461b19;border-top: 0;background: #ffd379;position: relative;box-shadow: 2.5rem 2.4rem 0 #d3cec4;
}
.container .icecream .icecream-stick:before {content: "";width: 100%;height: 3.5rem;background: #d9ae58;position: absolute;
}
</style></head>
<body><div class="container"><div class="icecream"><div class="icecream-body"><div class="icecream-body__slice"></div><div class="icecream-body__slice"></div><div class="icecream-body__slice"><span class="eye"><span class="eye__retina"></span></span><div class="mouth"><span class="mouth__lip"></span><span class="mouth__saliva"></span></div><span class="eye"><span class="eye__retina"></span></span></div><div class="icecream-body__slice"></div></div><div class="icecream-stick"></div></div>
</div></body></html>

相关文章：

六一儿童节创意项目：教你用HTML5和CSS3制作可爱的雪糕动画

六一儿童节快到了&#xff0c;这是一个充满童趣和欢乐的日子。为了给孩子们增添一份节日惊喜&#xff0c;我们决定用HTML5和CSS3制作一个生动有趣的雪糕动画。通过这个项目&#xff0c;不仅能提升你的前端技能&#xff0c;还能带给孩子们一份特别的节日礼物。无论你是前端开发新…...

编程日记 2024/5/28 20:32:56

日用百货元宇宙 以科技创新培育产业新质生产力

当前&#xff0c;我国乳品工业的科技创新进入深水区&#xff0c;不仅对科技的需求加大&#xff0c;还具有跨学科、多领域交叉的显著特征&#xff0c;在引领我国乳制品行业现代化产业体系建设过程中&#xff0c;不断催生新产业、新模式、新动能&#xff0c;面向行业未来的新质生…...

编程日记 2024/5/28 20:31:55

云服务器购买之后到部署项目的流程

1.通过账号密码登录百度智能云控制台; 2.进入对应的服务器‘云服务器BBC’ 找到’实例‘即找到对应的服务器列表; 此时通过本地电脑 1.cmd命令提示符 PING 服务器公网地址不通&#xff1b; 2.通过本地电脑进行远程桌面连接不通 原因&#xff1a;没有关联安全组&#xff0c;或者…...

编程日记 2024/5/28 20:30:54

2025秋招计算机视觉面试题（二）

面试题目录 Yolov5中的objectness的作用目标检测设置不同的anchor改善小目标及非正常尺寸目标的性能在目标Crowded的场景下经常出现误检的原因Unet网络结构中四次降采样的必要性为什么UNet++可以被剪枝在不同场景下进行目标的标记及训练以取得好的效果如何修改Yolov5目标检测实…...

编程日记 2024/5/28 20:29:53

ECU 关键通讯信息安全事件记录清单

车辆变速箱ECU&#xff08;电子控制单元&#xff09;控制器的通信信息安全对于确保车辆的正常运行和驾驶安全至关重要。以下是一些关键的通信信息安全事件&#xff0c;应当进行日志记录&#xff1a; 通信协议异常&#xff1a;记录任何不符合既定通信协议的数据包&#xff0c;这…...

编程日记 2024/5/28 20:28:51

webpack5基础和开发模式配置

运行环境 nodejs16 webpack基础 webpack打包输出的文件是bundle 打包就是编译组合 webpack本身功能 仅能编译js文件 开始使用 基本配置 五大核心概念 准备webpack配置文件 1.在根目录 2.命名为webpack.config.js 开发模式介绍 处理样式资源 处理css样式资源文件…...

编程日记 2024/5/28 20:27:50

11111111111111

11111111111111...

编程日记 2024/5/28 20:26:48

Oracle实践｜内置函数之日期与时间函数

&#x1f4eb; 作者简介&#xff1a;「六月暴雪飞梨花」&#xff0c;专注于研究Java&#xff0c;就职于科技型公司后端工程师 &#x1f3c6; 近期荣誉&#xff1a;华为云云享专家、阿里云专家博主、腾讯云优秀创作者、ACDU成员 &#x1f525; 三连支持&#xff1a;欢迎 ❤️关注…...

编程日记 2024/5/28 20:25:47

内网穿透工具

在渗透过程中&#xff0c;我们需要快速实现内网穿透&#xff0c;从而绕过网络访问限制&#xff0c;直接从外网来访问内网。今天&#xff0c;我们来推荐几款非常好用的内网穿透工具&#xff0c;如有其它推荐&#xff0c;欢迎补充和指正。 1、ngrok ngrok 是一个反向代理&#…...

编程日记 2024/5/28 20:24:46

JAVA自制小游戏之推箱子

给家里孩子实现益智游戏开发，教会他怎么使用编程。以下是一个简单的推箱子游戏的Java实现，包含两个关卡： 这个程序包含两个关卡，每个关卡都是一个字符串表示的地图。游戏会提示玩家输入移动方向（WASD），然后根据输入的方向移动玩家。如果玩家成功将所有的箱子推到目标位…...

编程日记 2024/5/28 20:23:45

Media Encoder 2024 for Mac媒体编码器安装教程ME2024安装包下载

安装 步骤 1&#xff0c;双击打开下载好的安装包。 2&#xff0c;选择install ame_24...双击打开启动安装程序。 3&#xff0c;点击install。 4&#xff0c;输入电脑密码。 5&#xff0c;软件安装中... 6&#xff0c;安装结束点击好。 7&#xff0c;返回打开的镜像 选择激活补…...

编程日记 2024/5/28 20:22:43

B2120 单词的长度

单词的长度 题目描述 输入一行单词序列&#xff0c;相邻单词之间由 1 1 1 个或多个空格间隔&#xff0c;请对应地计算各个单词的长度。 注意&#xff1a;如果有标点符号&#xff08;如连字符&#xff0c;逗号&#xff09;&#xff0c;标点符号算作与之相连的词的一部分。没…...

编程日记 2024/5/28 20:21:42

分布式事务解决方案（最终一致性【可靠消息解决方案】）

可靠消息最终一致性解决方案 可靠消息最终一致性分布式事务解决方案指的是事务的发起方执行完本地事务之后&#xff0c;发出一条消息&#xff0c;事务的参与方&#xff0c;也就是消息的消费者一定能够接收到这条消息并且处理完成&#xff0c;这个方案强调的是只要事务发起方将消…...

编程日记 2024/5/28 20:20:41

AI预测福彩3D采取888=3策略+和值012路一缩定乾坤测试5月28日预测第4弹

昨天的第二套方案已命中&#xff0c;第一套方案由于杀了对子&#xff0c;导致最终出错。 今天继续基于8883的大底&#xff0c;使用尽可能少的条件进行缩号&#xff0c;同时&#xff0c;同样准备两套方案&#xff0c;一套是我自己的条件进行缩号&#xff0c;另外一套是8883的大底…...

编程日记 2024/5/28 20:19:40

JAVA：深入了解JAVA中的23种设计模式（三）- 行为型模式（下）

一、前言 在前三篇 《深入了解JAVA中的23种设计模式&#xff08;一&#xff09;- 创建型模式》 《深入了解JAVA中的23种设计模式&#xff08;二&#xff09;- 结构型模式》 《深入了解JAVA中的23种设计模式&#xff08;三&#xff09;- 行为型模式&#xff08;上&#xff09;》…...

编程日记 2024/5/28 20:18:39

微信小程序【WXML】

wxml wei xin markup language 类似于html 文档 数据绑定 小程序中使用{{}} 来进行数据绑定到模板中&#xff0c;如: wxml中的动态数据全部来自js中的data 简单绑定 //wxml <view> {{text }}</view>// index.js Page({data: {text: hello world}, })属性绑定…...

编程日记 2024/5/28 20:17:39

基于python实现的深度学习的车牌识别系统

基于python实现的深度学习的车牌识别系统 开发语言:Python 数据库&#xff1a;MySQL所用到的知识&#xff1a;Django框架工具&#xff1a;pycharm、Navicat、Maven 系统功能实现 登录页面 在车牌识别系统当中肯定是有登录的。怎么说呢&#xff0c;登录页面其实还是和最初的设…...

编程日记 2024/5/28 20:16:38

SQL试题使得每个学生 按照姓名的字⺟顺序依次排列 在对应的⼤洲下⾯

学⽣地理信息报告 学校有来⾃亚洲、欧洲和美洲的学⽣。 表countries 数据如下&#xff1a; namecontinentJaneAmericaPascalEuropeXiAsiaJackAmerica 1、编写解决⽅案实现对⼤洲&#xff08;continent&#xff09;列的 透视表 操作&#xff0c;使得每个学生 按照姓名的字⺟顺…...

编程日记 2024/5/28 20:15:36

kafka3.6.1版本学习

kafka目录结构 bin linux系统下可执行脚本文件 bin/windows windows系统下可执行脚本文件 config 配置文件 libs 依赖类库 licenses 许可信息 site-docs 文档 logs 服务日志 启动ZooKeeper 进入Kafka解压缩文件夹的config目录&#xff0c;修改zookeeper.properties配置文件 #t…...

编程日记 2024/5/28 20:14:35

移除链表元素-力扣

题目 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,6,3,4,5,6], val 6 输出&#xff1a;[1,2,3,4,5]示例 2&#xff1a; 输入&…...

编程日记 2024/5/28 20:13:34

虚实融合新纪元：UWB物理锚点 vs 镜像视界数维空间无感定位

虚实融合新纪元&#xff1a;UWB物理锚点 vs 镜像视界数维空间无感定位虚实融合产业正从“物理锚点绑定”迈向“数维空间原生映射”新纪元。UWB以基站与标签构建刚性物理坐标体系&#xff0c;是虚实同步的硬件依赖范式&#xff1b;镜像视界浙江科技有限公司以纯视觉AI重构空间感…...

编程新知 2026/5/21 16:36:12

如何用嘎嘎降AI处理心理学论文：心理学研究生毕业论文降AI4.8元完整操作教程

如何用嘎嘎降AI处理心理学论文&#xff1a;心理学研究生毕业论文降AI4.8元完整操作教程 关于心理学论文降AI教程&#xff0c;有几个细节提前知道能少走很多弯路。 核心用嘎嘎降AI&#xff08;www.aigcleaner.com&#xff09;&#xff0c;4.8元&#xff0c;达标率99.26%。这篇…...

编程新知 2026/5/21 16:24:06

Clutch故障排查手册：常见问题及解决方案汇总

Clutch故障排查手册&#xff1a;常见问题及解决方案汇总 【免费下载链接】clutch Extensible platform for infrastructure management 项目地址: https://gitcode.com/gh_mirrors/clu/clutch Clutch是一个可扩展的基础设施管理平台&#xff0c;旨在简化运维操作并提升开…...

编程新知 2026/5/21 15:46:03

零代码自动化终极指南：用taskt在5分钟内解放你的双手

零代码自动化终极指南&#xff1a;用taskt在5分钟内解放你的双手 【免费下载链接】taskt taskt (pronounced tasked and formely sharpRPA) is free and open-source robotic process automation (rpa) built in C# powered by the .NET Framework 项目地址: https://gitcode…...

编程新知 2026/5/21 15:29:27

ElevenLabs缅甸文语音准确率仅68.3%？实测对比5种预处理方案，第4种提升至92.7%（附Jupyter验证代码）

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;ElevenLabs缅甸文语音准确率实测基准与问题定位 为系统评估 ElevenLabs 对缅甸文&#xff08;Burmese, my-MM&#xff09;语音合成的准确性&#xff0c;我们在统一硬件环境&#xff08;Intel i7-11800H 32GB …...

编程新知 2026/5/21 15:09:17

【权威实测报告】：在137组对比测试中，仅2组prompt达成Apple Human Interface Guidelines认证级毛玻璃效果（附完整prompt审计清单）

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;【权威实测报告】&#xff1a;在137组对比测试中&#xff0c;仅2组prompt达成Apple Human Interface Guidelines认证级毛玻璃效果&#xff08;附完整prompt审计清单&#xff09; 为验证当前主流AI图像生成模型…...

编程新知 2026/5/21 14:51:19

平面四杆机构运动学分析与尺寸优化设计——基于MATLAB的完整实现

平面四杆机构运动学分析与尺寸优化设计——基于MATLAB的完整实现 摘要： 平面四杆机构是机械工程中最基础、应用最广泛的机构之一，其运动学特性直接影响整个机械系统的性能。本文以曲柄摇杆机构为研究对象，系统阐述基于闭环矢量法的运动学建模方法，通过MATLAB实现机构的位移…...

编程新知 2026/5/21 13:42:40

如何无限期使用Cursor AI编程助手：完整免费方案指南

如何无限期使用Cursor AI编程助手&#xff1a;完整免费方案指南 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your trial…...

编程新知 2026/5/21 13:33:49

6.6k Star 这个内网穿透神器，一行命令开通公网域名，前后端联调神器！

&#x1f449; 这是一个或许对你有用的社群&#x1f431; 一对一交流/面试小册/简历优化/求职解惑&#xff0c;欢迎加入「芋道快速开发平台」知识星球。下面是星球提供的部分资料&#xff1a; 《项目实战&#xff08;视频&#xff09;》&#xff1a;从书中学&#xff0c;往事中…...

编程新知 2026/5/21 13:13:14

Navicat Mac终极重置指南：3种简单方法快速恢复试用期

Navicat Mac终极重置指南&#xff1a;3种简单方法快速恢复试用期 【免费下载链接】navicat_reset_mac navicat mac版无限重置试用期脚本 Navicat Mac Version Unlimited Trial Reset Script 项目地址: https://gitcode.com/gh_mirrors/na/navicat_reset_mac 你是否正在使…...

编程新知 2026/5/21 13:02:51