这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。
文章目录
一、网页介绍一、网页效果二、代码展示1.HTML代码2.CSS代码三、精彩专栏一、网页介绍
1 网页简介：基于HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。
一、网页效果
二、代码展示
1.HTML代码
代码如下（示例）：以下仅展示部分代码供参考~
<!doctype html><html><head><meta charset="utf-8"><meta name="keywords" content="" /><meta name="description" content="" /><!--<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'/>--><script type="text/javascript">var phoneWidth = parseInt(window.screen.width);var phoneScale = phoneWidth / 640;var ua = navigator.userAgent;if (/Android (\d+\.\d+)/.test(ua)) {var version = parseFloat(RegExp.$1);// andriod 2.3if (version > 2.3) {document.write('<meta name="viewport" content="width=640, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');// andriod 2.3以上} else {document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');}// 其他系统} else {document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');}</script><title>告白气球</title><script src="js/html5shiv.min.js" type="text/javascript"></script><link href="css/animate.min.css" rel="stylesheet" type="text/css"><link href="css/css.css" rel="stylesheet" type="text/css"><link href="css/swiper.min.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" id="pageloader-css" href="css/pageloader.css" type="text/css" media="all" /><!--[if lt IE 9]><script src="/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="/libs/respond.js/1.4.2/respond.min.js"></script><![endif]--><!-- Link Swiper's CSS --><script src="js/loading.js" type="text/javascript"></script><style></style></head><body><audio loop src="images/01.mp3" id="audio" autoplay preload="auto"></audio><div class="music"><img class="music-img ro" src="images/music.png"><div class="music-p"><img src="images/music.gif"></div></div><!--加载 --><div id="bonfire-pageloader"><div class="bonfire-pageloader-icon"><img src="images/loadgif.gif" /></div></div><!--加载 --><div class="zb" style="position:absolute;top:0;z-index:999;font-size:2rem;display:none"><p> 坐标: (beta=<span id="beta" class="value">null</span>, gamma=<span id="gamma" class="value">null</span>, alpha=<span id="alpha" class="value">null</span>, 滚动背景值=<span id="lefts">null</span>,屏幕宽=<span id="bjk">null</span>,移动屏幕比=<span id="pmb">null</span>,开关=<span id="open">null</span>,</p></div><div class="swiper-container SwiperBig"><div class="swiper-wrapper"><!--p1--><div class="swiper-slide p1 swiper-no-swiping"><div class="p1-box"><div class="p1-text">戳破气球，看看会发生什么？</div><div class="p1_ball"><img src="images/ball.png" /></div><div class="ball_boomdiv"></div><div class="p1_ballx"><img src="images/ball-x.png" /></div><div class="p1-cloud"><img src="images/cloud.png" /></div><!--p1-1--><div class="ball01 "><img src="images/orange-ball.png" /></div><div class="ball02"><img src="images/red-ball.png" /></div><div class="ball03"><img src="images/pink-ball.png" /></div><div class="ball04"><img src="images/yellow-ball.png" /></div></div></div><!--p2--><div class="swiper-slide"><div class="p2-box"><div class="p2-centerBox"><div class="p2-centerImg"></div></div><div class="p2-text01"></div><div class="p2-text02"></div><div class="p2-cloudLeft"></div><div class="p2-cloudHeart"></div><div class="p2-cloudRight"></div></div></div><!--p3--><div class="swiper-slide"><div class="p3-box"><div class="bj"><div class="bj01 on"></div><div class="bj02 hide"></div></div><div class="p3-text"><p>彩虹走廊 —“穿越七彩的时光来遇见你”</p><P>汇金星力城 1F 中庭</P></div><div class="p3-num">您已穿越：<span id="cy-num">1</span>光年</div><div class="p3-phone"><img src="images/phoneGIF.gif" /><p>左右翻转试一试</p></div></div></div><!--p4--><div class="swiper-slide"><div class="p4-box"><div class="p4-yiy01 on"></div><div class="p4-yiy02 hide"></div><div class="p4-text"><img src="images/P4-text.png" /></div><div class="p4-text02"><img src="images/P4-text02.png" /></div></div></div><!--p5--><div class="swiper-slide swiper-no-swiping"><div class="p5-box"><div class="p5-text">你是第<span>534</span>位 “热气球”升空助力者</div><div class="p5-Time hide">倒计时<span>15</span>秒</div><div class="p5-heart"></div><div class="p5-jt"></div><div class="p5-ball"></div><div class="p5-ball02"></div><div class="p5-light"></div><div class="p5-light2"></div><div class="p5-light3"></div><div class="p5-light4"></div><div class="p5-btn"><img src="images/p5-btn.png" /></div></div></div><!--p7--><div class="swiper-slide"><div class="p7-box"><div class="swiper-container p7-swiper" style="margin-top:42%;"><div class="swiper-wrapper"><div class="swiper-slide"><img src="images/p7-1.jpg" /></div><div class="swiper-slide"><img src="images/p7-2.jpg" /></div><div class="swiper-slide"><img src="images/p7-3.jpg" /></div><div class="swiper-slide"><img src="images/p7-4.jpg" /></div></div></div></div></div><!--p6--><div class="swiper-slide swiper-no-swiping"><div class="p6-box"><div class="p6-centerBox"><div class="p6-centerImg"></div></div><div class="p6-text01"></div><div class="p6-text02"></div><div class="p6-img1"><img src="images/P6-m1.png" /></div><div class="p6-img2"><img src="images/P6-m2.png" /></div><div class="p6-end"></div></div></div></div></div><script src="js/swiper.min.js" type="text/javascript"></script><script src="js/jquery.js" type="text/javascript"></script><script src="js/main.js" type="text/javascript"></script><script src="js/pageloader.js" type="text/javascript"></script><script>$(".p1_ball").bind("click", function() {$(this).hide();$(".ball_boomdiv").show().addClass("ball_boom");$(".p1_ballx,.p1-text").hide();setTimeout(function() {$(".ball01").addClass("ball_ani").css({"display": "block","opacity": "1"})}, 500);setTimeout(function() {$(".ball02").addClass("ball_ani").css({"display": "block","opacity": "1"})}, 1000);setTimeout(function() {$(".ball03").addClass("ball_ani").css({"display": "block","opacity": "1"})}, 1300);setTimeout(function() {$(".ball04").addClass("ball_ani").css({"display": "block","opacity": "1"})}, 1600);setTimeout(function() {swiper.slideTo(1, 1500, true);$(".ball01,.ball02,.ball03,.ball04").hide();}, 4300)})function DJ_time() {var djs = $(".p5-Time span").text();$(".p5-Time").show();$(".p5-Time span").text($(".p5-Time span").text() - 1);if ($(".p5-Time span").text() <= 0) {$(".p5-Time span").text(0);}}$(".p5-btn").one("click", function() {$(".p5-heart").addClass("hear_ball-ani");$(".p5-jt").show();var aj = setInterval("DJ_time()", 1000)$(".p5-heart").css("background", "url(images/heartBal.png) -3% 0 no-repeat")setTimeout(function() {$(".p5-heart").css("background", "url(images/heartBal.png) 32% 0 no-repeat")}, 5000)setTimeout(function() {$(".p5-heart").css("background", "url(images/heartBal.png) 66.5% 0 no-repeat")}, 9000)setTimeout(function() {$(".p5-heart").css("background", "url(images/heartBal.png) 101% 0 no-repeat");}, 15000)setTimeout(function() {$(".p5-ball,.p5-ball02").hide();$(".p5-heart").removeClass("hear_ball-ani");$(".p5-light,.p5-light2,.p5-light3,.p5-light4").hide();alert("你是第534位 “热气球”升空助力者");swiper.slideTo(5, 1000, true);}, 16000)setTimeout(function() {$(".p5-ball").addClass("ballUp");}, 1000)setTimeout(function() {$(".p5-ball02").addClass("ballUp");}, 1500)setTimeout(function() {$(".p5-light").addClass("animated flash light-over").css("opacity", "1");$(".p5-light2").addClass("animated flash light-over").css("opacity", "1");$(".p5-light3").addClass("animated flash light-over").css("opacity", "1");$(".p5-light4").addClass("animated flash light-over").css("opacity", "1");}, 2500)})/*跑道*/setInterval(function() {if ($(".bj01").hasClass("on")) {$(".bj01").addClass("hide").removeClass("on").siblings(".bj02").removeClass("hide").addClass("on")} else {$(".bj02").addClass("hide").removeClass("on").siblings(".bj01").removeClass("hide").addClass("on")}}, 300)var swiper = new Swiper('.p7-swiper', {autoplay: 3000,autoplayDisableOnInteraction: false});var swiper = new Swiper('.SwiperBig', {mousewheelControl: true,direction: 'vertical',pagination: '.swiper-pagination',onSlideChangeEnd: function(swiper) {if (swiper.activeIndex == 0) {$(".p1").removeClass("swiper-no-swiping");$(".p1_ball").show();$(".p1_ballx,.p1-text").show();}/*p1*/if (swiper.activeIndex == 1) {setTimeout(function() {$(".p2-centerBox").addClass("animated fadeInUp").css("opacity", "1")}, 200);setTimeout(function() {$(".p2-centerImg").addClass("animated swing").css("opacity", "1")}, 1100);setTimeout(function() {$(".p2-text01").addClass("animated fadeInUp").css("opacity", "1")}, 1900);setTimeout(function() {$(".p2-text02").addClass("animated fadeInUp").css("opacity", "1")}, 2300);setTimeout(function() {$(".p2-cloudLeft").addClass("animated fadeOutLeft").css("opacity", "1")}, 2800);setTimeout(function() {$(".p2-cloudRight").addClass("animated fadeOutRight").css("opacity", "1")}, 2800);setTimeout(function() {$(".p2-cloudHeart").addClass("animated pulse").css("opacity", "1")}, 3500);}/*p1-end*/else if (swiper.activeIndex == 2) {$("#cy-num").text(0);} else if (swiper.activeIndex == 3) {/*摇一摇*/setInterval(function() {if ($(".p4-yiy01").hasClass("on")) {$(".p4-yiy01").addClass("hide").removeClass("on").siblings(".p4-yiy02").removeClass("hide").addClass("on")} else {$(".p4-yiy02").addClass("hide").removeClass("on").siblings(".p4-yiy01").removeClass("hide").addClass("on")}}, 300)//运动事件监听if (window.DeviceMotionEvent) {window.addEventListener('devicemotion', deviceMotionHandler, false);}//获取加速度信息//通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率，进行设备是否有进行晃动的判断。//而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。var SHAKE_THRESHOLD = 10000;var last_update = 0;var x, y, z, last_x = 0,last_y = 0,last_z = 0;var isOne = 0;function deviceMotionHandler(eventData) {var acceleration = eventData.accelerationIncludingGravity;var curTime = new Date().getTime();if ((curTime - last_update) > 10) {var diffTime = curTime - last_update;last_update = curTime;x = acceleration.x;y = acceleration.y;z = acceleration.z;var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;if (speed > SHAKE_THRESHOLD) {$(".p4-yiy01,.p4-yiy02").hide(); // Do somethingp4-boxsetTimeout(function() {$(".p4-box").css("background", "url(images/P4-bg.jpg) 33.4% 0 no-repeat")}, 200);setTimeout(function() {$(".p4-box").css("background", "url(images/P4-bg.jpg) 66.7% 0 no-repeat")}, 400);setTimeout(function() {$(".p4-box").css("background", "url(images/P4-bg.jpg) 100% 0 no-repeat")}, 600);setTimeout(function() {$(".p4-text").addClass("animated fadeIn").css("opacity", "1")}, 1100)setTimeout(function() {$(".p4-text02").addClass("animated fadeInUp").css("opacity", "1")}, 1600)isOne = 1;if (isOne == 1) {window.removeEventListener('devicemotion', deviceMotionHandler, false);}}last_x = x;last_y = y;last_z = z;}}}/*P6-begin*/else if (swiper.activeIndex == 6) {setTimeout(function() {$(".p6-centerBox").addClass("animated fadeInUp").css("opacity", "1")}, 200);setTimeout(function() {$(".p6-centerImg").addClass("animated swing").css("opacity", "1")}, 1100);setTimeout(function() {$(".p6-text01").addClass("animated fadeInUp").css("opacity", "1")}, 1900);setTimeout(function() {$(".p6-text02").addClass("animated fadeInUp").css("opacity", "1")}, 2300);setTimeout(function() {$(".p6-img1").addClass("animated fadeInUp").css("opacity", "1")}, 2500);setTimeout(function() {$(".p6-img1 img").addClass("animated fadeInRight").css("opacity", "1")}, 2600);setTimeout(function() {$(".p6-img2").addClass("animated fadeInUp").css("opacity", "1")}, 2700);setTimeout(function() {$(".p6-img2 img").addClass("animated fadeInLeft").css("opacity", "1")}, 2800);setTimeout(function() {$(".p6-img3").addClass("animated fadeInUp").css("opacity", "1")}, 2900);setTimeout(function() {$(".p6-img3 img").addClass("animated fadeInRight").css("opacity", "1")}, 3000);setTimeout(function() {$(".p6-end").show().addClass("end-anidiv")}, 3800);setTimeout(function() {$(".p6-end").hide()}, 4800);}}/*P6-end*/});</script><script>//音乐类$(function() {$("#audio_btn").click(function() {var music = document.getElementById("music");if (music.paused) {music.play();$("#music_btn").attr("src", "play.png");} else {music.pause();$("#music_btn").attr("src", "pause.png");}});[]a = $("span [class='swiper-pagination-bullet swiper-pagination-bullet-active']").index();//alert(a);})var audio = document.getElementById("audio");audio.load();audio.play();document.addEventListener("WeixinJSBridgeReady", function() {audio.play();}, false);$('.music').click(function() {if ($('.music-img').is('.ro')) {$('.music-img').removeClass('ro')$('.music-p').css('display', 'none')audio.pause();} else {$('.music-img').addClass('ro')$('.music-p').css('display', 'block')audio.play();}})</script><!-- BEGIN PLACE LOADING ICON IN THE MIDDLE OF THE PAGE --><script>jQuery(window).resize(function() {resizenow();});function resizenow() {var browserwidth = jQuery(window).width();var browserheight = jQuery(window).height();jQuery('.bonfire-pageloader-icon').css('right', ((browserwidth - jQuery(".bonfire-pageloader-icon").width()) / 2)).css('top', ((browserheight - jQuery(".bonfire-pageloader-icon").height()) / 2));};resizenow();</script></body></html>
2.CSS代码
/*** Swiper 3.3.1* Most modern mobile touch slider and framework with hardware accelerated transitions* * http://www.idangero.us/swiper/* * Copyright , Vladimir Kharlampidi* The iDangero.us* http://www.idangero.us/* * Licensed under MIT* * Released on: February 7, */.swiper-container {margin: 0 auto;position: relative;overflow: hidden;z-index: 1}.swiper-container-no-flexbox .swiper-slide {float: left}.swiper-container-vertical>.swiper-wrapper {-webkit-box-orient: vertical;-moz-box-orient: vertical;-ms-flex-direction: column;-webkit-flex-direction: column;flex-direction: column}.swiper-wrapper {position: relative;width: 100%;height: 100%;z-index: 1;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-transition-property: -webkit-transform;-moz-transition-property: -moz-transform;-o-transition-property: -o-transform;-ms-transition-property: -ms-transform;transition-property: transform;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box}.swiper-container-android .swiper-slide,.swiper-wrapper {-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-o-transform: translate(0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)}.swiper-container-multirow>.swiper-wrapper {-webkit-box-lines: multiple;-moz-box-lines: multiple;-ms-flex-wrap: wrap;-webkit-flex-wrap: wrap;flex-wrap: wrap}.swiper-container-free-mode>.swiper-wrapper {-webkit-transition-timing-function: ease-out;-moz-transition-timing-function: ease-out;-ms-transition-timing-function: ease-out;-o-transition-timing-function: ease-out;transition-timing-function: ease-out;margin: 0 auto}.swiper-slide {-webkit-flex-shrink: 0;-ms-flex: 0 0 auto;flex-shrink: 0;width: 100%;height: 100%;position: relative}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide {height: auto}.swiper-container-autoheight .swiper-wrapper {-webkit-box-align: start;-ms-flex-align: start;-webkit-align-items: flex-start;align-items: flex-start;-webkit-transition-property: -webkit-transform, height;-moz-transition-property: -moz-transform;-o-transition-property: -o-transform;-ms-transition-property: -ms-transform;transition-property: transform, height}.swiper-container .swiper-notification {position: absolute;left: 0;top: 0;pointer-events: none;opacity: 0;z-index: -1000}.swiper-wp8-horizontal {-ms-touch-action: pan-y;touch-action: pan-y}.swiper-wp8-vertical {-ms-touch-action: pan-x;touch-action: pan-x}.swiper-button-next,.swiper-button-prev {position: absolute;top: 50%;width: 27px;height: 44px;margin-top: -22px;z-index: 10;cursor: pointer;-moz-background-size: 27px 44px;-webkit-background-size: 27px 44px;background-size: 27px 44px;background-position: center;background-repeat: no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled {opacity: .35;cursor: auto;pointer-events: none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next {background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left: 10px;right: auto}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black {background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white {background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next,.swiper-container-rtl .swiper-button-prev {background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right: 10px;left: auto}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black {background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white {background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-pagination {position: absolute;text-align: right;-webkit-transition: .3s;-moz-transition: .3s;-o-transition: .3s;transition: .3s;-webkit-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);z-index: 10}.swiper-pagination.swiper-pagination-hidden {opacity: 0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction {bottom: 10px;left: 0;width: 100%}.swiper-pagination-bullet {width: 20px;height: 4px;display: inline-block;background: #000;opacity: .2}button.swiper-pagination-bullet {border: none;margin: 0;padding: 0;box-shadow: none;-moz-appearance: none;-ms-appearance: none;-webkit-appearance: none;appearance: none}.swiper-pagination-clickable .swiper-pagination-bullet {cursor: pointer}.swiper-pagination-white .swiper-pagination-bullet {background: #fff}.swiper-pagination-bullet-active {opacity: 1;background: red}.swiper-pagination-white .swiper-pagination-bullet-active {background: #fff}.swiper-pagination-black .swiper-pagination-bullet-active {background: #000}.swiper-container-vertical>.swiper-pagination-bullets {right: 10px;top: 50%;-webkit-transform: translate3d(0, -50%, 0);-moz-transform: translate3d(0, -50%, 0);-o-transform: translate(0, -50%);-ms-transform: translate3d(0, -50%, 0);transform: translate3d(0, -50%, 0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 5px 0;display: block}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 5px}.swiper-pagination-progress {background: rgba(0, 0, 0, .25);position: absolute}.swiper-pagination-progress .swiper-pagination-progressbar {background: #007aff;position: absolute;left: 0;top: 0;width: 100%;height: 100%;-webkit-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);transform: scale(0);-webkit-transform-origin: left top;-moz-transform-origin: left top;-ms-transform-origin: left top;-o-transform-origin: left top;transform-origin: left top}.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {-webkit-transform-origin: right top;-moz-transform-origin: right top;-ms-transform-origin: right top;-o-transform-origin: right top;transform-origin: right top}.swiper-container-horizontal>.swiper-pagination-progress {width: 100%;height: 4px;left: 0;top: 0}.swiper-container-vertical>.swiper-pagination-progress {width: 4px;height: 100%;left: 0;top: 0}.swiper-pagination-progress.swiper-pagination-white {background: rgba(255, 255, 255, .5)}.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {background: #fff}.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {background: #000}.swiper-container-3d {-webkit-perspective: 1200px;-moz-perspective: 1200px;-o-perspective: 1200px;perspective: 1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper {-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;transform-style: preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top {position: absolute;left: 0;top: 0;width: 100%;height: 100%;pointer-events: none;z-index: 10}.swiper-container-3d .swiper-slide-shadow-left {background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));background-image: -moz-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));background-image: -o-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))}.swiper-container-3d .swiper-slide-shadow-right {background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));background-image: -moz-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))}.swiper-container-3d .swiper-slide-shadow-top {background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))}.swiper-container-3d .swiper-slide-shadow-bottom {background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));background-image: -o-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))}.swiper-container-coverflow .swiper-wrapper,.swiper-container-flip .swiper-wrapper {-ms-perspective: 1200px}.swiper-container-cube,.swiper-container-flip {overflow: visible}.swiper-container-cube .swiper-slide,.swiper-container-flip .swiper-slide {pointer-events: none;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden;z-index: 1}.swiper-container-cube .swiper-slide .swiper-slide,.swiper-container-flip .swiper-slide .swiper-slide {pointer-events: none}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active,.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active {pointer-events: auto}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top,.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top {z-index: 0;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden}.swiper-container-cube .swiper-slide {visibility: hidden;-webkit-transform-origin: 0 0;-moz-transform-origin: 0 0;-ms-transform-origin: 0 0;transform-origin: 0 0;width: 100%;height: 100%}.swiper-container-cube.swiper-container-rtl .swiper-slide {-webkit-transform-origin: 100% 0;-moz-transform-origin: 100% 0;-ms-transform-origin: 100% 0;transform-origin: 100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev {pointer-events: auto;visibility: visible}.swiper-container-cube .swiper-cube-shadow {position: absolute;left: 0;bottom: 0;width: 100%;height: 100%;background: #000;opacity: .6;-webkit-filter: blur(50px);filter: blur(50px);z-index: 0}.swiper-container-fade.swiper-container-free-mode .swiper-slide {-webkit-transition-timing-function: ease-out;-moz-transition-timing-function: ease-out;-ms-transition-timing-function: ease-out;-o-transition-timing-function: ease-out;transition-timing-function: ease-out}.swiper-container-fade .swiper-slide {pointer-events: none;-webkit-transition-property: opacity;-moz-transition-property: opacity;-o-transition-property: opacity;transition-property: opacity}.swiper-container-fade .swiper-slide .swiper-slide {pointer-events: none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active {pointer-events: auto}.swiper-scrollbar {border-radius: 10px;position: relative;-ms-touch-action: none;background: rgba(0, 0, 0, .1)}.swiper-container-horizontal>.swiper-scrollbar {position: absolute;left: 1%;bottom: 3px;z-index: 50;height: 5px;width: 98%}.swiper-container-vertical>.swiper-scrollbar {position: absolute;right: 3px;top: 1%;z-index: 50;width: 5px;height: 98%}.swiper-scrollbar-drag {height: 100%;width: 100%;position: relative;background: rgba(0, 0, 0, .5);border-radius: 10px;left: 0;top: 0}.swiper-scrollbar-cursor-drag {cursor: move}.swiper-lazy-preloader {width: 42px;height: 42px;position: absolute;left: 50%;top: 50%;margin-left: -21px;margin-top: -21px;z-index: 10;-webkit-transform-origin: 50%;-moz-transform-origin: 50%;transform-origin: 50%;-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;-moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;animation: swiper-preloader-spin 1s steps(12, end) infinite}.swiper-lazy-preloader:after {display: block;content: "";width: 100%;height: 100%;background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%0%0'%20xmlns%3D'http%3A%2F%%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position: 50%;-webkit-background-size: 100%;background-size: 100%;background-repeat: no-repeat}.swiper-lazy-preloader-white:after {background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%0%0'%20xmlns%3D'http%3A%2F%%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin {100% {-webkit-transform: rotate(360deg)}}@keyframes swiper-preloader-spin {100% {transform: rotate(360deg)}}
三、精彩专栏
看到这里了就 【点赞，关注，收藏】 三连 支持下吧，你的支持是我创作的动力。
情人节程序员用HTML网页表白【七夕告白(520气球)】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
如果觉得《情人节程序员用HTML网页表白【七夕告白(520气球)】 HTML5七夕情人节表白网页源码 HT》对你有帮助，请点赞、收藏，并留下你的观点哦！
