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

最终实现效果

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.mzph.cn/news/239727.shtml

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

相关文章

智能优化算法应用：基于人工大猩猩部队算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于人工大猩猩部队算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于人工大猩猩部队算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于人工大猩猩部队算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.人工大猩猩部队算法4.实验参…
阅读更多...
YZ系列工具之YZ03:高版本Excel的自定义菜单

YZ系列工具之YZ03:高版本Excel的自定义菜单

我给VBA下的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。我的教程一共九套一部VBA手册&#xff0c;教程分为初级、中级、高级三大部分。是对VBA的系统讲解&#xff0c;从简单的…
阅读更多...
关于游戏性能优化的技巧

关于游戏性能优化的技巧

关于游戏性能优化的技巧 游戏性能优化对象池Jobs、Burst、多线程间隔处理定时更新全局广播缓存组件缓存常用数据2D残影优化2D骨骼转GPU动画定时器优化DrawCall合批处理优化碰撞层优化粒子特效 游戏性能优化 好久没有在CSDN上面写文章了&#xff0c;今天突然看到鬼谷工作室技术…
阅读更多...
docker部署mysql主主备份 haproxy代理（swarm）

docker部署mysql主主备份 haproxy代理（swarm）

docker部署mysql主主备份 haproxy代理&#xff08;swarm&#xff09; docker部署mysql主主备份 docker部署mysql主主备份&#xff08;keepalived&#xff09;跨主机自动切换 docker部署mysql主主备份 haproxy代理&#xff08;swarm&#xff09; 1. 环境准备 主机IPnode119…
阅读更多...
WSL移动ubuntu到其他盘的几个问题以及安装，使用过程中遇到bug记录

WSL移动ubuntu到其他盘的几个问题以及安装，使用过程中遇到bug记录

这里写目录标题 无法正常修改Ubuntu系统的默认用户解决方案1&#xff1a;解决方案2&#xff1a; 出现 id xxx no such userGUI不能正常显示 无法正常修改Ubuntu系统的默认用户 ubuntu移动到其他盘可以参考WSL Ubuntu子系统迁移到非系统盘 下面问题是我安装时遇到的&#xff0c…
阅读更多...
with torch.no_grad()在Pytorch中的应用

with torch.no_grad()在Pytorch中的应用

with torch.no_grad()在Pytorch中的应用 参考&#xff1a; https://blog.csdn.net/qq_24761287/article/details/129773333 https://blog.csdn.net/sazass/article/details/116668755 在学习Pytorch时&#xff0c;老遇到 with torch.no_grad()&#xff0c;搞不清其作用&#…
阅读更多...
Linux内核模块文件组成介绍

Linux内核模块文件组成介绍

Linux驱动开发主要的工作就是编写模块&#xff0c;一个典型的Linux内核模块文件.ko 主要由以下几个部分组成。 模块加载函数(必须) 当通过insmod或modprobe命令加载内核模块时&#xff0c;模块的加载函数会自动被内核执行&#xff0c;完成本模块的相关初始化工作。 Linux内核模…
阅读更多...
MyBatis关联查询（二、一对多查询）

MyBatis关联查询（二、一对多查询）

MyBatis关联查询&#xff08;二、一对多查询&#xff09; 需求&#xff1a;查询所有用户信息及用户关联的账户信息。 分析&#xff1a;用户信息和他的账户信息为一对多关系&#xff0c;并且查询过程中如果用户没有账户信息&#xff0c;此时也要将用户信息查询出来&#xff0c…
阅读更多...
竞赛保研 基于GRU的 电影评论情感分析 - python 深度学习 情感分类

竞赛保研 基于GRU的 电影评论情感分析 - python 深度学习 情感分类

文章目录 1 前言1.1 项目介绍 2 情感分类介绍3 数据集4 实现4.1 数据预处理4.2 构建网络4.3 训练模型4.4 模型评估4.5 模型预测 5 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于GRU的 电影评论情感分析 该项目较为新颖&#xff0c;适合作为竞…
阅读更多...
msyql 24day 数据库主从 主从复制 读写分离 master slave 有数据如何增加

msyql 24day 数据库主从 主从复制 读写分离 master slave 有数据如何增加

目录 环境介绍读写分离纵向扩展横向扩展 数据库主从准备环境主库环境(master)从库配置(slave)状态分析重新配置问题分析 报错解决从库验证 有数据的情况下 去做主从清理环境环境准备数据库中的锁的机制主库配置从库配置最后给主库解锁常见错误 环境介绍 将一个数据库的数据 复…
阅读更多...
20Exchange第一轮空投延续铭文热-Meme热潮褪去后的选择

