HTML5七夕情人节表白网页制作【粉色樱花雨3D相册】HTML+CSS+JavaScript
以下是一个简单的HTML5七夕情人节表白网页示例，使用了HTML、CSS和JavaScript来创建一个粉色樱花雨的3D相册效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>七夕情人节表白网页</title>
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.gallery {
perspective: 1000px;
position: relative;
height: 100%;
overflow: hidden;
}
.album {
width: 300px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
transform: translate(-50%, -50%) rotateX(60deg) rotateY(-10deg);
animation: rotate 10s infinite linear;
}
.photo {
width: 100%;
height: 100%;
position: absolute;
background-size: cover;
box-shadow: 0 0 5px #fff;
backface-visibility: hidden;
transition: transform 1s;
}
.album:hover .photo:nth-child(1) { transform: rotateY(0deg) translateZ(300px); }
.album:hover .photo:nth-child(2) { transform: rotateY(36deg) translateZ(300px); }
.album:hover .photo:nth-child(3) { transform: rotateY(72deg) translateZ(300px); }
.album:hover .photo:nth-child(4) { transform: rotateY(108deg) translateZ(300px); }
.album:hover .photo:nth-child(5) { transform: rotateY(144deg) translateZ(300px); }
.album:hover .photo:nth-child(6) { transform: rotateY(180deg) translateZ(300px); }
.album:hover .photo:nth-child(7) { transform: rotateY(216deg) translateZ(300px); }
.album:hover .photo:nth-child(8) { transform: rotateY(252deg) translateZ(300px); }
.album:hover .photo:nth-child(9) { transform: rotateY(288deg) translateZ(300px); }
.album:hover .photo:nth-child(10) { transform: rotateY(324deg) translateZ(300px); }
@keyframes rotate {
from { transform: translate(-50%, -50%) rotateX(60deg) rotateY(-10deg); }
to { transform: translate(-50%, -50%) rotateX(60deg) rotateY(360deg); }
}
</style>
</head>
<body>
<div class="gallery">
<div class="album">
<div class="photo" style="background-image: url('photo1.jpg');"></div>
<div class="photo" style="background-image: url('photo2.jpg');"></div>
<div class="photo" style="background-image: url('photo3.jpg');"></div>
<div class="photo" style="background-image: url('photo4.jpg');"></div>
<div class="photo" style="background-image: url('photo5.jpg');"></div>
<div class="photo" style="ba
评论已关闭