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

news2024/9/23 15:29:13

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1706619.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

unity接入live2d

unity接入live2d

在bilibili上找到一个教程&#xff0c;首先注意一点&#xff0c;你直接导入那个sdk&#xff0c;并且打开示例&#xff0c;显示的模型是有问题的&#xff0c;你需要调整模型上脚本的一个枚举值&#xff0c;调整它的渲染顺序是front z to我看教程时候&#xff0c;很多老师都没有提…
阅读更多...
Python魔法之旅-魔法方法(01)

Python魔法之旅-魔法方法(01)

目录 一、概述 1、定义 2、作用 二、主要应用场景 1、构造和析构 2、操作符重载 3、字符串和表示 4、容器管理 5、可调用对象 6、上下文管理 7、属性访问和描述符 8、迭代器和生成器 9、数值类型 10、复制和序列化 11、自定义元类行为 12、自定义类行为 13、类…
阅读更多...
SpringJDBC

SpringJDBC

1.前言 Spring JDBC可以帮助开发者节省大量开发工作 自动去处理一些低级细节 比如&#xff1a;异常处理、打开和关闭资源(Connection、PreparedStatement、Statement、ResultSet) 需要下载的jar包&#xff1a; spring-jdbc(普通jar包、源码jar包)由于没有依赖其他的jar包 所以只…
阅读更多...
Kubernetes——监听机制与调度约束

Kubernetes——监听机制与调度约束

目录 前言 一、监听机制 1.Pod启动创建过程 2.调度过程 1.指定调度节点 1.1强制匹配 1.2强制约束 二、硬策略和软策略 1.键值运算关系 1.硬策略——requiredDuringSchedulingIgnoredDuringExecution 2.软策略——preferredDuringSchedulingIgnoredDuringExecution …
阅读更多...
像素匹配+均值homograph+结果

像素匹配+均值homograph+结果

1. 像素匹配 2. 均值homography 转换前转换后 3. 比较 基准图转换图
阅读更多...
yolov系列

yolov系列

学习一个深度学习网络&#xff0c;就看三点&#xff0c;1. 网络架构 2.输入输出 3.损失函数 yolov1 2015年诞生的YOLOv1创造性地使用端到端结构完成了物体检测任务&#xff0c;把检测问题转换成了回归问题&#xff0c;直接预测物体的类别和位置。 每个grid有30维&#xff0c;…
阅读更多...
选择海外代理IP需要注意什么？

选择海外代理IP需要注意什么？

跨境电商近年来的兴起与发展&#xff0c;越来越多的跨境从业者从事该行业&#xff0c;但在从事跨境贸易中则需要海外IP代理来突破地域限制、提升访问速度和稳定性、防止账号关联以及保护隐私和安全。这些功能都有助于跨境电商企业在全球范围内拓展业务&#xff0c;提升竞争力&a…
阅读更多...
基于RT-Thread的自控停车场

基于RT-Thread的自控停车场

1.系统板原理图设计 2.系统板PCB设计 3. 屏幕和QT设计 (1)QT设计 (2)屏幕显示 4. 实物图 基于RT-Thread实时操作系统的停车场系统。 5. 车牌识别演示 识别车牌 6. 结果演示 基于RT-Thread的停车场系统
阅读更多...
【一小时学会Charles抓包详细教程】免费安装Charles (2)

【一小时学会Charles抓包详细教程】免费安装Charles (2)

&#x1f680; 个人主页 极客小俊 ✍&#x1f3fb; 作者简介&#xff1a;程序猿、设计师、技术分享 &#x1f40b; 希望大家多多支持, 我们一起学习和进步&#xff01; &#x1f3c5; 欢迎评论 ❤️点赞&#x1f4ac;评论 &#x1f4c2;收藏 &#x1f4c2;加关注 Charles安装 …
阅读更多...
曼城四连冠，剑南春与万千球迷共同见证“荣耀时刻”

曼城四连冠，剑南春与万千球迷共同见证“荣耀时刻”

执笔 | 洪大大 编辑 | 扬 灵 5月19日&#xff0c;英超2023-2024赛季第38轮比赛全面开打&#xff0c;凭借队员的出色发挥&#xff0c;曼城最终以3-1战胜西汉姆联&#xff0c;成功捧起了英超联赛的奖杯&#xff0c;成为英格兰足球顶级联赛100多年历史上第一支成就四连冠的豪门…
阅读更多...
本特利330180-51-00前置器在工业自动化中的应用与优势

本特利330180-51-00前置器在工业自动化中的应用与优势

