css 实现满屏升空的气球动画

news2024/11/25 13:42:11

最终实现效果

demo放在最后了。。。。

问题一

怎么实现满屏气球？简单理解就是多个气球的合并，难道要写多个盒子吗？确实是这样子，但可以有更好的办法，其实就是通过原生操作多个盒子生成，所以只需要实现一个颜色、大小、位置可自定义的气球即可。

问题二

如何实现一个气球？

从图上我们可以找出四个点：红气球、红气球上的白椭圆、捆绑气球、气球棒、气球口。我们真正渲染就两个盒子，

设置气球：包括气球、气球捆绑、气球棒，通过两个盒子实现，借助伪元素:before、:after在元素前后添加相关样式实现。

实现步骤

step1 定义气球的样式，并在气球上添加白色椭圆形。
step2 定义气球棒和气球口。
step3 设置气球动画：实现气球从下到上匀速移动就可以升空了。
step4 设置气球颜色、大小、位置变量。
step5 生成多个气球盒子，将变量传入。

涉及的知识点

1、border-radius

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性 ，分别是以下组成： 左上圆角半径：border-top-left-radius， 右上圆角半径：border-top-right-radius， 右下圆角半径：border-bottom-right-radius， 左下圆角半径：border-bottom-left-radius

形式定义

初始值as each of the properties of the shorthand:border-top-left-radius: 0border-top-right-radius: 0border-bottom-right-radius: 0border-bottom-left-radius: 0

属性值个数为 1 ；

border-radius: 40px;

它表示该元素的四个方向的圆角大小都是一样的。

属性值个数为 2 ；

border-radius: 40px 10px;

第一个值表示左上角和右下角(对角)，第二个值表示右上角和左下角(对角)

属性值个数为 3 ；

border-radius: 40px 20px 10px;

第一个值表示左上角，第二个值表示右上角和左下角(对角)，第三个值表示右下角

属性值个数为 4 ；

border-radius: 40px 30px 20px 10px;

分别代表：左上角、右上角、右下角、左下角(顺时针方向)

在上述用法中，每个圆角的“水平半径”与“垂直半径”都是相同的，当然也可以分别设置。

完整形式语法

border-radius = <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]? <length-percentage> = <length> | <percentage>

border-radius属性带了/符号，第一组值表示“水平半径”，第二组值表示“垂直半径”，每组值同时可以设置 1 个到 4 个值，规则与之前相同。

通过画一个🥚来帮助更好的理解把！

border-radius: 75px 75px 75px 75px/125px 125px 75px 75px;

异形图快捷生成icon-default.png?t=N7T8https://9elements.github.io/fancy-border-radius/#50.100.40.32--.

2、calc函数

calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

任何长度值都可以使用calc()函数进行计算；

calc()函数支持 "+", "-", "*", "/" 运算；

calc()函数使用标准的数学运算优先级规则；

自动调整表单域的大小以适应其容器的大小

calc() 的另外一个用例是用来确保一个表单域的大小适合当前的可用空间，而不会在保持合适的外边距的同时，因挤压超出其容器的边缘。

3、vmin、vmax

（1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。

        视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

（2）具体描述如下：

        vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）

        vh：视窗高度的百分比

        vmin：当前 vw 和 vh 中较小的一个值

        vmax：当前 vw 和 vh 中较大的一个值

（3）vmin、vmax 用处

        做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是一样的。

4、Hsla函数

定义与用法

hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。

HSLA 即色调、饱和度、亮度、透明度（英语：Hue, Saturation, Lightness, Alpha ）。

（1）色调：hue

          亮度的单位可以是度、弧度、梯度或者转角，如果传参时不带单位，则默认为度。根据色轮（也叫色盘、色彩三原色的色环）定义，红色为0度，其他的颜色均匀分布在圆的周围，比如：绿色是120度、蓝色是240度等等。

  有时，我们可以使用负的角度值来定义色调，因为圆的角度的周期性，因此，-120度=-120+360=240度。

  如果使用大于360度的色调参数，则等同于其减去N个360度得出的小于360度的角度值，如480度=480-360=120度。

（2）饱和度：saturation

        饱和度的范围为0%-100%，0%代表完全不饱和，100%代表完全饱和。

