【浪漫气球——HTML CSS JS （特效+代码）】

最新推荐文章于 2024-04-17 05:14:17 发布
最新推荐文章于 2024-04-17 05:14:17 发布
阅读量556 收藏 17
点赞数 12
分类专栏： 程序员 文章标签： css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78145364/article/details/137720999
版权

春节过去了


元宵节过去了


情人节也过去了


盛夏即将来临


你打算什么时候，去见那个，你超级超级想见的人啊？

2021.11.11

index.css

html {

font-size: 1.2vh;

}

body {

height: 100vh;

width: 100vw;

overflow: hidden;

background: -webkit-linear-gradient(white, #e0d1d1);

background: linear-gradient(white, #e0d1d1);

box-shadow: inset 0 5vh 30vh 5vh #d6c2c2;

font-family: “Share Tech Mono”, monospace;

color: white;

font-size: 2rem;

}

body:after {

z-index: 1;

content: ‘’;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-image: -webkit-radial-gradient(circle, #ffffff 40%, #e0d1d1);

background-image: radial-gradient(circle, #ffffff 40%, #e0d1d1);

-webkit-transform-origin: 50% 100%;

transform-origin: 50% 100%;

-webkit-transform: scaleY(1.5) scaleX(1);

transform: scaleY(1.5) scaleX(1);

opacity: 0.5;

}

.center {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate3d(-50%, -50%, 0);

transform: translate3d(-50%, -50%, 0);

text-align: center;

line-height: 0.9;

z-index: 3;

}

h5 {

font-size: 1.5rem;

margin: 0;

padding: 0;

color: #ff6666;

}

h6 {

font-size: 2rem;

margin: 0;

padding: 0;

color: #ff6666;

}

h5, h6 {

text-shadow: 0rem 4rem 2rem rgba(140, 115, 115, 0.2);

}

.balloon {

top: 100vh;

opacity: 0.95;

position: absolute;

-webkit-transform: translate3d(-50%, -50%, 0);

transform: translate3d(-50%, -50%, 0);

width: 10rem;

height: 10rem;

background: #faf9f9;

border-radius: 10rem 10rem 4rem 10rem;

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

box-shadow: inset -0.5rem -0.5rem 5rem -0.5rem #c99c9c, 3rem 3rem 1.5rem rgba(153, 102, 102, 0.2);

-webkit-animation: float1 10s infinite ease-out;

animation: float1 10s infinite ease-out;

}

@-webkit-keyframes float1 {

0% {

-webkit-transform: rotate(40deg) translateY(0) translateX(0);

transform: rotate(40deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: rotate(50deg) translateY(-85vh) translateX(-85vh);

transform: rotate(50deg) translateY(-85vh) translateX(-85vh);

}

}

@keyframes float1 {

0% {

-webkit-transform: rotate(40deg) translateY(0) translateX(0);

transform: rotate(40deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: rotate(50deg) translateY(-85vh) translateX(-85vh);

transform: rotate(50deg) translateY(-85vh) translateX(-85vh);

}

}

@-webkit-keyframes float2 {

0% {

-webkit-transform: rotate(55deg) translateY(0) translateX(0);

transform: rotate(55deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: rotate(45deg) translateY(-85vh) translateX(-85vh);

transform: rotate(45deg) translateY(-85vh) translateX(-85vh);

}

}

@keyframes float2 {

0% {

-webkit-transform: rotate(55deg) translateY(0) translateX(0);

transform: rotate(55deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: rotate(45deg) translateY(-85vh) translateX(-85vh);

transform: rotate(45deg) translateY(-85vh) translateX(-85vh);

}

}

@-webkit-keyframes float3 {

0% {

-webkit-transform: rotate(45deg) translateY(0) translateX(0);

transform: rotate(45deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: rotate(35deg) translateY(-85vh) translateX(-85vh);

transform: rotate(35deg) translateY(-85vh) translateX(-85vh);

}

}

@keyframes float3 {

0% {

-webkit-transform: rotate(45deg) translateY(0) translateX(0);

transform: rotate(45deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: rotate(35deg) translateY(-85vh) translateX(-85vh);

transform: rotate(35deg) translateY(-85vh) translateX(-85vh);

}

}

@-webkit-keyframes floatfront1 {

0% {

-webkit-transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);

transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);

transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);

}

}

@keyframes floatfront1 {

0% {

-webkit-transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);

transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);

transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);

}

}

@-webkit-keyframes floatfront2 {

0% {

-webkit-transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);

transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);

transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);

}

}

@keyframes floatfront2 {

0% {

-webkit-transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);

transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);

transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);

}

}

@-webkit-keyframes floatfront3 {

0% {

-webkit-transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);

transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);

transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);

}

}

@keyframes floatfront3 {

0% {

-webkit-transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);

transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);

transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);

}

}

