首页 > 分享 > HTML5七夕情人节表白网页制作【css求婚动画源码】HTML+CSS+JavaScript 程序员表白代码

HTML5七夕情人节表白网页制作【css求婚动画源码】HTML+CSS+JavaScript 程序员表白代码

花匠小妙招
2024-11-25 22:12

这是程序员表白系列中的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代码

代码如下（示例）：以下仅展示部分代码供参考~

<html><head><meta charset="utf-8"><link rel="stylesheet" href="wedding.css"><title>模仿CSS动画的求婚小动画</title></head><body><div class="w-t"><div class="w-t-m">亲爱的，嫁给我好吗？</div><img src="png/boom.png" alt="" class="boom1"><img src="png/boom.png" alt="" class="boom2"><img src="png/boom.png" alt="" class="boom3"></div><div class="w-p"><div class="w-m"><img src="png/man.png" alt=""></div><div class="w-w"><img src="png/woman.png" alt=""></div><div class="w-f"><img src="png/flower.png" alt=""></div></div><div class="w-fls"><img src="png/flowers1.png" alt=""><img src="png/flowers2.png" alt=""><img src="png/flowers1.png" alt=""><img src="png/flowers2.png" alt=""><img src="png/flowers1.png" alt=""><img src="png/flowers2.png" alt=""></div><div class="w-fls w-2"><img src="png/flowers1.png" alt=""><img src="png/flowers2.png" alt=""><img src="png/flowers1.png" alt=""><img src="png/flowers2.png" alt=""><img src="png/flowers1.png" alt=""><img src="png/flowers2.png" alt=""></div></body> </html> 1234567891011121314151617181920212223242526272829303132333435363738394041424344

2.CSS代码

/*top 烟花字体 */ .w-t{margin: 100px auto;width: 500px; } .w-t img{opacity: 0; animation: bloom 2s ease 1.2s infinite; } .w-t img.boom2{float: right;animation: bloom 2s ease 1.5s infinite; } .w-t img.boom3{position: absolute;margin-top: 40px;animation: bloom 2s ease 1.4s infinite; } @keyframes bloom{0% { transform: scale(0,0);}100% {opacity: 1; transform: scale(1,1);} } .w-t-m{position: absolute;left: 50%;z-index: 10;line-height: 80px;color: #ff720a;letter-spacing: 5px;opacity: 0;animation: titleBloom 1s linear 1s both;font-size: 26px; margin-left: -125px; } @keyframes titleBloom{0% { transform: translate(-50px);}100% {opacity: 1; transform: translate(0);} } /*人物类 */ .w-p{margin: -50px auto;width: 1000px;overflow: hidden; } .w-m{float: left;width: 50%; } .w-m img{margin-right: 0;float: right;margin-top: 60px;animation: toWoman 0.5s ease .5s both; } @keyframes toWoman{0%{opacity: 0;transform: translate(-200px);}100%{opacity: 1;transform: translate(0);} } .w-w{float: right;width: 50%; } .w-w img{margin-left: 0;float: left;animation: showW 0.8s ease 0s both; } @keyframes showW{0%{opacity: 0;}100%{opacity: 1;} } .w-f{ position: absolute; z-index: 20; left: 50%; margin-left: -30px; margin-top: 75px; } .w-f img{width: 60px;animation: show 0.4s ease 1s both; } @keyframes show{0%{opacity: 0;transform: scale(0.1,0.1);}100%{opacity: 1;transform: scale(1,1);} } .w-p:after{clear:both;clear:both;content:'.';display:block;height:0;visibility:hidden;overflow:hidden; } /*flowers*/ .w-fls{width: 820px;margin: 0 auto; } .w-fls img{height: 120px;z-index: 400;animation: showFlows 0.4s ease 2.3s both; } @keyframes showFlows{0%{opacity: 0;transform: translate(0,200px);}100%{opacity: 1;transform: translate(0);} } .w-2{margin-top: -130px;padding-left: 100px; } .w-2 img{animation: showFlows 0.4s ease 2.7s both; } 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145