一.女友相册
html
复制代码
<!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>
二.霓虹灯效果可输入字
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>
三.螺纹点动效果
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>