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

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

news 2025/6/3 19:54:01

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

openfeignFeign 客户端禁用 SSL

要针对特定的 Feign 客户端禁用 SSL 验证&#xff0c;可以通过自定义配置类实现。以下是完整解决方案&#xff1a; 1. 创建自定义配置类&#xff08;禁用 SSL 验证&#xff09; import feign.Client; import feign.httpclient.ApacheHttpClient; import org.apache.http.conn…...

编程新知 2025/6/3 18:39:33

设计模式——命令设计模式（行为型）

摘要 本文介绍了命令设计模式&#xff0c;这是一种行为型设计模式&#xff0c;用于将请求封装为对象&#xff0c;实现请求的解耦和灵活控制。它包含命令接口、具体命令、接收者、调用者和客户端等角色&#xff0c;优点是解耦请求发送者与接收者&#xff0c;支持命令的排队、记…...

编程新知 2025/6/3 17:47:04

一步一步配置 Ubuntu Server 的 NodeJS 服务器详细实录——3. 服务器软件更新，以及常用软件安装

前言 前面&#xff0c;我们已经 安装好了 Ubuntu 服务器系统&#xff0c;并且 配置好了 ssh 免密登录服务器 &#xff0c;现在&#xff0c;我们要来进一步的设置服务器。 那么&#xff0c;本文&#xff0c;就是进行服务器的系统更新&#xff0c;以及常用软件的安装 调整 Ubu…...

编程新知 2025/6/3 17:23:24

Pytorch的梯度控制

在之前的实验中遇到一些问题&#xff0c;因为之前计算资源有限&#xff0c;我就想着微调其中一部分参数做&#xff0c;于是我误打误撞使用了with torch.no_grad&#xff0c;可是发现梯度传递不了&#xff0c;于是写下此文来记录梯度控制的两个方法与区别。 在PyTorch中&#x…...

编程新知 2025/6/3 16:41:00

Linux操作系统安全管理概述与命令操作

前言&#xff1a; 1.本文将详细描述让读者了解Linux操作系统安全管理的概述和SELinux安全上下文以及基础操作命令&#xff1b; 2.本文将让读者掌握Linux操作系统防火墙firewall的结构和命令使用方法&#xff1b; 3.了解Iptables防火墙配置的结构与特点以及…...

编程新知 2025/6/3 16:03:08

类和对象：实现日期类

目录 概述 一.实现日期类的基本框架 二.实现比较的运算符重载 1.>的运算符重载 2.的运算符重载 3.其余的比较运算符重载 三.加减天数的运算符重载 1.,的运算符重载 2.-&#xff0c;-的运算符重载 3.对1和2的小优化 四.两个日期类相减的重载 1.&#xff0c;--的重…...

编程新知 2025/6/3 12:08:02

Unity 环境搭建

Unity是一款游戏引擎&#xff0c;可用于开发各种类型的游戏和交互式应用程序。它由Unity Technologies开发&#xff0c;并在多个平台上运行&#xff0c;包括Windows、macOS、Linux、iOS、Android和WebGL。Unity也支持虚拟现实(VR)和增强现实(AR)技术&#xff0c;允许用户构建逼…...

编程新知 2025/6/3 11:32:45

Mybatis框架各配置文件主要内容详解(二)

ResultMap解决了数据库字段与实体类之间不一致导致的问题 <!--resultMap&#xff1a;设置自定义映射属性&#xff1a;id&#xff1a;表示自定义映射的唯一标识type&#xff1a;查询的数据要映射的实体类的类型子标签&#xff1a;id&#xff1a;设置主键的映射关系result&…...

编程新知 2025/6/3 7:05:56

rtpmixsound：实现音频混音攻击！全参数详细教程！Kali Linux教程！

简介 一种将预先录制的音频与指定目标音频流中的音频&#xff08;即 RTP&#xff09;实时混合的工具。 一款用于将预先录制的音频与指定目标音频流中的音频&#xff08;即 RTP&#xff09;实时混合的工具。该工具创建于 2006 年 8 月至 9 月之间。该工具名为 rtpmixsound。它…...

编程新知 2025/6/3 5:45:07

第32次CCF计算机软件能力认证-2-因子化简

因子化简 刷新 时间限制&#xff1a; 2.0 秒 空间限制&#xff1a; 512 MiB 下载题目目录&#xff08;样例文件&#xff09; 题目背景 质数&#xff08;又称“素数”&#xff09;是指在大于 11 的自然数中&#xff0c;除了 11 和它本身以外不再有其他因数的自然数。 题…...

编程新知 2025/6/3 5:37:44