20Exchange第一轮空投延续铭文热-Meme热潮褪去后的选择

“凌晨1点打iotx铭文&#xff0c;凌晨2点打Tia铭文&#xff0c;凌晨3点打inj铭文&#xff0c;凌晨4点 打op铭文……”这个在社交网络上广为转发的贴文&#xff0c;浓缩了Web3用户对铭文市场的狂热。 从12月开始&#xff0c;铭文这种比特币等区块链网络铸造加密资产&#xff08…
阅读更多...
从0到1部署gitlab自动打包部署项目

从0到1部署gitlab自动打包部署项目

本文重点在于配置ci/cd打包 使用的是docker desktop 第一步安装docker desktop Docker简介 Docker 就像一个盒子&#xff0c;里面可以装很多物件&#xff0c;如果需要某些物件&#xff0c;可以直接将该盒子拿走&#xff0c;而不需要从该盒子中一件一件的取。Docker中文社区、…
阅读更多...
零基础制作宠物用品小程序

零基础制作宠物用品小程序

随着人们对宠物用品的需求不断增长&#xff0c;越来越多的人开始探索如何制作一个专业的宠物用品小程序。而乔拓云作为一款功能强大的在线商城制作工具&#xff0c;成为了许多商家的首选。本文将详细介绍如何使用乔拓云制作宠物用品小程序&#xff0c;让你轻松上手&#xff0c;…
阅读更多...
集合论：二元关系(1)

集合论：二元关系(1)

集合论这一章内容很多&#xff0c;重点是二元关系中关系矩阵&#xff0c;关系图和关系性质:自反、反自反、对称、反对称、传递以及关系闭包的运算&#xff0c;等价关系&#xff0c;偏序关系&#xff0c;哈斯图&#xff0c;真吓人&#xff01; 1.笛卡儿积 由两个元素x和y按照一…
阅读更多...
伽马校正：FPGA

伽马校正：FPGA

参考资料&#xff1a; Tone Mapping 与 Gamma Correction - 知乎 (zhihu.com) Book_VIP: 《基于MATLAB与FPGA的图像处理教程》此书是业内第一本基于MATLAB与FPGA的图像处理教程&#xff0c;第一本真正结合理论及算法加速方案&#xff0c;在Matlab验证&#xff0c;以及在FPGA上…
阅读更多...
【开源工程及源码】超级经典开源项目实景三维数字孪生智慧机场

【开源工程及源码】超级经典开源项目实景三维数字孪生智慧机场

智慧机场可视化平台通过可视化手段&#xff0c;将复杂的机场运营数据以图形、图表等形式展现&#xff0c;使管理者能够更直观、实时地了解机场的各个方面。飞渡科技通过整合物联网IOT、人工智能、大数据分析等技术&#xff0c;围绕机场管理、运控、安防、服务、监测等业务领域&…
阅读更多...
Java设计模式-原型模式

Java设计模式-原型模式

目录 一、克隆羊问题 二、传统方式解决 三、基本介绍 四、浅拷贝和深拷贝 &#xff08;一&#xff09;浅拷贝介绍 &#xff08;二&#xff09;深拷贝 五、原型模式深拷贝 &#xff08;一&#xff09;重写clone方法 &#xff08;二&#xff09;对象序列化 六、注意事项…
阅读更多...
扩展检测和响应：零信任安全的核心要素

扩展检测和响应：零信任安全的核心要素

面对不断增长的攻击面&#xff0c;扩展和增强威胁检测和响应能力是XDR在安全功效方面的主要结果。这一成果不仅有助于全面保护&#xff0c;而且有助于更好地实施零信任安全。 默认情况下&#xff0c;这种方法不信任任何用户或任何设备&#xff0c;只允许访问需要的资源。为了更…
阅读更多...
【OCR识别】PaddleHub实现验证码识别

【OCR识别】PaddleHub实现验证码识别

文章目录 前言无脑安装使用PaddleHub寻找预训练模型库完整代码效果图 前言 前面有篇文章介绍了 【网站验证码识别】 &#xff0c;但是其是利用 tesseract 工具的命令行来实现图片内容的识别。 这几天我突然想起&#xff0c;大学时参加百度 AI 比赛用过其 PaddleHub 框架&…
阅读更多...
Kubectl 部署无状态应用

Kubectl 部署无状态应用

基本概念 无状态服务 无状态服务不会在本地存储持久化数据。多个服务实例对于同一个用户请求的响应结果是完全一致的。这种多服务实例之间是没有依赖关系&#xff0c;比如web应用&#xff0c;在k8s控制器中动态启停无状态服务的pod并不会对其它的pod产生影响。 有状态服务 有状…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023