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

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

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

相关文章

第一个Flutter3项目

第一个Flutter3项目

配置flutter国内源 首先&#xff0c;配置flutter的国内源&#xff1a; env:PUB_HOSTED_URL"https://pub.flutter-io.cn"; env:FLUTTER_STORAGE_BASE_URL"https://storage.flutter-io.cn"配置gradle国内源 修改gradle\wrapper\gradle-wrapper.properties…
阅读更多...
组件的传参等

组件的传参等

一:组件的生命周期函数 组件的生命周期函数: created只是创建了组件内的实例对象 attached,给组件实例绑定了属性,绑定到页面节点树之后 ready准备好渲染之后,还未渲染之前 moved组件实例被移动到另一个位置后执行 detached在整个组件被被移除执行 error执行的时候,组件内…
阅读更多...
yolo 算法 易主

yolo 算法 易主

标题&#xff1a;YOLOv10: Real-Time End-to-End Object Detection 论文&#xff1a;https://arxiv.org/pdf/2405.14458ethttps%3A//arxiv.org/pdf/2405.14458.zhihu.com/?targethttps%3A//arxiv.org/pdf/2405.14458 源码&#xff1a;https://github.com/THU-MIG/yolov10 分析…
阅读更多...
N进制计数器【02】

N进制计数器【02】

大容量N进制计数器 集成计数器容量的扩展 集成计数器级联扩展容量 【例1】由两片 74LS161 级联组成 256 进制&#xff08;8位二进制&#xff09;同步加法计数器 【解】级联时&#xff0c;外加时钟信号同时接到各片计数器的时钟输入端&#xff0c;用前级计数器的进位输出 C…
阅读更多...
Transformer模型架构笔记

Transformer模型架构笔记

0. 简介 Transformer是一种用于自然语言处理&#xff08;NLP&#xff09;和其他序列到序列&#xff08;sequence-to-sequence&#xff09;任务的深度学习模型架构&#xff0c;它在2017年由Vaswani等人首次提出。Transformer架构引入了自注意力机制&#xff08;self-attention …
阅读更多...
JUC笔记

JUC笔记

1、什么是 JUC JUC就是 java.util 下的工具包、包、分类等。 普通的线程代码&#xff1a; ThreadRunnable 没有返回值、效率相比入 Callable 相对较低&#xff01;Callable 有返回值&#xff01; 2、线程和进程 线程、进程&#xff0c;如果不能使用一句话说出来的技术&#x…
阅读更多...
对北京新发地当时菜品三十天内价格分布式爬取（1）---(获取当时菜品数据并构建请求数据推入redis)

对北京新发地当时菜品三十天内价格分布式爬取（1）---(获取当时菜品数据并构建请求数据推入redis)

本次项目网页url 北京新发地: http://www.xinfadi.com.cn/priceDetail.html 我们首先创建一个爬虫用于收集url与请求的data然后b,c,d使用RedisCrawlSpider来对数据进行分布式爬取 在此篇中我们仅介绍爬虫a 一.获取当天所有菜品数据 这是一条请求的负载我们只需要对pubDateSta…
阅读更多...
Objective-C爬虫：实现动态网页内容的抓取

Objective-C爬虫：实现动态网页内容的抓取

在当今的互联网时代&#xff0c;数据的获取和分析变得日益重要。无论是进行市场研究、用户行为分析还是产品开发&#xff0c;获取大量数据都是不可或缺的一环。然而&#xff0c;很多有价值的信息都隐藏在动态加载的网页中&#xff0c;这些网页通过JavaScript动态生成内容&#…
阅读更多...
本特利330180-51-00前置器在工业自动化中的应用与优势

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

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

sqli-labs---第三关

1、判断什么类型注入 ?id1 正常显示 ?id1 &#xff08;报错&#xff1a;1) LIMIT 0,1&#xff09; ?id1 正常显示 ?id1#(报错&#xff1a;1) LIMIT 0,1) 可知闭合方式为) 2、查看列数 ?id1) order by 3 -- (没有报错) ?id1) order by 4 -- (报错) 说明有3列 3、使用联合查…
阅读更多...
2024下半年BRC-20铭文发展趋势预测分析

2024下半年BRC-20铭文发展趋势预测分析

自区块链技术诞生以来&#xff0c;其应用场景不断扩展&#xff0c;代币标准也在不断演进。BRC-20铭文作为基于比特币区块链的代币标准&#xff0c;自其推出以来&#xff0c;因其安全性和去中心化特性&#xff0c;受到了广泛关注和使用。随着区块链技术和市场环境的不断变化&…
阅读更多...
ARM架构与分类