.balloon:after {

content: ‘’;
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**

[外链图片转存中…(img-G5acr0RB-1713001640577)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

资料领取方式：戳这里前往获取

2301_78145364
关注
专栏目录
【浪漫气球——HTML CSS JS （特效+代码）】| JSON Web Token（JWT）是什么？
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
11-11 1929
效果 可以根据个人意愿再修改呀！ 代码 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>浪漫气球</title> <link rel="stylesheet" href="css/index.css" /> </head> <body> <div class="holder
HTML+CSS+JavaScript❤制作浪漫气球520告白相册❤
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-21 2736
❉ HTML+CSS+JavaScript❤制作浪漫气球520告白相册❤ 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了，来制作属于我们程序员的浪漫吧！ ❉ 文章目录 ❉ HTML+CSS+JavaScript❤制作浪漫气球520告白相册❤❉ 效果演示❉ 1.动态效果❉ 2.静态效果❉ 代码文件目录一
45、Jquery+css3空中飘浮的气球动画特效
03-27
45、Jquery+css3空中飘浮的气球动画特效
css飘动的气球,CSS3 悬浮的彩色气球
weixin_32188111的博客
08-04 659
CSS语言：CSSSCSS确定@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800);body {overflow: hidden;background: #000;color: #fff;}.love-pop {font: bold 22px/0.3 Open Sans;text-shadow: 0 3px 15...
css 实现上升的气球效果
PrimaryColor
12-02 704
【代码】css 实现上升的气球效果。
css 实现满屏升空的气球动画
别告诉我有Bug
12-22 1371
css 实现满屏升空的气球动画 实现步骤 step1 定义气球的样式，并在气球上添加白色椭圆形。 step2 定义气球棒和气球口。 step3 设置气球动画：实现气球从下到上匀速移动就可以升空了。 step4 设置气球颜色、大小、位置变量。 step5 生成多个气球盒子，将变量传入。
css3空中飘浮的气球动画特效特效代码
03-20
css3空中飘浮的气球动画特效是一款基于CSS3实现的气球漂浮效果代码。
网页模板——纯html5实现简单气球大战小游戏特效源码.zip
11-24
总的来说，这个“纯html5实现简单气球大战小游戏特效源码”涵盖了HTML5的多个关键特性，包括Canvas绘图、JavaScript交互逻辑、CSS3动画、离线存储以及音频处理。通过学习这个源码，开发者可以深入理解HTML5在游戏...
css3空中飘浮的气球动画特效.zip
11-17
本项目"css3空中飘浮的气球动画特效.zip"聚焦于利用这些技术实现一个创新的视觉效果——空中飘浮的气球动画。这个特效能够为网页增添趣味性和动态感，吸引用户注意力，提升用户体验。 首先，我们来详细讨论CSS3在这...
❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
08-09 4242
❀ 520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript 520七夕节告白,也就是中国的情人节,你除了送花你还会什么？？ 快来制作高端大气上档次的D立体动态相册表白网页吧! 七夕节是一个十分浪漫的节日，相传牛郎织女每年农历七月七日会在鹊桥上相会，所以七夕是中国自古流传至今的情人节，在这一天如果你有喜欢的对象，不妨鼓起勇气表白哟。 ❀ 文章目录 ❀ 520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript❀
纯CSS代码实现各类气球泡泡对话框效果的代码解析
飘过的春风
10-27 1504
html代码： CSS “边框法”实现气泡对话框效果一 .test{width:300px; padding:30px 20px; margin-left:60px; background:#beceeb; position:relative;} .test span{width:0; height:0; font-size:0; overflow:
html+css+jquery制作图片展示效果，致Web前端高级工程师的一封信
最新发布
m0_61549781的博客
04-17 845
还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。2、图片展示.css。
css3+html5——跳动的气球
十二tel
06-11 2694
先为大家提供一张.png格式气球的图片：效果图如下：  代码如下：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;跳动的气球&lt;/title&gt; &lt;style type=&amp
纯CSS打气球爆炸js特效
ICode联盟
07-11 399
下载地址纯CSS打气球爆炸特效，没有使用任何JavaScript代码，可以打破气球的网页特效。dd:
CSS动画之小球围绕旋转
m0_74577714的博客
01-31 566
让我为大家带来一个关于小球围绕的案例吧！
气球漂浮css3动画js特效
ICode联盟
09-30 144
气球漂浮css3动画特效。
css3动画库——animate.css以及css3动画一些有趣的实现
u012778836的专栏
02-22 3199
简介 animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。 虽然借助 animate.css 能够很方便、快速的制作 CSS3 动画效果，但还是建议
android气球上升的属性动画,CSS3 不断有气球上升的动画背景效果
weixin_39862097的博客
05-25 235
CSS语言：CSSSCSS确定html {font-size: 1.2vh;}body {margin: 0;height: 100vh;width: 100vw;background: -webkit-linear-gradient(white, #e0d1d1);background: linear-gradient(white, #e0d1d1);box-shadow: inset 0 5v...
CSS3多重背景结合动画打造会飘动的热气球banner
m0_71814235的博客
07-26 282
CSS3多重背景结合动画打造会飘动的热气球banner
htmlcssjs写生日祝福
05-14
写生日祝福可以用HTML、CSS、JS来实现。可以设计一个生日祝福的网页，用HTML编写网页的结构，CSS美化网页的样式，JS实现网页的交互功能。以下是具体的实现方式： 1.利用HTML编写基本的网页结构，包括标题、段落、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值