为心爱的人做一个超具创意的表白网页吧❤(告白气球)HTML+CSS+JavaScript
Posted html网页设计
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为心爱的人做一个超具创意的表白网页吧❤(告白气球)HTML+CSS+JavaScript相关的知识，希望对你有一定的参考价值。
为心爱的人做一个超具创意的表白网页吧????(告白气球)html+CSS+javascript
是不是还没有给心爱的人准备小礼物呀，但是别担心，精心创作了一个“告白气球”网页，按照下面这个教程就可以给Ta做一个创意满满的祝福了呀~（很简单的哦）
作品介绍
1.网页作品简介方面 ：一个超具创意的网页 ,喜欢的可以下载，作品支持手机PC响应式布局 (可自定义音乐+文字)
2.网页作品编辑方面：任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）
文章目录
- HTML
- CSS
- JS
- 告白气球(制作教程)
一、作品演示
PC端演示
H5手机端
二、代码目录
三、代码实现
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="static/nigeerhuox16.ico.jpg">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>love告白气球</title>
<link rel="stylesheet" href="./static/style.css">
</head>
<body>
<style type="text/css">
.rotateImages
animation:myRotate 10s linear infinite;
animation:myRotate 10s linear infinite;
@-webkit-keyframes myRotate
0% transform: rotate(0deg);
50% transform: rotate(180deg);
100% transform: rotate(360deg);
@keyframes myRotate
0% transform: rotate(0deg);
50% transform: rotate(180deg);
100% transform: rotate(360deg);
</style>
<div style="width:100%;max-width:500px;margin:0 auto;position: relative;">
<div class="pass-time">
<p class="finalText"></p>
<p>
<span class="kwy days"></span>
天
<span class="kwy hours"></span>
时
<span class="kwy minutes"></span>
分
<span class="kwy seconds"></span>
秒</p>
</div>
<marquee id="marquee" direction = "up" scrollamount="2" style="color:white; height:100px;line-height: 20px;font-size:12px;text-align: center;">
</marquee>
<div id="pBg1cNNqT-an-obj-2"><img height="180" width="500" src="./static/boy-girl/2000.jpg">
</div>
<div id="pBg1cNNqT-an-obj-3">
<div id="pBg1cNNqT-an-obj-4"><img height="338" width="350"
src="./static/boy-girl/2000(1).jpg"></div>
<div id="pBg1cNNqT-an-obj-5"><img height="113" width="85"
src="./static/boy-girl/2000(2).jpg"></div>
<div id="pBg1cNNqT-an-obj-6"><img height="113" width="85"
src="./static/boy-girl/2000(2).jpg"></div>
<div id="pBg1cNNqT-an-obj-7"><img height="113" width="85"
src="./static/boy-girl/2000(2).jpg"></div>
<div id="pBg1cNNqT-an-obj-8"><img height="113" width="85"
src="./static/boy-girl/2000(2).jpg"></div>
<div id="pBg1cNNqT-an-obj-9"><img height="113" width="85"
src="./static/boy-girl/2000(2).jpg"></div>
<div id="pBg1cNNqT-an-obj-10"><img height="113" width="85"
src=七夕活动_一个移动鼠标播放告白气球的Python程序（2022年8月可用）HTML5超炫酷特效天空中白云飘动CSS3特效HTML+CSS+JavaScript
七夕表白网站程序员表白网页合集(100套) HTML+CSS+JS
html+css+js制作520表白网页,全屏的爱心和表白语网页动画