1000字范文 > HTML5七夕情人节表白网页制作【3D雪花展开相册】HTML+CSS+JavaScript 程序员表白网页

HTML5七夕情人节表白网页制作【3D雪花展开相册】HTML+CSS+JavaScript 程序员表白网页

时间：2021-06-26 01:19:58

这是程序员表白系列中的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 lang="en"><head><meta charset="UTF-8" /><title></title><script src="js/jquery.min.js"></script><script src="js/snow.js"></script><link type="text/css" href="css/style.css" rel="stylesheet" /></head><body><div class="snow-container"><div class="ziti"><span> ❤各位新年快乐呀！！ </span></div><div class="dongtai"><ul><li><img src="image/1.png" alt="" /></li><li><img src="image/2.png" alt="" /></li><li><img src="image/3.png" alt="" /></li><li><img src="image/4.png" alt="" /></li><li><img src="image/5.png" alt="" /></li><li><img src="image/6.png" alt="" /></li></ul></div></div></body></html>

2.CSS代码

@charset "utf-8";* {margin: 0;padding: 0;}html,body {width: 100%;height: 100%;background-image: url("../image/timg.jpg");background-repeat: no-repeat;background-size: 100% 100%;}.snow-container {position: fixed;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;pointer-events: none;}.dongtai {width: 200px;height: 200px;margin-top: 20%;margin-left: calc( 50% - 100px);position: absolute;}ul,li {margin: 0;padding: 0;}ul {width: 200px;height: 200px;transform-style: preserve-3d;transform-origin: 100px 100px -100px;/* 设置ul旋转的中心点在正方体中心 */background-color: #fff;list-style: none;position: absolute;animation: ani 10s infinite alternate;transform: rotateX(0deg) rotateY(0deg);}li {/* 装换为行内元素 */font-size: 60px;text-align: center;display: inline-block;width: 200px;height: 200px;position: absolute;border: 1px solid rgb(175, 209, 211);/* 让浏览器解析盒子的时候宽认为是border和padding的和 */box-sizing: border-box;}.dongtai ul li img {height: 100%;width: 100%;}li:nth-of-type(1) {background-size: cover;left: 0;top: 0;}li:nth-of-type(2) {background-size: cover;left: -200px;top: 0;transform-origin: right;animation: boo2 10s infinite alternate;}li:nth-of-type(3) {background-size: cover;left: 0;top: 0;animation: boo3 10s infinite alternate;}li:nth-of-type(4) {background-size: cover;left: 200px;top: 0;transform-origin: left;animation: boo4 10s infinite alternate;}li:nth-of-type(5) {background-size: cover;left: 0;top: -200px;transform-origin: bottom;animation: boo5 10s infinite alternate;}li:nth-of-type(6) {background-size: cover;left: 0;top: 200px;transform-origin: top;animation: boo6 10s infinite alternate;}@keyframes boo2 {0% {transform: rotateY(0deg);}20% {transform: rotateY(-45deg);}30% {transform: rotateY(-90deg);}100% {transform: rotateY(-90deg);}}@keyframes boo3 {0% {transform: translateZ(-10px) rotateY(0deg);}20% {transform: translateZ(-100px) rotateY(-90deg);}30% {transform: translateZ(-200px) rotateY(-180deg);}100% {transform: translateZ(-200px) rotateY(-180deg);}}@keyframes boo4 {0% {transform: rotateY(0deg);}20% {transform: rotateY(45deg);}30% {transform: rotateY(90deg);}100% {transform: rotateY(90deg);}}@keyframes boo5 {0% {transform: rotateX(0deg);}20% {transform: rotateX(45deg);}30% {transform: rotateX(90deg);}100% {transform: rotateX(90deg);}}@keyframes boo6 {0% {transform: rotateX(0deg);}20% {transform: rotateX(-45deg);}30% {transform: rotateX(-90deg);}100% {transform: rotateX(-90deg);}}@keyframes ani {0% {transform: rotateX(0deg) rotateY(0deg);}10% {transform: rotateX(0deg) rotateY(0deg);}20% {transform: rotateX(-45deg) rotateY(-45deg);}30% {transform: rotateX(-45deg) rotateY(-135deg);}40% {transform: rotateX(-45deg) rotateY(-215deg);}50% {transform: rotateX(-45deg) rotateY(-305deg);}60% {transform: rotateX(-45deg) rotateY(-395deg);}70% {transform: rotateX(-135deg) rotateY(-395deg);}80% {transform: rotateX(-225deg) rotateY(-395deg);}90% {transform: rotateX(-315deg) rotateY(-395deg);}100% {transform: rotateX(-405deg) rotateY(-395deg);}}.ziti {text-align: center;font-size: 60px;position: absolute;margin-top: 100px;margin-bottom: 100px;margin-left: calc( 50% - 240px);}span {font-family: "微软雅黑";line-height: 50px;/*关键代码*/background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, rgb(196, 30, 30) 50%, rgb(41, 197, 111) 75%, rgb(175, 23, 221));-webkit-text-fill-color: transparent;-webkit-background-clip: text;-webkit-background-size: 200% 100%;-webkit-animation: masked-animation 4s infinite linear;}/*关键代码*/@-webkit-keyframes masked-animation {0% {background-position: 0 0;}100% {background-position: -100% 0;}}