ARM架构与分类

ARM架构&#xff0c;曾称进阶精简指令集机器&#xff08;Advanced RISC Machine&#xff09;更早称作Acorn RISC Machine&#xff0c;是一个32位精简指令集&#xff08;RISC&#xff09;处理器架构。 主要是根据FPGA zynq-7000的芯片编写的知识思维导图总结&#xff0c;没有会…
阅读更多...
WordPress子比主题美化-首页动态的图片展示

WordPress子比主题美化-首页动态的图片展示

WordPress子比主题首页动态的图片展示 WordPress子比主题首页添加动态的图片展示&#xff0c;其他程序也可以用&#xff0c;复制代码到相应位置即可&#xff0c;也可作为指定分类&#xff0c;重点内容等&#xff0c;可以适合各个场景&#xff0c;需要的自取。 图片展示: 教程…
阅读更多...
【图书推荐】《机器学习实战（视频教学版）》

【图书推荐】《机器学习实战（视频教学版）》

本书用处 快速入门Python机器学习基础算法。 最后3个综合实战项目&#xff08;包括新闻内容分类实战、泰坦尼克号获救预测实战、中药数据分析项目实战&#xff09;可以作为研究可以的素材。 内容简介 本书基于Python语言详细讲解机器学习算法及其应用&#xff0c;用于读者快…
阅读更多...
重庆耶非凡科技有限公司的选品师项目靠谱吗？

重庆耶非凡科技有限公司的选品师项目靠谱吗？

在跨境电商和零售市场日益繁荣的今天&#xff0c;选品师的角色愈发凸显出其重要性。重庆耶非凡科技有限公司作为一家致力于多元化服务的科技公司&#xff0c;其选品师项目备受关注。那么&#xff0c;重庆耶非凡科技有限公司的选品师项目靠谱吗?接下来&#xff0c;我们将从多个…
阅读更多...
钉钉企业内部H5微应用或小程序之钉消息推送

钉钉企业内部H5微应用或小程序之钉消息推送

钉钉简单的推送钉消息 一、钉钉准备工作 首先进入钉钉开放平台 你得有企业内部微应用或者小程序 没有创建的话去看我另一篇文章有说明 钉钉开放平台创建企业内部H5微应用或者小程序-CSDN博客 看不懂话也可以参考官方文档&#xff1a;创建应用 - 钉钉开放平台 二、开发的准备…
阅读更多...
黑马聚合的分类及实现

黑马聚合的分类及实现

1、什么是聚合? 聚合是对文档数据的统计、分析、计算 聚合的常见种类有哪些? 桶(Bucket)聚合:用来对文档做分组 TermAggregation:按照文档字段值分组 Date Histogram:按照日期阶梯分组&#xff0c;例如一周为一组&#xff0c;或者一月为一组 度量(…
阅读更多...
抖店的注意事项，2024新版，照做即可！

抖店的注意事项，2024新版，照做即可！

我是王路飞。 如果你想做抖店&#xff0c;但还没开通抖店的话&#xff0c;那这篇文章算你刷着了。 先别着急开店&#xff0c;把这篇文章看完&#xff0c;再开店也不迟&#xff0c;能帮你少走很多开店、做店阶段的弯路。 内容来源于【电商王路飞】 第一个注意事项&#xff0c…
阅读更多...
基于Spring+Struts2+Hibernate+MySQL的个人网上银行

基于Spring+Struts2+Hibernate+MySQL的个人网上银行

## 系统概述该系统采用SpringHibernateStruts2框架搭建&#xff0c;实现了登录、退出功能。不同账号之间进行转账功能&#xff0c;查询转账记录功能&#xff0c;修改登录密码功能。## 使用方法* 将项目导入idea&#xff0c;修改hibernate.cfg.xml中的数据库用户名、密码等信息…
阅读更多...
文件压缩-42的魅力

文件压缩-42的魅力

让我们以一个非常简单的程序为例&#xff0c;一个什么都不做的程序 将数字返回给操作系统。为什么不呢&#xff1f;毕竟&#xff0c;Unix 已经附带了不少于两个这样的程序&#xff1a;true 和 假。由于已经取了 0 和 1&#xff0c;我们将使用数字 42。 所以&#xff0c;这是我…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023