（3）亮度：lightness

        亮度值的取值范围为0%-100%，亮度为0%代表黑色，亮度为50%时代表正常，100%时为白色。

（4）透明度： 可选参数alpha

        透明度的取值范围为0-1，可以是用小数形式也可使用百分比形式，1对应100%代表完全不透明，0对应0%代表完全透明。

⚠️需要注意的是：饱和度和亮度不同于透明度可用小数表示，饱和度和亮度参数必须使用百分比形式，如不可用0.5表示50%，虽然他们在数值上是相等的。

hsl()函数和hsla()函数的使用

hsl()函数经常和conic-gradient()函数一起使用，因为两者都是处理角度。如我们使用CSS制作一个色相环效果，代码如下：

.box {
    width: 200px;
    height: 200px;
    background: conic-gradient(hsl(0, 100%, 50%), hsl(45, 100%, 50%), hsl(90, 100%, 50%), hsl(135, 100%, 50%), hsl(180, 100%, 50%), hsl(225, 100%, 50%), hsl(270, 100%, 50%), hsl(315, 100%, 50%), hsl(360, 100%, 50%));
    clip-path: circle(closest-side);
}

效果如下：

5、css全局变量和局部变量

(1）设置全局变量

CSS全局变量的声明是在变量名称前加两个中横线--。

body {
    --Color: #2C51CD;
    --BackGround: #B4D4FD;
}

:root {
    --Color: #2C51CD;
    --BackGround: #B4D4FD;
}

💡上述代码中，body选择器中声明了Color和BackGround两个变量。而使用--是因为$被Sass占用了，@被Less占用了。

⚠️变量的声明对大小写敏感。如：Color和color表示两个不同的变量。

（2）设置局部变量

其实设置局部变量和全局变量的方式大致一致，具体操作如下：

        a.如果我们需要在一个id为box的容器内声明一个局部变量，让其在整个box容器内都是可调用的，我们可以如下操作：

#box{ 
    --cssname : value; 
}

//此变量的作用域仅限于在#box容器的任何子元素，调用方法如下：

#box .child{ 
    color : var(--cssname) 
}

        b.局部变量定义在元素标签的行内式 style 中，表示只作用于当前元素标签。

<div class="text" style="--font-size:20px">var 函数</div>

6、var函数

（1）读取变量，使用var()函数来读取变量。

p { 
    background: var(--Color); 
}

（2）var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

