一.女友相册
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>女友相册html代码</title><style>*{margin: 0;padding: 0;background-color: black;}:root{--uu: 100px;--rot:-100px;--fu:-200px;}.box{width: 200px;height: 200px;background-color: transparent;position: relative;top: 30vh;left: 30vw;animation: move 10s infinite;animation-timing-function: linear;transform-style: preserve-3d; /* Preserve 3D space */}.box div{position: absolute;width: 200px;height: 200px;border: 2px solid white;}.box:hover{--uu:200px;--rot:-200px;}@keyframes move{0%{transform: rotateY(0deg) rotateX(-25deg) ;}100%{transform: rotateY(360deg) rotateX(-25deg);}}.front {transform: translateZ(var(--uu));
}.back {transform: translateZ(var(--rot)) rotateY(180deg);
}.right {transform: rotateY(90deg) translateZ(var(--uu));
}.left {transform: rotateY(-90deg) translateZ(var(--uu));
}.top {transform: rotateX(90deg) translateZ(var(--uu));
}.bottom {transform: rotateX(-90deg) translateZ(var(--uu));
}</style>
</head>
<body><div class="box"><div class="front"><img src="img/1.png" ></div><div class="back"><img src="img/2.png" ></div><div class="right"><img src="img/3.png" ></div><div class="left"><img src="img/4.png" ></div><div class="top"><img src="img/5.png" ></div><div class="bottom"><img src="img/6.png" ></div></div>
</body>
</html>
二.霓虹灯效果可输入字
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>霓虹灯效果可输入字</title>
</head>
<style>*{margin: 0;padding: 0;box-sizing: border-box;font-family: arial;}body{background-color: black;color: white;height: 100vh;display: flex;justify-content: center;align-items: center;}.op{position: relative;letter-spacing: 15px;text-transform: uppercase;text-align: center;line-height: 0.7em;outline: none;-webkit-box-reflect: below 1px linear-gradient(transparent,#0005);animation: move 2s linear infinite;}@keyframes move{0%{color: aqua;}50%{color: rgb(255, 255, 255);transform: translateY(-10px);text-shadow: 0 0 10px rgb(234, 14, 14),0 0 20px rgb(255, 0, 0),0 0 30px rgb(255, 0, 0),0 0 40px rgb(255, 0, 0),0 0 70px rgb(255, 0, 0);}100%{transform: translateY(0px);}}
</style>
<body><h1 class="op" contenteditable="true">Hello word</h1>
</body>
</html>
三.螺纹点动效果
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>螺纹点动效果</title>
</head>
<style>* {margin: 0;padding: 0;}:root {--u: 260s;--r: 0;--g: 0;--b: 0;}body {background-color: rgb(3, 0, 0);box-sizing: border-box;overflow: hidden;}.container {position: relative;}button {width: 10px;height: 10px;background-color: rgb(var(--r), var(--g), var(--b));border-radius: 5px;display: inline-block;box-shadow: 0 0 10px red,0 0 25px red,0 0 50px red,0 0 100px red;animation: animate calc(var(--u)/var(--i)) infinite;transform-style: preserve-3d;-webkit-box-reflect: below var(--g)px linear-gradient(transparent, rgba(var(--g),var(--r),var(--b)));}@keyframes animate {0% {transform: translateX(0) translateY(-var(--g)vh) scale(0);}100% {transform: translateX(0) translateY(100vh) scale(1); }}</style><body><div id="container"></div><script>const container = document.getElementById('container');for (var i = 0; i < 120; i++) {const span = document.createElement('button');span.classList.add('mySpan');span.style.setProperty('--i', i);container.appendChild(span);}document.addEventListener('click', function () {// 获取元素var element = document.documentElement;// 获取CSS变量的值var uValue = getComputedStyle(element).getPropertyValue('--u');var rValue = getComputedStyle(element).getPropertyValue('--r');var gValue = getComputedStyle(element).getPropertyValue('--g');var bValue = getComputedStyle(element).getPropertyValue('--b');function numvar(str) {var numvalue = parseFloat(str);var numbuc = Math.floor(Math.random() * 256);return numbuc;}// 移除字符串中的单位，以便进行数值计算var numericUValue = parseFloat(uValue);if (numericUValue === 40) {numericUValue = 120;}var newValue = numericUValue - 20;var newValue = newValue + "s";// 更新CSS变量的值document.documentElement.style.setProperty('--u', newValue);document.documentElement.style.setProperty('--r', numvar(rValue));document.documentElement.style.setProperty('--g', numvar(gValue));document.documentElement.style.setProperty('--b', numvar(bValue));// 输出CSS变量的值console.log(uValue);console.log(numvar(rValue));console.log(numvar(gValue));console.log(numvar(bValue));});</script></body></html>
 的输出结果是？)
