整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天分享一個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小時內與您取得聯系。
