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

news/2024/7/20 18:04:17/文章来源:https://blog.csdn.net/xingyu_qie/article/details/139271203

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

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

相关文章

CISCN——2024——re——app-debug

输入检查类题型 package com.example.re11113;import android.os.Bundle; import android.util.Log; import android.view.View.OnClickListener; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.Toast; im…

服务高峰期gc,导致服务不可用

随着应用程序的复杂性和负载的不断增加&#xff0c;对JVM进行调优&#xff0c;也是保障系统稳定性的一个重要方向。 需要注意&#xff0c;调优并非首选方案&#xff0c;一般来说解决性能问题还是要从应用程序本身入手&#xff08;业务日志&#xff0c;慢请求等&#xff09;&am…

[算法][数字][leetcode]2769.找出最大的可达成数字

题目地址 https://leetcode.cn/problems/find-the-maximum-achievable-number/description/ 题目描述 实现代码 class Solution {public int theMaximumAchievableX(int num, int t) {return num2*t;} }

记录一次安装k8s初始化失败

实例化 kubeadm init --configkubeadm.yaml --ignore-preflight-errorsSystemVerification报错 [init] Using Kubernetes version: v1.25.0 [preflight] Running pre-flight checks error execution phase preflight: [preflight] Some fatal errors occurred:[ERROR CRI]: co…

uniapp 使用vuex 在app上能获取到state,小程序获取不到