本特利330180-51-00前置器在工业自动化中的应用与优势 作为PLC技术员&#xff0c;在工业自动化领域中&#xff0c;我们经常接触到各种传感器和前置器。其中&#xff0c;本特利330180-51-00前置器以其卓越的性能和广泛的应用领域&#xff0c;受到了业界的广泛关注。本文将详细介…
阅读更多...
Diffusion Model, Stable Diffusion, Stable Diffusion XL 详解

Diffusion Model, Stable Diffusion, Stable Diffusion XL 详解

文章目录 Diffusion Model生成模型DDPM概述向前扩散过程前向扩散的逐步过程前向扩散的整体过程 反向去噪过程网络结构训练和推理过程训练过程推理过程优化目标 详细数学推导数学基础向前扩散过程反向去噪过程 Stable Diffusion组成结构运行流程网络结构变分自编码器 (VAE)文本编…
阅读更多...
【JavaEE初阶】HTTP协议|HTTP请求方法|GET|POST|GET和POST的区别|问题辨析

【JavaEE初阶】HTTP协议|HTTP请求方法|GET|POST|GET和POST的区别|问题辨析

目录 认识"⽅法"(method) 1.GET⽅法 GET请求的特点 2.POST⽅法 POST请求的特点 &#x1f4a1;经典⾯试题:谈谈GET和POST的区别 &#x1f4a1;问题辨析&#xff1a; 3.其他⽅法 &#x1f4a1;推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂…
阅读更多...
范罗士、希喂、安德迈爆款宠物空气净化器哪款好？深度对比测评

范罗士、希喂、安德迈爆款宠物空气净化器哪款好？深度对比测评

作为一名深受养猫过敏困扰的铲屎官&#xff0c;我经常提醒新手铲屎官重视家里的空气环境。宠物的浮毛和皮屑不仅会引发过敏&#xff0c;还可能传播细菌和病毒。很多人以为普通空气净化器能解决问题&#xff0c;但这些产品并未针对宠物家庭的特殊需求。经过多次研究和测试&#…
阅读更多...
第三方软件检测机构要具备哪些资质要求?专业测试报告如何申请?

第三方软件检测机构要具备哪些资质要求?专业测试报告如何申请?

第三方软件检测机构是独立于软件开发商和用户之外的公正机构&#xff0c;负责对软件进行全面的检测和评估。其独立性保证了评测结果的客观性和公正性&#xff0c;有效避免了软件开发商对自身产品的主观偏见和误导。 要成为一家合格的第三方软件检测机构&#xff0c;需要具备一…
阅读更多...
使用WebStorm如何调试Vue代码

使用WebStorm如何调试Vue代码

大家好&#xff0c;我是咕噜铁蛋。今天&#xff0c;我想和大家分享一下如何使用WebStorm这款强大的IDE&#xff08;集成开发环境&#xff09;来调试Vue代码。Vue.js作为现代前端开发的利器&#xff0c;其强大的组件化开发能力和简洁的API深受开发者喜爱。然而&#xff0c;随着项…
阅读更多...
外卖系统源码解读：校园外卖APP开发全攻略

外卖系统源码解读：校园外卖APP开发全攻略

外卖系统源码解读&#xff1a;校园外卖APP开发全攻略 今天&#xff0c;小编将深入解读外卖系统的源码&#xff0c;详细介绍如何开发一款功能齐全的校园外卖APP&#xff0c;帮助开发者快速上手&#xff0c;打造出高质量的外卖应用。 一、需求分析 应具备以下基本功能&#xff…
阅读更多...
LVM、磁盘配额

LVM、磁盘配额

LVM与磁盘配额 一、LVM LVM(逻辑卷管理)&#xff1a;是Linux系统下对硬盘分区的管理机制。 LVM机制适合于管理管理大存储设备。可以动态对硬盘进行扩容。 逻辑上的磁盘&#xff0c;概念上的磁盘&#xff0c;文件系统创建之后不考虑底层的物理磁盘。 若干个磁盘分区或者物理…
阅读更多...
定积分的应用

定积分的应用

目录 前提知识 考题类型&#xff1a;平面图形面积、旋转体体积、旋转体侧面积、平面曲线弧长 两种坐标&#xff1a;极坐标和直角坐标系 求解思路&#xff1a; 注意&#xff1a; 1:平面图形的面积&#xff1a; 常见模型&#xff1a; 面积元素的两种表达&#xff1a;积分区…
阅读更多...
Git-01

Git-01

Git是一个免费且开源的分布式版本控制系统&#xff0c;它可以跟踪文件的修改、记录变更的历史&#xff0c;并且在多人协作开发中提供了强大的工具和功能。 Git最初是由Linus Torvalds开发的&#xff0c;用于Linux内核的开发&#xff0c;现在已经成为了广泛使用的版本控制系统&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023