时间：2023-07-24 06:06:01 | 来源：网站运营
时间：2023-07-24 06:06:01 来源：网站运营
html相册代码（1）：本文共有4个相册效果，都十分好看，照片可以替换成女朋友照片。
在线咨询
*{margin: 0;padding: 0;} html,body{height: 100%;} body{ overflow: hidden; display: flex; background: #000; perspective: 1000px; transform-style: preserve-3d; } #box{ position: relative; display: flex; width: 130px; height: 200px; margin: auto; transform-style: preserve-3d; transform: rotateX(-10deg); } #box > div{ transform-style: preserve-3d; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 200px; font-size: 50px; text-align: center; box-shadow:0 0 10px #fff; -webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.8) 100%); } /* #box > div:nth-child(1){ background: skyblue; transform: translate3d(0,0,300px) rotateY(45deg); } #box > div:nth-child(2){ background: pink; transform: rotateY(0deg); } #box > div:nth-child(3){ background: purple; transform: translate3d(0,0,300px) rotateY(-45deg); } */ #box p{ position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; width: 1200px; height: 1200px; background: -webkit-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0)); border-radius: 50%; transform: rotateX(90deg) translate3d(-600px,0,-105px); } </style></head><body><div id="box"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <p></p></div></body></html>代码1说明：<!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="image/1.jpg" alt=""></li><li><img src="image/2.jpg" alt=""></li><li><img src="image/3.jpg" alt=""></li><li><img src="image/4.jpg" alt=""></li><li><img src="image/5.jpg" alt=""></li><li><img src="image/6.jpg" alt=""></li></ul></div></div></body></html>代码2说明：<style type="text/css">html {overflow: hidden;}body {position: absolute;margin: 0px;padding: 0px;background: #fff;width: 100%;height: 100%;}#screen {position: absolute;left: 10%;top: 10%;width: 80%;height: 80%;background: #fff;}#screen img {position: absolute;cursor: pointer;width: 0px;height: 0px;-ms-interpolation-mode:nearest-neighbor;}#bankImages {visibility: hidden;}#FPS {position: absolute;right: 5px;bottom: 5px;font-size: 10px;color: #666;font-family: verdana;}</style><script type="text/javascript">/* ==== Easing function ==== */var Library = {};Library.ease = function () {this.target = 0;this.position = 0;this.move = function (target, speed) {this.position += (target - this.position) * speed;}}w : i.width,h : i.height};o.point3D.z.target = z;/* ==== push object ==== */o.point2D = {};tv.O.push(o);/* ==== on mouse over event ==== */o.onmouseover = function () {if (this != tv.o) {structure.push({ img:img[0], x:i, y:j, z:0, sw:.5, sh:.5 });/* ==== let's go ==== */tv.init(structure, 350, -200, .005, .0025);}</script></head><body><div id="screen"></div><div id="bankImages"><img alt="" src="1.png"></div><div id="FPS"></div></body></html>代码3说明：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{margin:0;padding:0;} body{ overflow: hidden; background-color: #000; } ul{list-style-type: none;} .wrap{ perspective: 800px; width: 1120px; height: 630px; margin:50px auto; } .con{ position:relative; width: 100%; height: 100%; } .con > li{ transform-style: preserve-3d; } .wrap > button{ position: absolute; z-index:1; width: 30px; height: 50px; top:50%; background-color: rgba(250,250,250,.5); border:none; font-size: 25px; color:#000; cursor: pointer; transform: translateY(-50%); outline:none; } .left{ left:0; } .right{ right:0; } </style></head><body> <div class="wrap"> <button class="left"><</button> <ul class="con"></ul> <button class="right">></button> </div> <script src="js/animation.js"></script></body></html>代码4说明：关键词：相册