1. 在根目录下新建store目录, 在store目录下创建index.js定义状态值import Vue from vue; import Vuex from Vuex; import Vuex from vuex; Vue.use(Vuex);const store new Vuex.Store({ state: { login: false, token: , avatarUrl: , userName: }, mutations: { lo…

轻兔推荐 —— vfox

简介 vfox 是一个跨平台且可扩展的版本管理工具&#xff0c;终于有一个可以管理所有运行环境的工具了 - 支持一键安装 Java、Node.js、Flutter、.Net、Golang、PHP、Python等多种环境 - 支持一键切换不同版本 特点 支持Windows(非WSL)、Linux、macOS! 支持不同项目不同版本、…

Spark项目实训(一)

目录 实验任务一&#xff1a;计算级数 idea步骤分步&#xff1a; 完整代码&#xff1a; linux步骤分布&#xff1a; 实验任务二&#xff1a;统计学生成绩 idea步骤分布&#xff1a; 完整代码&#xff1a; linux步骤分步&#xff1a; 实验任务一&#xff1a;计算级数 请…

力扣106. 从中序与后序遍历序列构造二叉树

Problem: 106. 从中序与后序遍历序列构造二叉树 文章目录 题目描述思路复杂度Code 题目描述 思路 具体思路参考&#xff1a; Problem: 力扣105. 从前序与中序遍历序列构造二叉树 再后序遍历中&#xff1a;每次取int rootVal postorder[postEnd];构造根节点&#xff1b;左子树…

Pytorch环境配置2.0.1+ Cuda11.7

查找cuda、cudnn、Pytorch(GPU)及cuda和NVIDIA显卡驱动对应关系 查询可支持的最高cuda版本 nvidia-smi查看支持的cuda的版本 CUDA版本对应表 我的显卡驱动是Driver Version&#xff1a;535.40.&#xff0c;那么左边对应的CUDA都可以兼容 右上角为CUDA 版本&#xff0c;可以看…

java面试框架篇(Spring常见问题、SpringBoot、SpringMVC、mybatis经典问题、SpringCloud组件)

文章目录 面试专题-java框架篇1. spring常见问题1.1. spring是什么?1.2. 谈谈你对AOP的理解1.3. 谈谈你对IOC的理解1.4. Spring Boot、 Spring MVC和Spring有什么区别1.5. spring bean 生命周期1.6. spring事务传播机制有哪些?1.7. 循环依赖1.8. spring框架中使用了哪些设计模…

作为一名前端工程师,该如何控制高并发请求呢?「如果有更好的方案,欢迎讨论」

假如现在有几十、上百个请求&#xff0c;我们该如何去控制这么高的并发呢&#xff1f; 给你一分钟时间&#xff0c;稍作思考 &#xff5e; &#x1f914; 此场景有很多&#xff0c;比如 图片或文件批量下载、RSSHub高速抓取内容。。。 第一想法是不是请求池&#xff01;&…

虚拟化技术[1]之服务器虚拟化

文章目录 虚拟化技术简介数据中心虚拟化 服务器虚拟化服务器虚拟化层次寄居虚拟化裸机虚拟化VMM无法直接捕获特权指令解决方案 服务器虚拟化底层实现CPU虚拟化内存虚拟化I/O设备虚拟化 虚拟机迁移虚拟机动态迁移迁移内容&#xff1a;内存迁移迁移内容&#xff1a;网络资源迁移迁…

NSSCTF | [SWPUCTF 2021 新生赛]no_wakeup

打开题目后&#xff0c;点击三个&#xff1f;&#xff0c;发现是一个php序列化脚本 <?phpheader("Content-type:text/html;charsetutf-8"); error_reporting(0); show_source("class.php");class HaHaHa{public $admin;public $passwd;public function…

2024第三届AIGC开发者大会圆桌论坛:AI Agent中国落地发展现状及多模态结合具身智能的发展展望

在2024年第三届AIGC开发者大会上&#xff0c;多位业内专家齐聚一堂&#xff0c;共同探讨了AI Agent在中国的落地发展现状以及多模态结合具身智能的发展前景。本次圆桌论坛的嘉宾包括&#xff1a; Fast JP作者于金龙Agent创始人莫西莫必胜作者秦瑞January Agent创始人李晨 多模…

Cesium For Unity 在Unity中无法下载的问题

Unity 下载失败&#xff0c;提供百度网盘“com.cesium.unity-1.10.0.tgz”下载链接 链接&#xff1a;https://pan.baidu.com/s/1PybXQ8EvkRofOKD6rSN66g?pwd1234 提取码&#xff1a;1234 导入方法&#xff1a; 1.打开PackageManager;Window-PackageManager 2.在PackageMan…

Vue3:封装Table 表格组件

组件官网 elementPlus : 点击跳转 封装组件 创建新的组件文件: Table.vue <!-- PropTableS &#xff1a; 父组件传递过来的数据 (对象)PropTableS.tables : 父组件传递的对象中 存放表格每行显示的数据PropTableS.keyS &#xff1a; 父组件传递过来的对象&#xff0c;里…

Golang实现递归复制文件夹

代码 package zdpgo_fileimport ("errors""os""path/filepath""strings" )// CopyDir 复制文件夹 // param srcPath 源文件夹 // param desPath 目标文件夹 // return error 错误信息 func CopyDir(srcPath, desPath string) error {…

6岁开始学习打字,10岁学懂文字编程

​你们有没有想过打字速度会影响Coding 编程能力&#xff1f; 疫情期间&#xff0c;全国中小学均不定期停止面授课程&#xff0c;改为网上教学。顷刻之间&#xff0c;电脑、智能手机等即时通讯软件成为每日学习的「良师益友」&#xff0c;常伴左右。 同时&#xff0c;学生也由…

每天五分钟深度学习框架PyTorch:创建具有特殊值的tensor张量

本文重点 tensor张量是一个多维数组,本节课程我们将学习一些pytorch中已经封装好的方法,使用这些方法我们可以快速创建出具有特殊意义的tensor张量。 创建一个值为空的张量 import torch import numpy as np a=torch.empty(1) print(a) print(a.dim()) print(s.shape) 如图…

本地部署 MiniCPM-Llama3-V 2.5

本地部署 MiniCPM-Llama3-V 2.5 0. 引言1. 性能评估2. 典型示例3. 本地部署4. 运行 WebUI Demo5. vLLM 部署 0. 引言 MiniCPM-Llama3-V 2.5 是 MiniCPM-V 系列的最新版本模型&#xff0c;基于 SigLip-400M 和 Llama3-8B-Instruct 构建&#xff0c;共 8B 参数量&#xff0c;相较…