html相册代码大全

个人主页地址（含一些有趣的功能和一些效果的在线演示）：皮小孩的个人主页
本文共有八个相册效果，照片可以替换成女朋友照片，背景音乐也可以换。可以去我的资源下载所有代码----->html相册代码大全

第一个代码有详细的使用说明，其他的修改方法也是类似的。

最新效果可以去看我的视频—>>>女朋友炫酷照片墙 绝对高大上！！！绝对好看！！
女朋友生日快乐代码—>>>html生日快乐代码
html表白代码大全—>>>html表白代码大全

代码1：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>致青春</title><style>*{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 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>
<script>
...
</script>
<audio autoplay="autoplay" loop="loop" preload="auto"src="http://music.163.com/song/media/outer/url?id=526464145.mp3">
</audio></body>
</html>

代码1说明：
不是完整代码，需要去我的资源下载。
代码1效果：

代码2：

<!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="data:image/1.jpg" alt=""></li>
<li><img src="data:image/2.jpg" alt=""></li>
<li><img src="data:image/3.jpg" alt=""></li>
<li><img src="data:image/4.jpg" alt=""></li>
<li><img src="data:image/5.jpg" alt=""></li>
<li><img src="data:image/6.jpg" alt=""></li>
</ul>
</div>
</div>
<audio autoplay="autoplay" loop="loop" preload="auto"src="http://music.163.com/song/media/outer/url?id=1827600686.mp3">
</audio>
</body>
</html>

代码2说明：
css文件和js文件没有给出来，可以去我的资源下载。
代码2效果：

代码3：

<!DOCTYPE HTML >
<html>
<head>
<title>照片墙</title>
<meta http-equiv="imagetoolbar" content="no">
<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></head><body><div id="screen"></div><div id="bankImages">
<img alt="" src="https://c-ssl.duitang.com/uploads/item/202004/01/20200401203445_udvuq.jpg">
</div>
<div id="FPS"></div>
<audio autoplay="autoplay" loop="loop" preload="auto"src="http://music.163.com/song/media/outer/url?id=1827600686.mp3">
</audio>
</body>
</html>

代码3说明：
可以去我的资源下载完整代码。
代码3效果：

代码4：

<!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">&lt;</button><ul class="con"></ul><button class="right">&gt;</button></div><script src="js/animation.js"></script><audio autoplay="autoplay" loop="loop" preload="auto"src="http://music.163.com/song/media/outer/url?id=1824025894.mp3">
</audio>
</body>
</html>

代码4说明：
js文件没有给出，可以去我的资源下载。
代码4效果：

代码5：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="midground" class="wall"></div>
<div id="foreground" class="wall"></div>
<div class="wrap"><img src="data:images/1.jpg" alt="" class="box"><img src="data:images/2.jpg" alt="" class="box"><img src="data:images/3.jpg" alt="" class="box"><img src="data:images/4.jpg" alt="" class="box"><img src="data:images/5.jpg" alt="" class="box"><img src="data:images/6.jpg" alt="" class="box"> <img src="data:images/7.jpg" alt="" class="square "><img src="data:images/8.jpg" alt="" class="square "><img src="data:images/9.jpg" alt="" class="square "><img src="data:images/10.jpg" alt="" class="square "> <img src="data:images/11.jpg" alt="" class="square "><img src="data:images/12.jpg" alt="" class="square "></div><audio autoplay="autoplay" loop="loop" preload="auto"src="http://music.163.com/song/media/outer/url?id=1497588709.mp3">
</audio>
</body>
</html>

代码5说明：

这个效果下载地址：代码5完整项目（含使用说明）

代码5效果（含背景音乐）：

演示地址：效果5演示地址

代码6：

<!DOCTYPE html>
<html><head><title>允儿照片墙</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><style>html, body {height: 100%;}.element .details {position: absolute;bottom: 15px;left: 0px;right: 0px;font-size: 12px;color: rgba(127,255,255,0.75);}button {color: rgba(127,255,255,0.75);background: transparent;outline: 1px solid rgba(127,255,255,0.75);border: 0px;padding: 5px 10px;cursor: pointer;}button:hover {background-color: rgba(0,255,255,0.5);}button:active {color: #000000;background-color: rgba(0,255,255,0.75);}.show_info{position:fixed;background-color:rgba(0,0,0,.6);padding:10px;width:300px;margin:0 auto;left: 0;right:0;border-radius: 5px;box-shadow: 0 0 10px 0 #fff;top:30%;}.show_info img{display:block;margin:auto;border-radius: 5px;box-shadow: 0 0 10px 0 #888;}.show_info .intro{color:#fff;text-indent:20px;margin-top:10px;height:65px;overflow:hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}.show_info .info_my{text-align: center;}.show_info .info_my > *{display:inline-block !important;vertical-align: middle;}.show_info .info_my .info_mem{color:#fff;max-width:120px;}.show_info .info_my .info_mem > div{text-align: left;}.show_info .info_my .info_mem > div.nickname{max-width: 120px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}</style><link rel="stylesheet" href="css/animate.min.css"></head><body><script src="js/jquery.min.js"></script><script src="js/three.js"></script><script src="js/tween.min.js"></script><script src="js/TrackballControls.js"></script><script src="js/CSS3DRenderer.js"></script><div id="container"></div><div id="info">允儿照片墙</div><div id="menu"><button id="table">表格</button><button id="sphere">球球</button><button id="helix">螺旋</button><button id="grid">格子</button></div><div class="show_info animated" style="display:none;"><div class="info_my"><img src="img/c.jpg" /><div class="info_mem"><div class="nickname">林允儿</div><div class="id">ID:兮夜女朋友</div><div class="vote">性别：女</div></div></div><div class="intro">想成为一个可以承担起责任的人</div></div><script>
。。。</script><audio autoplay="autoplay" loop="loop" preload="auto"src="http://music.163.com/song/media/outer/url?id=1828026086.mp3">
</audio>  </body>
</html>

代码6说明：
css和js文件没有给出，可以去我的资源下载。
代码6效果：

代码7：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>*{padding: 0;margin: 0;}img{width:200px;height: 300px;}body{ background-color: #313131; }@keyframes fn{0% {transform:rotateX(-15deg) rotateY(0deg);}100%{transform:rotateX(-15deg) rotateY(360deg);}}@-moz-keyframes fn{0% {transform:rotateX(-15deg) rotateY(0deg);}100%{transform:rotateX(-15deg) rotateY(360deg);}}@-ms-keyframes fn{0% {transform:rotateX(-15deg) rotateY(0deg);}100%{transform:rotateX(-15deg) rotateY(360deg);}}@-webkit-keyframes fn{0% {transform:rotateX(-15deg) rotateY(0deg);}100%{transform:rotateX(-15deg) rotateY(360deg);}}.box{              width:200px;height:300px;position:relative;margin:auto;margin-top:150px;transform-style:preserve-3d;transform:rotateX(-10deg);animation: fn 10s;animation-iteration-count: infinite;animation-timing-function: linear;position: relative}.box:hover{animation-play-state: paused;}.box>div{width:200px;height:300px;position: absolute;left:0;top:0;}</style></head><body><div class="box"><div style="transform: rotateY(0deg) translateZ(275px);"><img src="img/1.jpg" ></div><div style="transform: rotateY(40deg) translateZ(275px);"><img src="img/2.jpg"></div><div style="transform: rotateY(80deg) translateZ(275px);"><img src="img/3.jpg"></div><div style="transform: rotateY(120deg) translateZ(275px);"><img src="img/4.jpg"></div><div style="transform: rotateY(160deg) translateZ(275px);"><img src="img/5.jpg"></div><div style="transform: rotateY(200deg) translateZ(275px);"><img src="img/6.jpg"></div><div style="transform: rotateY(240deg) translateZ(275px);"><img src="img/7.jpg"></div><div style="transform: rotateY(280deg) translateZ(275px);"><img src="img/8.jpg"></div><div style="transform: rotateY(320deg) translateZ(275px);"><img src="img/9.jpg" ></div>                   </div><audio autoplay="autoplay" loop="loop" preload="auto"src="http://music.163.com/song/media/outer/url?id=1828026086.mp3">
</audio></body>
</html>

代码7说明：
电脑桌面新建一个txt文本，把代码复制进去，保存后右击重命名，把后缀改为html。最后需要自己建一个img文件夹存放图片。（和html文件放在一个文件夹下，里面的图片命名为1.jpg、2.jpg等，一共9张）
代码7效果：

代码8：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>爱心</title><style type="text/css">*{margin: 0px;border: 0px;}body{overflow: hidden;background-color: #000000;}.container{position: relative;left: 0;top: 0;bottom: 0;right: 0;margin: auto;height: 260px;width: 200px;transform-origin: 50% 130%;transform-style: preserve-3d;animation: 8s rotate linear infinite;}@keyframes rotate{from{transform:rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);}}.square{position: relative;width: 100px;height: 100px;transform:translateX(50px) translateY(300px) translateZ(50px);transform-style: preserve-3d;}.square div{position: absolute;top: 0;left: 0;width: 100px;height: 100px;}.square div:nth-child(1){top: 100px;transform-origin: top;transform:rotateX(-90deg);}.square div:nth-child(2){left: 100px;transform-origin: left;transform:rotateY(90deg);}.square div:nth-child(3){left: -100px;transform-origin: right;transform:rotateY(-90deg);}.square div:nth-child(4){top: -100px;transform-origin: bottom;transform:rotateX(90deg);}.square div:nth-child(6){top:0;transform:translateZ(-100px);}.square div:nth-child(5){}.heart{position: absolute;top:0;left:0;height: 260px;width: 200px;border: 2px solid red;margin: 200px auto;border-radius: 50% 50% 0%/50% 50% 0%;border-bottom: 0;border-left: 0;}img{width: 100px;height:100px;}</style>
</head>
<body><div class="container"><div class="square"><div><img src="https://c-ssl.duitang.com/uploads/item/202004/01/20200401124333_qspom.jpg"></div><div><img src="https://c-ssl.duitang.com/uploads/item/202004/01/20200401124340_rimpa.jpeg"></div><div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608466964941&di=79097818e33bb2b7cf01d4911db7be02&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201909%2F26%2F20190926135456_L4NeB.thumb.400_0.jpeg"></div><div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608466964941&di=1f5ee0885c6b3b5568240a581256abe6&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201806%2F24%2F20180624082734_otodl.jpg"></div><div><img src="https://c-ssl.duitang.com/uploads/item/202003/31/20200331135146_ddrvg.jpg"></div><div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608466964941&di=86ccf8b49b111bbf178b95d054ac8f72&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201811%2F20%2F20181120104318_rtrct.jpg"></div></div></div>
<audio autoplay="autopaly" loop="loop" id="audios" preload="auto"><source src="http://music.163.com/song/media/outer/url?id=1474411443.mp3" type="audio/mp3" />
</audio>
</body>
</html>

代码8补充说明：
代码太长没有全部贴出，里面的图片地址是网上找，你也可以换成本地图片的地址。

下载地址：代码8完整项目（含使用说明）

效果8：

可以去我的资源下载所有代码------->html相册代码大全

最新效果可以去看我的视频—>>>女朋友炫酷照片墙 绝对高大上！！！绝对好看！！
女朋友生日快乐代码—>>>html生日快乐代码
html表白代码大全—>>>html表白代码大全
个人主页地址：皮小孩的个人主页

html相册代码大全相关推荐

抖音里面html相册代码大全,分享一下抖音上火的程序员女朋友相册代码
抖音上火爆的3D旋转相册代码,纯H5写出来效果是这样的: 鼠标移动上去裂变. 直接上代码 css部分:html{ background:linear-gradient(#FF6666 0%,#3366 ...
Python网络爬虫实战项目代码大全（长期更新，欢迎补充）
Python网络爬虫实战项目代码大全(长期更新,欢迎补充) 阿橙 · 1 个月内 WechatSogou [1]- 微信公众号爬虫.基于搜狗微信搜索的微信公众号爬虫接口,可以扩展成基于搜狗搜索的爬虫, ...
html爱心表白代码（最全html表白代码大全可复制）
html爱心表白代码(最全html表白代码大全可复制) html表白代码大全可复制,浪漫的html表白特效网页制作源代码 1.抖音非常火的一款表白源码抖音最火表白源码HTML biu biu biu ...
《代码大全2》读后感czz
经老师推荐,买了一本<代码大全2>,花了近3个月的时间看完了,看完后觉得还有很多值得回味的地方,而且每部分之后作者还推荐了不少经典书籍.所以,作个读书心得.全书的主题是软件构建,关于软件构 ...
与《代码大全》齐名的经典著作
与<代码大全>齐名的经典著作揭示微软成功的技术奥秘 C语言高手的秘籍 "本书所蕴含的思想精髓可以说是不朽的,它彻底改变了我的编程方式." --David Kline, ...
JS+CSS打造一款漂亮绿色相册代码
代码简介: JavaScript+CSS完成的漂亮相册展示效果,运用了大量CSS代码,JS代码并不多,它可以自动获取链接图片的地址以及TITLE标签的信息,当鼠标点击小图的时候它就会自动加载大图,类似 ...
javascript常用代码大全
http://caibaojian.com/288.html 原文链接 jquery选中radio//如果之前有选中的,则把选中radio取消掉 $("#tj_cat .pro_ca ...
用python画动态樱花_利用python画一棵漂亮的樱花树，turtle画图代码大全,此处感谢知乎大佬小白...
利用python画一棵漂亮的樱花树,turtle画图代码大全,此处感谢知乎大佬小白此处感谢知乎大佬小白练手练习一下比较流行的turtle(海龟库) 画一棵漂亮的樱花树,效果如下: ps: 是动态 ...
python基础代码事例-python基础代码大全
[实例简介] python代码大全,适用于基础python学习者,里面的代码基本上是基础学习者必经过程. Python学习入门很快,但学习之路任重道远 [实例截图] [核心代码] python代码大全 ...

html相册代码大全

html相册代码大全相关推荐

最新文章

热门文章