整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天分享一个CSS图片浏览效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS相册浏览</title>
<script src="urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct="UA-780254-3";
urchinTracker();
</script>
<style type="text/css">
h2,ul,li{margin:0;padding:0;list-style:none;}
img{border:0;}
.imgview{
position:absolute;
top:30px;
z-index:80;
float:left;
width:857px;
height:auto;
min-height:440px;
}
.imgview a{
text-decoration:none;
}
.imgview h2{
position:absolute;
top:10px;
left:10px;
width:290px;
height:30px;
background-color:#FFFFFF;
color:#000000;
font-size:1.2em;
text-indent:10px;
line-height:30px;
}
.imgview ul{
position:absolute;
top:48px;
left:10px;
z-index:90;
width:290px;
height:auto;
min-height:230px;
background-color:#FFFFFF;
}
.imgview ul li{
float:left;
width:82px;
height:59px;
margin:8px 6px 7px;
border:1px solid #DEDEDE;
}
.imgview ul li strong{
display:none;
}
.imgview ul li a:hover{
display:block;
width:100%;
height:100%;
}
.imgview ul li a:focus strong,
.imgview ul li a:active strong{
display:block;
position:absolute;
top:350px;
left:300px;
z-indent:100;
width:537px;
height:30px;
background-color:#FFFFFF;
color:#000000;
text-indent:10px;
line-height:30px;
}
.imgview ul li a:hover span img{
position:absolute;
top:240px;
left:1px;
width:200px;
height:140px;
}
.imgview ul li a:active span img,
.imgview ul li a:focus span img{
position:absolute;
top:-38px;
left:300px;
z-index:90;
width:537px;
height:380px;
}
.imgview ul li img{
width:80px;
height:57px;
}
.imgview .imgview-rep{
position:absolute;
top:287px;
left:10px;
z-index:10;
width:201px;
height:140px;
border:1px solid #999999;
color:#EFEFEF;
font-size:2em;
text-align:center;
line-height:140px;
}
.imgview .imgview-bgtext{
position:absolute;
top:9px;
left:309px;
z-index:10;
width:537px;
height:380px;
border:1px solid #999999;
color:#EFEFEF;
font-size:5em;
text-align:center;
line-height:380px;
}
.imgtag{
position:absolute;
top:130px;
left:10px;
}
.imgtag .tagname{
float:left;
width:100px;
height:30px;
text-align:center;
line-height:30px;
cursor:pointer;
}
.imgtag .tag1
.imgtag .tag2,
.imgtag .tag3{
position:absolute;
left:0;
width:100px;
}
.imgtag .tag1{
position:absolute;
left:0;
background-color:#BCC8C3;
}
.imgtag .tag1 .imgview{
left:0;
background-color:#BCC8C3;
}
.imgtag .tag2{
position:absolute;
left:102px;
background-color:#BFB6B4;
}
.imgtag .tag2 .imgview{
display:none;
}
.imgtag .tag2:hover .imgview{
display:block;
left:-102px;
z-index:80;
background-color:#BFB6B4;
}
.imgtag .tag3{
position:absolute;
left:204px;
background-color:#CCC8BF;
}
.imgtag .tag3 .imgview{
display:none;
}
.imgtag .tag3:hover .imgview{
display:block;
left:-204px;
z-index:80;
background-color:#CCC8BF;
}
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
</style>
</head>
<body>
<p>CSS图片浏览效果</p>
<div class="imgtag">
<div class="tag1">
<!--[if lte IE 6]><a href="#1" class="taga1"><![endif]-->
<div class="tagname">分类一</div>
<div class="imgview">
<div class="imgview-bgtext">PhotoView</div>
<div class="imgview-rep">PhotoView</div>
<h2>Photogallery 01</h2>
<ul>
<li title="photo1"><a href="#"><strong>Photo01 Name</strong><span><img src="photo01.gif" alt="photo1" /></span></a></li>
<li title="photo2"><a href="#"><strong>Photo02 Name</strong><span><img src="photo02.gif" alt="photo2" /></span></a></li>
<li title="photo3"><a href="#"><strong>Photo03 Name</strong><span><img src="photo03.gif" alt="photo3" /></span></a></li>
<li title="photo4"><a href="#"><strong>Photo04 Name</strong><span><img src="photo04.gif" alt="photo4" /></span></a></li>
<li title="photo5"><a href="#"><strong>Photo05 Name</strong><span><img src="photo05.gif" alt="photo5" /></span></a></li>
<li title="photo6"><a href="#"><strong>Photo06 Name</strong><span><img src="photo06.gif" alt="photo6" /></span></a></li>
<li title="photo7"><a href="#"><strong>Photo07 Name</strong><span><img src="photo07.gif" alt="photo7" /></span></a></li>
<li title="photo8"><a href="#"><strong>Photo08 Name</strong><span><img src="photo08.gif" alt="photo8" /></span></a></li>
<li title="photo9"><a href="#"><strong>Photo09 Name</strong><span><img src="photo09.gif" alt="photo9" /></span></a></li>
</ul>
</div>
<!--[if lte IE 6]></a><![endif]-->
</div>
<div class="tag2">
<!--[if lte IE 6]><a href="#2" class="taga2"><![endif]-->
<div class="tagname">分类二</div>
<div class="imgview">
<div class="imgview-bgtext">PhotoView</div>
<div class="imgview-rep">PhotoView</div>
<h2>Photogallery 02</h2>
<ul>
<li title="photo3"><a href="#"><strong>Photo03 Name</strong><span><img src="photo03.gif" alt="photo3" /></span></a></li>
<li title="photo2"><a href="#"><strong>Photo02 Name</strong><span><img src="photo02.gif" alt="photo2" /></span></a></li>
<li title="photo5"><a href="#"><strong>Photo05 Name</strong><span><img src="photo05.gif" alt="photo5" /></span></a></li>
<li title="photo6"><a href="#"><strong>Photo06 Name</strong><span><img src="photo06.gif" alt="photo6" /></span></a></li>
<li title="photo7"><a href="#"><strong>Photo07 Name</strong><span><img src="photo07.gif" alt="photo7" /></span></a></li>
<li title="photo1"><a href="#"><strong>Photo01 Name</strong><span><img src="photo01.gif" alt="photo1" /></span></a></li>
<li title="photo8"><a href="#"><strong>Photo08 Name</strong><span><img src="photo08.gif" alt="photo8" /></span></a></li>
<li title="photo4"><a href="#"><strong>Photo04 Name</strong><span><img src="photo04.gif" alt="photo4" /></span></a></li>
<li title="photo9"><a href="#"><strong>Photo09 Name</strong><span><img src="photo09.gif" alt="photo9" /></span></a></li>
</ul>
</div>
<!--[if lte IE 6]></a><![endif]-->
</div>
<div class="tag3">
<!--[if lte IE 6]><a href="#3" class="taga3"><![endif]-->
<div class="tagname">分类三</div>
<div class="imgview">
<div class="imgview-bgtext">PhotoView</div>
<div class="imgview-rep">PhotoView</div>
<h2>Photogallery 03</h2>
<ul>
<li title="photo2"><a href="#"><strong>Photo02 Name</strong><span><img src="/jscss/demoimg/photo02.gif" alt="photo2" /></span></a></li>
<li title="photo4"><a href="#"><strong>Photo04 Name</strong><span><img src="/jscss/demoimg/photo04.gif" alt="photo4" /></span></a></li>
<li title="photo5"><a href="#"><strong>Photo05 Name</strong><span><img src="photo05.gif" alt="photo5" /></span></a></li>
<li title="photo3"><a href="#"><strong>Photo03 Name</strong><span><img src="photo03.gif" alt="photo3" /></span></a></li>
<li title="photo1"><a href="#"><strong>Photo01 Name</strong><span><img src="photo01.gif" alt="photo1" /></span></a></li>
<li title="photo8"><a href="#"><strong>Photo08 Name</strong><span><img src="photo08.gif" alt="photo8" /></span></a></li>
<li title="photo6"><a href="#"><strong>Photo06 Name</strong><span><img src="photo06.gif" alt="photo6" /></span></a></li>
<li title="photo7"><a href="#"><strong>Photo07 Name</strong><span><img src="photo07.gif" alt="photo7" /></span></a></li>
<li title="photo9"><a href="#"><strong>Photo09 Name</strong><span><img src="photo09.gif" alt="photo9" /></span></a></li>
</ul>
</div>
<!--[if lte IE 6]></a><![endif]-->
</div>
</div>
</body>
</html>
这是一款基于 PHP + MySQL 的开源项目，选定本地电脑的图库目录之后，就能变成一个很漂亮的相册网页，并且可以通过分类、标签、颜色、链接、注释、时长、尺寸等参数检索内容，支持预览图片、视频、音频，甚至 txt 文档 。
官方提供了一个演示站点：http://pichome.oaooa.com/
可以轻松地放大缩小、翻转镜像查看，并且可以查看和下载原图，全凭之后可以通过左右键来浏览内容，可播放视频、音频，最有用的就是搜索功能了，找图快才用的爽。
基于 PHP + MySQL 环境则可以部署在各种设备中，比如服务器、NAS、个人电脑、云服务器等，部署后可以在任何浏览器打开，所以手机电脑都可以方便的访问，最重要的是免费、开源，还是相当不错的。
官方安装部署文档： https://www.yuque.com/pichome/install
本次采用nginx+php7搭建
Gitee下载 https://gitee.com/zyx0814/Pichome/releases
下载安装包：笔者这边下载Pichome-beta3.3.tar.gz。
github下载 https://github.com/zyx0814/Pichome/releases
国内使用gitee地址
https://gitee.com/zyx0814/Pichome/releases
备用下载： http://js.funet8.com/centos_software/Pichome-beta3.3.tar.gzcd /data/wwwroot/web
wget http://js.funet8.com/centos_software/Pichome-beta3.3.tar.gz
tar -zxvf Pichome-beta3.3.tar.gz
mv Pichome-beta3.3 p.xgss.netnginx的配置
server {
listen 80;
server_name p.xgss.net;
root /data/wwwroot/web/p.xgss.net;
access_log /data/wwwroot/log/p.xgss.net-access.log main_aliyun;
error_log /dev/null;
location / {
index index.php index.htm index.html;
if (!-e $request_filename){
rewrite ^(.*)$ /index.php?s=$1 last;
}
}
location ~ .*\.(php|php5)?$ {
fastcgi_pass 127.0.0.1:7300;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
location ~ .*\.(css|js|jpg|jpeg|gif|png|ico|bmp|gz|xml|zip|rar|swf|txt|xls|xlsx|flv|mid|doc|ppt|pdf|mp3|wma|exe)?$ {
expires max;
access_log off;
}
}
域名解析到服务器
访问： http://p.xgss.net/
新建数据库用户
分配权限
参考文档
官网：https://oaooa.com/pichome.html
开发者提供了 Windows、Linux 以及 Docker 安装方式。
使用Eagle或者Billfish，在本地windows系统下安装Billfish素材管理工具，billfish为免费的。
在billfish软件中将照片分类
将目录上传到服务器中，库设置中添加目录，就可以在web页面中显示你的图片了。
樱花飘落3D相册],程序员也可以很浪漫哦 ! 程序员向妹子表白专用代码!?HTML+css3+js 抖音很火的3d旋转相册-包含音乐,(送女友,表白,生日)动态生成效果,这样制作的~,现在,越来越多的人喜欢用视频记录生活,照片多的友友也会选择制作动态相册视频,不仅创意十足,同时还能展现自我风采, 撩妹神器哦!
? 樱花雨3D相册(含背景音乐)
在线演示地址
文字开场白+演示地址
? 加点萤火虫金光闪闪的效果??在线演示地址
文字开场白+演示地址
? 蓝色背景
?
3d相册制作教程
需要12张图片, 1-6 图片是大图 400400 ,01-06 图片是小图 100100
将准备好的图片,自行替换images 文件中的图片即可
美图秀秀(电脑版)裁剪图片
在线裁剪图片链接
MP3 免费下载
mp3免费下载地址如需更换mp3 背景音乐,可自行下载更换即可…
mp3下载教程
?解决上线问题> (不需要服务器就能免费部署上线)部署上线工具(永久可用)
不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备软件 ,插件集成了超级多好用的插件，免费下载安装，简单易懂, 简直神器
1.部署流程
2.连接成功
将你写好的页面部署上线后, 全世界的人都可以愉快的访问到你的网页了(永久免费使用哦)
? -------------------- 好了废话不多说 上正题 >>>>樱花雨3D相册代码如下--------------------
? 樱花雨3D相册代码如下
? 文件目录
? html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery.min.js"></script>
<link type="text/css" href="./css/style.css" rel="stylesheet" />
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
</head>
<body>
<audio autoplay="autopaly">
<source src="renxi.mp3" type="audio/mp3" />
</audio>
<div id="jsi-cherry-container" class="container">
<div class="box">
<ul class="minbox">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol class="maxbox">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<script>
....
</script>
</body>
</html>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354? 相册旋转 css代码
@charset "utf-8";
*{
margin:0;
padding:0;
}
body{
max-width: 100%;
min-width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size:100% 100%;
position: absolute;
margin-left: auto;
margin-right: auto;
}
li{
list-style: none;
}
.box{
width:200px;
height:200px;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size:100% 100%;
position: absolute;
margin-left: 42%;
margin-top: 22%;
-webkit-transform-style:preserve-3d;
-webkit-transform:rotateX(13deg);
-webkit-animation:move 5s linear infinite;
}
.minbox{
width:100px;
height:100px;
position: absolute;
left:50px;
top:30px;
-webkit-transform-style:preserve-3d;
}
.minbox li{
width:100px;
height:100px;
position: absolute;
left:0;
top:0;
}
.minbox li:nth-child(1){
background: url(../images/01.png) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
background: url(../images/02.png) no-repeat 0 0;
-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
background: url(../images/03.png) no-repeat 0 0;
-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
background: url(../images/04.png) no-repeat 0 0;
-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
background: url(../images/05.png) no-repeat 0 0;
-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
background: url(../images/06.png) no-repeat 0 0;
-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
background: url(../images/1.png) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
background: url(../images/2.png) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
background: url(../images/3.png) no-repeat 0 0;
-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
background: url(../images/4.png) no-repeat 0 0;
-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
background: url(../images/5.png) no-repeat 0 0;
-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
background: url(../images/6.png) no-repeat 0 0;
-webkit-transform:rotateY(90deg) translateZ(50px);
}
....
完整代码在下方↓公众号获取
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899? 樱花飘落 js代码
*请认真填写需求信息，我们会在24小时内与您取得联系。
