制作一个简单七夕情人节表白网页（HTML+CSS）

网站介绍基于html+css+js制作的表白网页代码，可以直接替换文字和图片即可使用作品效果视频演示https://live.csdn.net/v/embed/237297 ] 截图演示在这里插入图片描述

---

作品代码隣HTML代码 ta charset="utf-8" /> ink type="text/css" href="./css/style.css" rel="stylesheet" />

CSS代码@charset "utf-8";* { margin: 0; padding: 0;}body { max-width: 100%; min-width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; position: absolute; margin-left: auto; margin-right: auto;}li { list-style: none;}.box { width: 200px; height: 200px; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; position: absolute; margin-left: 42%; margin-top: 22%; -webkit-transform-style: preserve-3d; -webkit-transform: rotateX; -webkit-animation: move 5s linear infinite;}.maxbox li { width: 200px; height: 200px; background: #fff; border: 1px solid #ccc; position: absolute; left: 0; top: 0; opacity: 0.2; -webkit-transition: all 1s ease;}.maxbox li:nth-child { -webkit-transform: translateZ;}=.maxbox li:nth-child { -webkit-transform: rotateX translateZ;}.maxbox li:nth-child { -webkit-transform: rotateX translateZ;}.maxbox li:nth-child { -webkit-transform: rotateX translateZ;}.maxbox li:nth-child { -webkit-transform: rotateY translateZ;}.maxbox li:nth-child { -webkit-transform: rotateY translateZ;}.box:hover ol li:nth-child { -webkit-transform: translateZ; width: 400px; height: 400px; opacity: 0.8; left: -100px; top: -100px;}.box:hover ol li:nth-child { -webkit-transform: rotateX translateZ; width: 400px; height: 400px; opacity: 0.8; left: -100px; top: -100px;}.box:hover ol li:nth-child { -webkit-transform: rotateX translateZ; width: 400px; height: 400px; opacity: 0.8; left: -100px; top: -100px;}.box:hover ol li:nth-child { -webkit-transform: rotateX translateZ; width: 400px; height: 400px; opacity: 0.8; left: -100px; top: -100px;}.box:hover ol li:nth-child { -webkit-transform: rotateY translateZ; width: 400px; height: 400px; opacity: 0.8; left: -100px; top: -100px;}.box:hover ol li:nth-child { -webkit-transform: rotateY translateZ; width: 400px; height: 400px; opacity: 0.8; left: -100px; top: -100px;}@keyframes move { 0% {-webkit-transform: rotateX rotateY; } 100% {-webkit-transform: rotateX rotateY; }}

---

更多源码【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识Gitee仓库地址： https://gitee.com/zhanyuqiu2022/my-app