❤ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (125套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！
📂文章目录
二、📚网站介绍三、🔗网站效果▶️1.视频演示🧩 2.图片演示四、💒 网站代码🧱HTML结构代码🏠CSS样式代码五、🎁更多源码二、📚网站介绍
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等
（3）📄 js文件包含：页面炫酷效果实现
三、🔗网站效果
▶️1.视频演示
109 告白气球，飞入我的心扉 表白网页
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPE 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><img src="static/music.png" style="position: fixed;z-index: 10001;top:10px;right:10px;" onclick="let m = document.querySelector('.song-audio-autoplay'); if (m.paused ) {m.play(); this.className = 'rotateImages'} else {m.pause(); this.className = ''}"><audio class="song-audio-autoplay" controls loop style="display: none;visibility: hidden"><source src="static/wanan-yanrenzhong.mp3"></source>Your browser isn't invited for super fun audio time.</audio><style type="text/css">.rotateImages{-webkit-animation:myRotate 10s linear infinite;animation:myRotate 10s linear infinite;}@-webkit-keyframes myRotate{0%{-webkit-transform: rotate(0deg);}50%{-webkit-transform: rotate(180deg);}100%{-webkit-transform: rotate(360deg);}}@keyframes myRotate{0%{-webkit-transform: rotate(0deg);}50%{-webkit-transform: rotate(180deg);}100%{-webkit-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="./static/boy-girl/2000(2).jpg"></div><div id="pBg1cNNqT-an-obj-11"><img height="113" width="85"src="./static/boy-girl/2000(2).jpg"></div><div id="pBg1cNNqT-an-obj-12"><img height="113" width="85"src="./static/boy-girl/2000(2).jpg"></div><div id="pBg1cNNqT-an-obj-13"><img height="113" width="85"src="./static/boy-girl/2000(2).jpg"></div><div id="pBg1cNNqT-an-obj-14"><img height="113" width="85"src="./static/boy-girl/2000(2).jpg"></div><div id="pBg1cNNqT-an-obj-15"><img height="113" width="85"src="./static/boy-girl/2000(2).jpg"></div><div id="pBg1cNNqT-an-obj-16"><img height="113" width="85"src="./static/boy-girl/2000(2).jpg"></div><div id="pBg1cNNqT-an-obj-17"><img height="113" width="85"src="./static/boy-girl/2000(2).jpg"></div><div id="pBg1cNNqT-an-obj-18"><img height="113" width="85"src="./static/boy-girl/2000(2).jpg"></div><div id="pBg1cNNqT-an-obj-19"><img height="113" width="85"src="./static/boy-girl/2000(2).jpg"></div></div><div id="pBg1cNNqT-an-obj-20"><div id="pBg1cNNqT-an-obj-21"><img height="61" width="135"src="./static/boy-girl/2000(3).jpg"></div><div id="pBg1cNNqT-an-obj-22"><img height="256" width="237"src="./static/boy-girl/2000(4).jpg"></div><div id="pBg1cNNqT-an-obj-23"><img height="159" width="104"src="./static/boy-girl/2000(5).jpg"></div></div><div id="pBg1cNNqT-an-obj-24"><div id="pBg1cNNqT-an-obj-25"><img height="401" width="195"src="./static/boy-girl/2000(6).jpg"></div><div id="pBg1cNNqT-an-obj-26"><img height="290" width="161"src="./static/boy-girl/2000(7).jpg"></div></div></div><script src="config.js"></script><script src="static/index.js"></script></body></html>
🏠CSS样式代码
body{background: #fe909b;}@keyframes ani-pBg1cNNqT-an-obj-6-0 {0% {-webkit-transform: translate3d(-48px, -137px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(42.9deg) scale3d(0.2, 0.2, 1);-webkit-animation-timing-function: linear;}100% {-webkit-transform: translate3d(-55px, -281px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(42.9deg) scale3d(0.08000000000000002, 0.08000000000000002, 1);-webkit-animation-timing-function: linear;}}@keyframes ani-pBg1cNNqT-an-obj-11-0 {0% {-webkit-transform: translate3d(108px, 38px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(45deg) scale3d(-0.23999999999999996, 0.26, 1);-webkit-animation-timing-function: linear;opacity: 1;}100% {-webkit-transform: translate3d(218px, 7px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(45deg) scale3d(-0.09599999999999999, 0.10400000000000001, 1);-webkit-animation-timing-function: linear;opacity: 0;}}@keyframes ani-pBg1cNNqT-an-obj-10-0 {0% {-webkit-transform: translate3d(14px, -142px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(26.3deg) scale3d(0.26, 0.26, 1);-webkit-animation-timing-function: linear;opacity: 1;}100% {-webkit-transform: translate3d(38px, -268px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(26.3deg) scale3d(0.078, 0.078, 1);-webkit-animation-timing-function: linear;opacity: 0;}}@keyframes ani-pBg1cNNqT-an-obj-9-0 {0% {-webkit-transform: translate3d(67px, -113px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(7.5deg) scale3d(0.17, 0.17, 1);-webkit-animation-timing-function: linear;opacity: 1;}100% {-webkit-transform: translate3d(78px, -249px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(7.5deg) scale3d(0.068, 0.068, 1);-webkit-animation-timing-function: linear;opacity: 0.3;}}@keyframes ani-pBg1cNNqT-an-obj-7-0 {0% {-webkit-transform: translate3d(-108px, -101px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(16.3deg) scale3d(-0.24, 0.25, 1);-webkit-animation-timing-function: linear;opacity: 1;}100% {-webkit-transform: translate3d(-138px, -262px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(16.3deg) scale3d(-0.096, 0.1, 1);-webkit-animation-timing-function: linear;opacity: 0.2;}}@keyframes ani-pBg1cNNqT-an-obj-8-0 {0% {-webkit-transform: translate3d(-34px, -148px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(11.8deg) scale3d(0.14, 0.14, 1);-webkit-animation-timing-function: linear;opacity: 1;}100% {-webkit-transform: translate3d(-33px, -255px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(11.8deg) scale3d(0.042, 0.042, 1);-webkit-animation-timing-function: linear;opacity: 0.2;}}@keyframes ani-pBg1cNNqT-an-obj-13-0 {0% {-webkit-transform: translate3d(85px, -105px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(38.2deg) scale3d(-0.23, 0.20653061224489797, 1);-webkit-animation-timing-function: linear;opacity: 1;}100% {-webkit-transform: translate3d(185px, -176px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(38.2deg) scale3d(-0.069, 0.061959183673469385, 1);-webkit-animation-timing-function: linear;opacity: 0;}}@keyframes ani-pBg1cNNqT-an-obj-12-0 {0% {-webkit-transform: translate3d(102px, -55px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(65.1deg) scale3d(0.17, 0.17, 1);-webkit-animation-timing-function: linear;opacity: 1;}100% {-webkit-transform: translate3d(168px, -152px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(65.1deg) scale3d(0.051000000000000004, 0.051000000000000004, 1);-webkit-animation-timing-function: linear;opacity: 0;}}@keyframes ani-pBg1cNNqT-an-obj-15-0 {0% {-webkit-transform: translate3d(-95px, -139px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(156.4deg) scale3d(-0.25, -0.25, 1);-webkit-animation-timing-function: linear;opacity: 1;}100% {-webkit-transform: translate3d(-104px, -270px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(156.4deg) scale3d(-0.125, -0.125, 1);-webkit-animation-timing-function: linear;opacity: 0;}}@keyframes ani-pBg1cNNqT-an-obj-14-0 {0% {-webkit-transform: translate3d(-129px, -120px, 0px) scale3d(-0.21103448275862072, 0.17, 1);-webkit-animation-timing-function: linear;opacity: 1;}100% {-webkit-transform: translate3d(-153px, -221px, 0px) scale3d(-0.21103448275862072, 0.17, 1);-webkit-animation-timing-function: linear;opacity: 0;}}@keyframes ani-pBg1cNNqT-an-obj-17-0 {0% {-webkit-transform: translate3d(-62px, -149px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(19.4deg) scale3d(-0.20869565217391306, 0.24, 1);-webkit-animation-timing-function: linear;opacity: 1;}100% {-webkit-transform: translate3d(-12px, -289px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(19.4deg) scale3d(-0.06260869565217392, 0.072, 1);-webkit-animation-timing-function: linear;opacity: 0;}}@keyframes ani-pBg1cNNqT-an-obj-16-0 {0% {-webkit-transform: translate3d(-24px, -138px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-0.8deg) scale3d(0.32, 0.32, 1);-webkit-animation-timing-function: linear;opacity: 1;}100% {-webkit-transform: translate3d(12px, -243px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-0.8deg) scale3d(0.16, 0.16, 1);-webkit-animation-timing-function: linear;opacity: 0;}}@keyframes ani-pBg1cNNqT-an-obj-19-0 {0% {-webkit-transform: translate3d(104px, -34px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(81.7deg) scale3d(-0.2836666666666667, 0.23, 1);-webkit-animation-timing-function: linear;opacity: 1;}100% {-webkit-transform: translate3d(214px, -24px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(91.7deg) scale3d(-0.11346666666666667, 0.09200000000000001, 1);-webkit-animation-timing-function: linear;opacity: 0;}}@keyframes ani-pBg1cNNqT-an-obj-18-0 {0% {-webkit-transform: translate3d(50px, -123px, 0px) scale3d(0.29, 0.29, 1);-webkit-animation-timing-function: linear;opacity: 1;}100% {-webkit-transform: translate3d(121px, -264px, 0px) scale3d(0.0116, 0.0116, 1);-webkit-animation-timing-function: linear;opacity: 0;}}
五、🎁更多源码
1.如果我的博客对你有帮助请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
