制作網(wǎng)站建設(shè)的公司推廣方案策略怎么寫
世界上總有一半人不理解另一半人的快樂。
——《愛瑪》
目錄
一、前言
二、本期作品介紹
? ?3D旋轉(zhuǎn)相冊
三、效果展示
四、詳細介紹?
五、編碼實現(xiàn)
index.html
style.css?
img
?六、獲取源碼
公眾號獲取源碼?
獲取源碼？私信？關(guān)注？點贊？收藏？
一、前言
????????新的一年，我們是是否需要一個新的相冊呢？答案：是的。
? ??????2023年，已經(jīng)過去了一個半月的時間，我們已經(jīng)在2023年，經(jīng)歷了大大小小很多的事情，不知道那些事情值得你記憶呢？你是否還記得呢？
? ? ? ? 今天，為大家推薦的是一款好看的3D旋轉(zhuǎn)相冊，用來記錄2023年的美好時刻，一個不算新穎但很有創(chuàng)意的作品，記錄美好生活，設(shè)計相冊效果等。都是很值得使用的。? ? ? ??
????????最近，迎來新的一個學(xué)期的開始，不知道你是否已經(jīng)準(zhǔn)備好迎接新的學(xué)期？身邊的朋友都陸陸續(xù)續(xù)的開學(xué)了，我們也快了，新的學(xué)期，新的一年，你有什么目標(biāo)呢？準(zhǔn)備好實現(xiàn)了嗎？在此，也祝大家在新的一學(xué)期，迎來新的超越，達到新的目標(biāo)，實現(xiàn)新的理想，不斷超越自己。
二、本期作品介紹
? ?3D旋轉(zhuǎn)相冊
? ?本文是一篇簡單的前端代碼，主要內(nèi)容僅包含 HTML，CSS 等內(nèi)容? ?主要為 CSS
?????1、HTML代碼
? ? ?2、CSS樣式
? ? ?3、插件等
? ? ?4、旋轉(zhuǎn)特效
? ? ?5、圖片
? ? ?6、鼠標(biāo)放置效果
? ? ?7、可添加背景音樂，背景圖等
?????8、添加文字介紹
三、效果展示
讓我們一起，欣賞吧！！！
A.正常打開效果
B.鼠標(biāo)放置
?C.添加圖片
注意哦！！！
可以在此基礎(chǔ)上添加背景音樂，點擊特效，背景圖等
特別提醒一下大家，注意圖片像素（尺寸），否則會顯示不出來的/(ㄒoㄒ)/~~
四、詳細介紹?
第一點： 3D旋轉(zhuǎn)相冊，顧名思義
第二點： 可以自由添加背景音樂，背景圖等
第三點： 可以用在多種情景，普通相冊展示，介紹等
五、編碼實現(xiàn)
顯示完整代碼
注意路徑(⊙o⊙)？
o(*￣▽￣*)ブ?
(? ?_?)?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Enovo3D相冊</title><link type="text/css" href="css/style.css" rel="stylesheet" /></head>
<body><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>
</body>
</html>style.css?
@charset "utf-8";
*{margin:0;padding:0;
}
body{/*background: url(../img/preview.png) ;*/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(../img/01.png) no-repeat 0 0;-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){background: url(../img/02.png) no-repeat 0 0;-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){background: url(../img/03.png) no-repeat 0 0;-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){background: url(../img/04.png) no-repeat 0 0;-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){background: url(../img/05.png) no-repeat 0 0;-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){background: url(../img/06.png) no-repeat 0 0;-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){background: url(../img/1.png) no-repeat 0 0;-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){background: url(../img/2.png) no-repeat 0 0;-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){background: url(../img/3.png) no-repeat 0 0;-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){background: url(../img/4.png) no-repeat 0 0;-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){background: url(../img/5.png) no-repeat 0 0;-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){background: url(../img/6.png) no-repeat 0 0;-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox{width: 800px;height: 400px;position: absolute;left: 0;top: -20px;-webkit-transform-style: preserve-3d;}
.maxbox li{width: 200px;height: 200px;background: #fff;border:1px solid #ccc;position: absolute;left: 0;top: 0;opacity: 0.2;-webkit-transition:all 1s ease;
}
.maxbox li:nth-child(1){-webkit-transform:translateZ(100px);
}
.maxbox li:nth-child(2){-webkit-transform:rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3){-webkit-transform:rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4){-webkit-transform:rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5){-webkit-transform:rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6){-webkit-transform:rotateY(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1){-webkit-transform:translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}
.box:hover ol li:nth-child(2){-webkit-transform:rotateX(180deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}
.box:hover ol li:nth-child(3){-webkit-transform:rotateX(-90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}
.box:hover ol li:nth-child(4){-webkit-transform:rotateX(90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}
.box:hover ol li:nth-child(5){-webkit-transform:rotateY(-90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}
.box:hover ol li:nth-child(6){-webkit-transform:rotateY(90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}
@keyframes move{0%{-webkit-transform: rotateX(13deg) rotateY(0deg);}100%{-webkit-transform:rotateX(13deg) rotateY(360deg);}
}
img
一定注意image文件的路徑噢！！！
?六、獲取源碼
老規(guī)矩，先給朋友們看一下完整文件夾，
正確的文件如下圖 ，復(fù)制源碼的朋友們請注意了！！！
公眾號獲取源碼?
第一步，通過微信公眾號下載源碼壓縮包，解壓并打開文件夾，即為上圖樣式（復(fù)制源碼請注意路徑及文件名）
第二步，點擊 html 文件 打開即可查看
2023年第十八期，希望得到大家的喜歡🙇?
希望大家有好的意見或者建議，歡迎私信，一起討論(⊙o⊙)？做出更改。
是否精彩呢？如果有好的建議或者想法可以聯(lián)系我，一起交流🙇?
以上就是本篇文章的全部內(nèi)容了
?~ 關(guān)注我，點贊博文~ 每天帶你漲知識!
1.看到這里了就 [點贊+好評+收藏] 三連 支持下吧，你的「點贊，好評，收藏」是我創(chuàng)作的動力。
2.關(guān)注我 ~ 每天帶你學(xué)習(xí) :各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、HTML模板 、C++、數(shù)據(jù)結(jié)構(gòu)、Python程序設(shè)計、Java程序設(shè)計、爬蟲等！?「在這里有好多 開發(fā)者，一起探討 前端 開發(fā)?知識，互相學(xué)習(xí)」！
3.以上內(nèi)容技術(shù)相關(guān)問題可以相互學(xué)習(xí)，可 關(guān) 注 ↓公 Z 號 獲取更多源碼 !
?
獲取源碼？私信？關(guān)注？點贊？收藏？
👍+??+??+🙇?
有需要源碼的小伙伴可以 關(guān)注下方微信公眾號 " Enovo開發(fā)工廠 "，回復(fù) 關(guān)鍵詞 " 1-3D相冊?"