时间:2023-07-26 14:54:01 | 来源:网站运营
时间:2023-07-26 14:54:01 来源:网站运营
情人节程序员用HTML网页表白【制作浪漫气球520告白相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript:这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用网页告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。@TOC
HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码
,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用<!-- * @Author: your name * @Date: 2021-07-07 09:34:19 * @LastEditTime: 2021-07-21 16:13:21 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: /css3气球动画制作空中飘浮气球动画特效/index.html--><!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <link href="css/index.css" rel="stylesheet" type="text/css" /></head><body> <div class="qiqiu1 qiqiu"> <img src="images/201101asdsaf22135412367.png" /> <div class="text">love</div> </div> <div class="qiqiu2 qiqiu"> <img src="images/201101ddd22135412367.png" /> <div class="text">love</div> </div> <div class="qiqiu3 qiqiu"> <img src="images/20110122135aaaaa412367.png" /> <div class="text">love</div> </div> <div class="qiqiu4 qiqiu"> <img src="images/20110122135s412367.png" /> <div class="text">love</div> </div> <div class="qiqiu5 qiqiu"> <img src="images/20110122135412367.png" /> <div class="text">love</div> </div> <div class="qiqiu1 qiqiu"> <img src="images/201101asdsaf22135412367.png" /> <div class="text">love</div> </div> <div class="qiqiu2 qiqiu"> <img src="images/201101ddd22135412367.png" /> <div class="text">love</div> </div> <div class="qiqiu3 qiqiu"> <img src="images/20110122135aaaaa412367.png" /> <div class="text">love</div> </div> <div class="qiqiu4 qiqiu"> <img src="images/20110122135s412367.png" /> <div class="text">love</div> </div> <div class="qiqiu5 qiqiu"> <img src="images/20110122135412367.png" /> <div class="text">love</div> </div> <div class="yun1 yun"> </div> <div class="yun2 yun"> </div> <div class="yun3 yun"> </div> <div class="yun4 yun"> </div></body></html>
@charset "utf-8";/* CSS Document */html { height: 100%}body { background: url(../images/bg.jpg) no-repeat center top; background-size: 100% 100%}.qiqiu { position: fixed; width: 100px; height: 200px;}.qiqiu div { /* width: 70px; */ /* height: 65px; */ /* background: url(../images/730e0cf3d7ca7bcbbc1b79c0bf096b63f724a8f9.png) no-repeat center center; */ background: url(../images/09.png) no-repeat center center; /* padding: 15px 5px 0; */ width: 160px; height: 160px; text-align: center; margin: 0 -27px; background-size: 100% auto;}.qiqiu img { width: 100%; height: auto; display: block;}.qiqiu1 { bottom: -200px; left: 400px; animation: myfirst 20s linear infinite; z-index: 2222; animation-delay: 0s; -webkit-animation: myfirst 20s linear infinite; z-index: 2222; -webkit-animation-delay: 0s;}.qiqiu2 { bottom: -200px; left: 650px; animation: myfirst2 22s 1s linear infinite; animation-delay: 2s; width: 70px; -webkit-animation: myfirst2 22s 1s linear infinite; -webkit-animation-delay: 2s;}.qiqiu3 { bottom: -200px; left: 900px; animation: myfirst3 22.2s linear infinite; z-index: 2222; animation-delay: 3s; -webkit-animation: myfirst3 22.2s linear infinite; -webkit-animation-delay: 3s;}.qiqiu4 { bottom: -200px; left: 1050px; animation: myfirst4 21s 0.2s linear infinite; z-index: 2222; animation-delay: 5s; -webkit-animation: myfirst4 21s 0.2s linear infinite; -webkit-animation-delay: 5s;}.qiqiu5 div { width: 100px; height: 100px; padding: 5px 5px 0; margin: 0 auto}.qiqiu2 div { width: 80px; height: 80px; padding: 5px 5px 0; margin: 0 auto}.qiqiu5 { bottom: -200px; left: 1250px; animation: myfirst5 19.5s 1.2s linear infinite; animation-delay: 4s; width: 60px;}.yun { position: fixed;}.yun1 { width: 567px; height: 185px; background: url(../images/yun1.png) no-repeat center center; left: 1060px; top: 318px; animation: myfirst6 50s linear infinite; -webkit-animation: myfirst6 50s linear infinite;}.yun2 { width: 605px; height: 253px; background: url(../images/yun2.png) no-repeat center center; left: 180px; top: 249px; animation: myfirst7 50s linear infinite; -webkit-animation: myfirst7 50s linear infinite;}.yun3 { width: 348px; height: 226px; background: url(../images/yun3.png) no-repeat center center; left: 50px; top: 500px; animation: myfirst8 50s linear infinite; -webkit-animation: myfirst8 50s linear infinite;}.yun4 { width: 786px; height: 362px; background: url(../images/yun4.png) no-repeat center center; left: 762px; top: 433px; animation: myfirst9 50s linear infinite; -webkit-animation: myfirst9 50s linear infinite;}@keyframes myfirst { from { bottom: -200px; } to { bottom: 800px; }}@keyframes myfirst2 { from { bottom: -200px; } to { bottom: 850px; }}@keyframes myfirst3 { from { bottom: -200px; } to { bottom: 820px; }}@keyframes myfirst4 { from { bottom: -200px; } to { bottom: 780px; }}@keyframes myfirst5 { from { bottom: -200px; } to { bottom: 830px; }}@keyframes myfirst6 { from { left: 1060px; } to { left: 1250px; }}@keyframes myfirst7 { from { left: 180px; } to { left: 400px; }}@keyframes myfirst8 { from { left: 50px; } to { left: 350px; }}@keyframes myfirst9 { from { left: 762px; } to { left: 1000px; }}@-webkit-keyframes myfirst { from { bottom: -200px; } to { bottom: 800px; }}@-webkit-keyframes myfirst2 { from { bottom: -200px; } to { bottom: 850px; }}@-webkit-keyframes myfirst3 { from { bottom: -200px; } to { bottom: 820px; }}@-webkit-keyframes myfirst4 { from { bottom: -200px; } to { bottom: 780px; }}@-webkit-keyframes myfirst5 { from { bottom: -200px; } to { bottom: 830px; }}@-webkit-keyframes myfirst6 { from { left: 1060px; } to { left: 1250px; }}@-webkit-keyframes myfirst7 { from { left: 180px; } to { left: 400px; }}@-webkit-keyframes myfirst8 { from { left: 50px; } to { left: 350px; }}@-webkit-keyframes myfirst9 { from { left: 762px; } to { left: 1000px; }}
关键词:表白,告白,七夕,相册,浪漫,程序,气球