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

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

<!--* @Author: your name* @Date: 2020-12-30 10:24:14* @LastEditTime: 2020-12-30 10:28:22* @LastEditors: Please set LastEditors* @Description: In User Settings Edit* @FilePath: \正方体旋转动画\index.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="data:image/1.png" alt="" /></li><li><img src="data:image/2.png" alt="" /></li><li><img src="data:image/3.png" alt="" /></li><li><img src="data:image/4.png" alt="" /></li><li><img src="data:image/5.png" alt="" /></li><li><img src="data: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;}
}

三、精彩专栏

看到这里了就【点赞，关注，收藏】三连支持下吧，你的支持是我创作的动力。

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

HTML5期末大作业：网站——卡通漫画游戏官方网页 (萌王) 13个页面 HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计
HTML5期末大作业:HTML5期末大作业:网站--卡通游戏官方网页 (萌王)HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个 ...
HTML5七夕情人节表白网页制作【结婚倒计时】HTML+CSS+JavaScript html生日快乐祝福网页制作
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
HTML5期末大作业：网站——卡通漫画游戏官方网页 (萌王) 13个页面 HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计...
HTML5期末大作业:HTML5期末大作业:网站--卡通游戏官方网页 (萌王)HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个 ...
抖音程序员HTML相册,快手抖音程序员表白女朋友3D立体相册源码html网页相册代码...
前几天分享了一套源码,今天又为大家带来一套类似的源码,希望大家喜欢! 快手抖音很火的程序员女朋友3D立体相册源码html网页相册代码,经测试在IE8浏览器下无法预览,建议使用支持HTML5与css3效 ...
web网页设计期末课程大作业 HTML+CSS+JavaScript仿天猫购物商城设计实例企业网站制作
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
HTML5期末大作业：网站——响应式网络游戏官网HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网页
HTML5期末大作业:网站--响应式网络游戏官网HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网页 ...
HTML5期末大作业：中国传统节日网页设计——端午节(9个页面) HTML+CSS+JavaScript 节日网页HTML代码学生网页课程设计期末作业下载
HTML5期末大作业:中国传统节日网站设计--端午节(9个页面) HTML+CSS+JavaScript 节日网页HTML代码学生网页课程设计期末作业下载临近期末, 你还在为HTML网页设计结课作 ...
HTML5期末大作业：游戏网站——网络游戏官网(悦世界) 6个页面 HTML+CSS+JavaScript ~ ~ 学生HTML个人网页作业作品下载
HTML5期末大作业:游戏网站--网络游戏官网(悦世界) 6个页面 HTML+CSS+JavaScript ~ ~ 学生HTML个人网页作业作品下载临近期末, 你还在为HTML网页设计结课作业,老师 ...
最近分享一款抖音上很火的七夕节程序员表白页面_html5七夕表白放烟花动画特效...
html5七夕表白放烟花动画特效最近分享一款抖音上很火的七夕节程序员表白页面.小姐姐,我好喜欢你,你愿意做我女朋友吗? 表白成功触发烟花背景动画特效. 表白内容:有人说,人的一生会遇到2920万人, ...

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

文章目录

一、网页介绍

一、网页效果

二、代码展示

1.HTML代码

2.CSS代码

三、精彩专栏

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

最新文章

热门文章

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

文章目录

一、网页介绍

一、网页效果

二、代码展示

1.HTML代码

2.CSS代码

三、精彩专栏

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

最新文章

热门文章

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

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