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

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

news 2026/2/9 12:43:36

六一儿童节快到了，这是一个充满童趣和欢乐的日子。为了给孩子们增添一份节日惊喜，我们决定用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

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/17 7:25:07

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2026/2/7 17:29:24

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

编程新知 2026/1/31 15:00:15

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/11/9 19:17:07

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2026/2/9 1:38:05

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2026/1/28 3:43:20

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2026/2/8 10:51:42

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2026/1/31 11:13:53

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/9/13 16:17:01

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

编程新知 2025/12/4 0:13:33