p { 
    background: var(--Color, #2C51CD); 
}

（3）第二个参数不处理内部的逗号或空格，都视作参数的一部分。

p {
    font-family: var(--fontF, "Roboto", "Helvetica");
    margin: var(--Margins, 15px 20px 25px);
}

（4）var()函数还可以用在变量声明中

body { 
    --Color: #2C51CD; 
    --BackGround: var(--Color); 
}

（5）变量只能作为属性值，不能作为属性名

（6）变量值的类型

        a.如果变量值是字符串，则可以与其他字符串拼接

:root { 
    --Hi: 'hello';
    --Name: var(--Hi)',world'; 
}

        b.如果是数值，则不可以拼接

:root { 
    --pSizeVal: 20; 
    --pSize: var(--pSizeVal)'px'; //无效 
}

        但可以通过calc()函数，将他们拼接起来

:root {
    --pSizeVal: 20; 
    --pSize: calc(var(--pSizeVal)*1px); 
}

        c.如果变量值带单位，则不能写成字符串形式

:root { 
    --pSize: '20px'; 
    margin-top: var(--pSize); //无效 
} 
:root { 
    --pSize: 20px; 
    margin-top: var(--pSize); //有效 
}

代码地址

https://github.com/14130110048/balloon

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

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

相关文章

【JavaWeb学习笔记】13 - JSP浏览器渲染技术

【JavaWeb学习笔记】13 - JSP浏览器渲染技术

项目代码 https://github.com/yinhai1114/JavaWeb_LearningCode/tree/main/jsp 目录 项目代码 JSP 一、JSP引入 1.JSP现状 2.为什么需要JSP 二、JSP基本原理及使用 1.基本介绍 2.快速入门 ​编辑 3.JSP运行原理 4.page指令 三、JSP三种常用的脚本 1.声明脚本基本语…
阅读更多...
做到这两条，破解35岁中年危机

做到这两条，破解35岁中年危机

最近我在看吴军老师的《富足》这本书&#xff0c;其中有一篇文章讲的是如何破解35岁中年危机&#xff0c;我觉得讲清楚了这个问题的本质&#xff0c;我在这里分享给你&#xff0c;以下内容大部分摘抄自《破解35岁中年危机》一章。 35岁中年危机的原因 35岁中年危机的说法好像…
阅读更多...
nodejs微信小程序＋python＋PHP计算机网络在线考试系统-计算机毕业设计推荐

nodejs微信小程序＋python＋PHP计算机网络在线考试系统-计算机毕业设计推荐

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…
阅读更多...
04_线性表

04_线性表

线性表 顺序表顺序表的实现顺序表的遍历顺序表的容量可变顺序表的时间复杂度java中ArrayList实现 链表单向链表单向链表API设计java中LinkedList实现 链表的复杂度分析链表反转快慢指针中间值问题单向链表是否有环问题有环链表入口问题 循环链表约瑟夫问题 栈栈概述生活中的栈计…
阅读更多...
nuxt打包占用磁盘IO

nuxt打包占用磁盘IO

目录 前言排除过程 前言 jenkins运行打包&#xff0c;总是要卡一段时间&#xff0c;磁盘IO很高。我手动执行后的确发现了这个问题&#xff0c;如下图所示。 排除过程 我的方案很原始&#xff0c;利用git恢复到以前的版本&#xff0c;抽检&#xff0c;搞了差不多两个小时&am…
阅读更多...
简单的喷淋实验--嵌入式实训

简单的喷淋实验--嵌入式实训

目录 喷淋实验--嵌入式实训 1.MQTT通信原理 2.MQTT库的移植 3.代码流程 运行视频如下: 喷淋实验--嵌入式实训 1.MQTT通信原理 MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;是一种轻量级的发布/订阅消息传输协议&#xff0c;旨在提供可靠、高效的通信…
阅读更多...
基于Java SSM框架实现教学质量评价评教系统项目【项目源码+论文说明】计算机毕业设计

基于Java SSM框架实现教学质量评价评教系统项目【项目源码+论文说明】计算机毕业设计

基于java的SSM框架实现教学质量评价评教系统演示 摘要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;教学质量评价系统当然也不能排除在外。教学质量评价系统是以实际运用为…
阅读更多...
Git本地仓库命令补充

Git本地仓库命令补充

说明&#xff1a;之前对Git本地仓库的基础使用总结过一篇笔记&#xff0c;Git本地仓库使用&#xff0c;本文对Git的一些基础命令进行补充。 一步提交 通常&#xff0c;我们本地仓库使用Git&#xff0c;文件都需要先 add&#xff0c;将文件从工作区加入到暂存区&#xff0c;然…
阅读更多...
MOSFET管驱动设计细节,波形分析

MOSFET管驱动设计细节,波形分析

MOSFET管驱动设计细节,波形分析 Chapter1 MOSFET管驱动设计细节,波形分析MOSFET驱动芯片的内部结构MOS驱动电路设计需要注意的地方MOS管驱动电路参考MOS管驱动电路的布线设计常见的MOS管驱动波形高频振铃严重的毁容方波又胖又圆的肥猪波打肿脸充正弦的生于方波他们家的三角波大…
阅读更多...
windows server 2008 R2 x64 基础知识（2）

windows server 2008 R2 x64 基础知识（2）

一、防火墙设置 1.windows防火墙的种类&#xff1a; 1)工作组网络环境 2)域网络环境 2.防火墙的配置 1)打开管理工具&#xff1a;win->管理工具->高级安全windows防火墙 2)管理配置&#xff1a; (1)防火墙的数据流类型 a.入站流量&#xff1a;外部访问内部分流量 b…
阅读更多...
Trinity软件对转录组进行无参比对教程

Trinity软件对转录组进行无参比对教程

写在前面 2023年将结束&#xff0c;小杜的生信笔记分享个人学习笔记也有2年的时间。在这2年的时间中&#xff0c;分享算是成为工作、学习和生活中的一部分。自己为了运行和维护社群也算花费大量的时间和精力&#xff0c;自己认为还算满意吧。对于个人来说&#xff0c;自己一直…
阅读更多...
Tauri：构建高效安全的桌面应用程序 | 开源日报 No.124

Tauri：构建高效安全的桌面应用程序 | 开源日报 No.124

tauri-apps/tauri Stars: 64.6k License: Apache-2.0 Tauri 是一个开源项目&#xff0c;它可以通过 Web 前端构建更小、更快和更安全的桌面应用程序。 该项目具有以下优势和特点&#xff1a; Tauri 可以帮助用户构建桌面应用程序&#xff0c;并使用 web 前端技术进行界面设计…
阅读更多...
uniapp框架——初始化vue3项目(搭建ai项目)

uniapp框架——初始化vue3项目(搭建ai项目)

uniapp框架 uni-app 是一个使用 Vue.js 开发所有前端应用的框架&#xff0c;开发者编写一套代码&#xff0c;可发布到iOS、Android、Web&#xff08;响应式&#xff09;、以及各种小程序&#xff08;微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝&#xff09;、快应用等多个平…
阅读更多...
[deepspeed]deepspeed安装和测试代码

[deepspeed]deepspeed安装和测试代码

deepspeed官方对linux系统支持非常好&#xff0c;安装流程较为简单&#xff0c;推荐使用linux系统使用deepspeed.deepspeed由于要使用大模型进行训练和推理&#xff0c;建议显存>24GB。windows上官方不直接支持&#xff0c;但是网上有安装whl文件&#xff0c;只能0.8.3这样老…
阅读更多...
【IO】IO模型与零拷贝

【IO】IO模型与零拷贝

前言&#xff1a; 正在运行的程序其实就是系统中的一个进程&#xff0c;操作系统会为每一个进程分配内存空间&#xff0c;而内存空间分为两部分&#xff0c;一部分是用户空间&#xff0c;这是用户进程访问的内存区域&#xff1b;另一部分是内核空间&#xff0c;是操作系统内核访…
阅读更多...
matlab实践（十一）：导弹追踪

matlab实践（十一）：导弹追踪

1.题目 a9.94,x062.06 2.方程 我们有&#xff1a; ( d x d t ) 2 ( d y d t ) 2 w 2 (\frac{\mathrm d\mathrm x}{\mathrm d\mathrm t})^2(\frac{\mathrm d\mathrm y}{\mathrm d\mathrm t})^2\mathrm w^2 (dtdx​)2(dtdy​)2w2 还有导弹始终指向船 ( d x d t d y d t ) …
阅读更多...
R语言——基本操作（二）

R语言——基本操作（二）

目录 一、矩阵与数组 二、列表 三、数据框 四、因子 五、缺失数据 六、字符串 七、日期和时间 参考 一、矩阵与数组 matrix&#xff1a;创建矩阵&#xff0c;nrow 和 ncol 可以省略&#xff0c;但其值必须满足分配条件&#xff0c;否则会报错 只写一个值则自动分配&…
阅读更多...
用CSDN训练的InsCode AI创作博文：数据治理体系建设

用CSDN训练的InsCode AI创作博文：数据治理体系建设

想不想用AI帮我们写方案&#xff1f; 想尝试用CSDN提供的InsCode AI创作助手协助我们进行技术方案的创作&#xff0c;看看效果如何&#xff0c;能不能辅助我们日常的方案编写与创作&#xff1f;以前用ChatGPT也尝试过&#xff0c;但对于专业性更强的内容&#xff0c;还有表现的…
阅读更多...
企业知识库与企业文化：相互影响与共同发展

企业知识库与企业文化：相互影响与共同发展

在当今知识经济的时代&#xff0c;企业知识库和企业文化已经成为企业核心竞争力的重要组成部分。它们之间相互影响&#xff0c;共同发展&#xff0c;为企业的发展提供强大的支撑。本文将探讨企业知识库与企业文化之间的关系&#xff0c;以及如何通过相互促进&#xff0c;推动企…
阅读更多...
Windows漏洞利用开发——利用ROP绕过DEP保护

Windows漏洞利用开发——利用ROP绕过DEP保护

实验6 Windows漏洞利用开发 6.1实验名称 Windows漏洞利用开发 6.2实验目的 学习windows漏洞利用开发&#xff0c;使用kali linux相关工具对windows内目标程序进行漏洞利用 6.3实验步骤及内容 第三阶段&#xff1a;利用ROP绕过DEP保护 了解DEP保护理解构造ROP链从而绕过DEP…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023