整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
言：
圣誕節快到了，是不是要給女朋友或者正在追求的妹子一點小驚喜呢，今天這篇博客就分享下前端代碼如何實現3D立體動態相冊。趕緊學會了，來制作屬于我們程序員的浪漫吧！先上效果圖，來引起下你們的興趣。
正文：
一、新建一個index.html的文件，代碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>純CSS實現鼠標經過3D立體動態展示圖片特效代碼</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>
二、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(../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);
}
}三、文件的目錄結構，把css文件放到css文件夾里，圖片放到img文件夾里。
四、圖片尺寸不會修改的，可以選擇使用美圖秀秀網頁版很簡單
五、容易出現的問題 ，圖片展示不全或展示的方向不對
1.圖片尺寸需要修改 （解決展示不全的情況）
上圖是我的圖片文件夾里放的圖片 ，首先01-06編號命名的圖片尺寸是100x100px的大小的，1-6編號是400x400px，如果效果想展示最佳，100x100px的圖片是以頭部特寫的照片最好，因為01-06是立體照片內部小正方體的照片，1-6編號是外部正方體的照片。
2.圖片的方向需要修改（解決頭朝下的問題）
修改的方向如上圖展示所示，比如第三張頭就應該朝下，否則形成的效果圖像會出現頭是倒著的情況。
六、放一下動態效果圖
總結：
生活雖然總有辛酸，但是我們不應該減少去創造生活的樂趣，不斷尋找屬于自己的那份快樂，才應該是我們生活的態度。
我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。
原文鏈接：https://blog.csdn.net/jdk_wangtaida/article/details/103253883
首先介紹下在本文出現的幾個比較重要的概念：
函數計算（Function Compute）: 函數計算是一個事件驅動的服務，通過函數計算，用戶無需管理服務器等運行情況，只需編寫代碼并上傳。函數計算準備計算資源，并以彈性伸縮的方式運行用戶代碼，而用戶只需根據實際代碼運行所消耗的資源進行付費。函數計算更多信息參考。
Fun: Fun 是一個用于支持 Serverless 應用部署的工具，能幫助您便捷地管理函數計算、API 網關、日志服務等資源。它通過一個資源配置文件（template.yml），協助您進行開發、構建、部署操作。Fun 的更多文檔參考。
fun install: fun install 是 fun 工具的一個子命令，用于安裝 pip 和 apt 依賴，提供了命令行接口和 fun.yml 描述文件兩種形式。
備注: 本文介紹的技巧需要 Fun 版本大于等于 2.9.3。
本項目是在 MacOS 下開發的，涉及到的工具是平臺無關的，對于 Linux 和 Windows 桌面系統應該也同樣適用。在開始本例之前請確保如下工具已經正確的安裝，更新到最新版本，并進行正確的配置。
Fun 和 Fcli 工具依賴于 docker 來模擬本地環境。
對于 MacOS 用戶可以使用 homebrew 進行安裝：
brew cask install docker brew tap vangie/formula brew install fun brew install fcli
Windows 和 Linux 用戶安裝請參考：
安裝好后，記得先執行 fun config 初始化一下配置。
使用 fun init 命令可以快捷的將本模板項目初始化到本地。
$ fun init vangie/puppeteer-example ? Please input oss bucket to upload chrome shell? chrome-headless ? Please select a region? cn-hangzhou ? Please input oss accessKeyId for upload? xxxxxxxxxxxKbBS ? Please input oss accessKeySecret for upload? xxxxxxxxxxxx5ZgM
上面會提示
$ fun install skip pulling image aliyunfc/runtime-nodejs8:build-1.2.0... Task=> [UNNAMED]=> apt-get update (if need)=> apt-get install -y -d -o=dir::cache=/code/.fun/tmp libnss3=> bash -c 'for f in $(ls /code/.fun/tmp/archives/*.deb); do dpkg -x $f /code/.fun/root; done;'=> bash -c 'rm -rf /code/.fun/tmp/archives' Task=> [UNNAMED]=> bash -c 'curl -L https://github.com/muxiangqiu/puppeteer-fc-starter-kit/raw/master/chrome/headless_shell.tar.gz --output headless_shell.tar.gz' ...
fun install 會執行 fun.yml 文件里的任務，這些任務會：
$ fun deploy using region: cn-shanghai using accountId: ***********4733 using accessKeyId: ***********KbBS using timeout: 60 Waiting for service puppeteer to be deployed... Waiting for function html2png to be deployed... Waiting for packaging function html2png code... package function html2png code done function html2png deploy success service puppeteer deploy success
$ fcli function invoke -s puppeteer -f html2png The screenshot has been uploaded to http://chrome-headless.oss-cn-shanghai.aliyuncs.com/screenshot.png
打開上面的返回鏈接，看到截取出來的是全屏滾動的長圖，考慮的篇幅下面只截取了部分：
如果想換一個網址，可以使用如下命令格式
fcli function invoke -s puppeteer -f html2png --event-str 'http://www.alibaba.com'
如果需要在本地調試代碼，可以使用如下命令
fun local invoke html2png <<<'http://www.alibaba.com'
作者：倚賢
素的定位（方式五種定位方式）:
靜態定位(文檔流定位)
相對定位
<style>
div {
width: 100px;
height: 100px;
border: 1px solid red
}
div:hover {
/*margin: 20px 0 0 20px;*/
/*修改為相對定位*/
position: relative;
top: 20px;
left: 20px;
}
</style>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>絕對定位
<style>
div{
width: 300px;padding: 10px;
background-color: rgba(0,0,0,0.3);
position: relative;/*參照物*/
}
input{
width: 260px;/*300-20*2內邊距*/
padding: 10px 20px;border: none;
}
img{
position: absolute;
top: 14px;right: 40px;
}
p{margin: 0;font-size: 12px; color: red;}
</style>
<body>
<div>
<input type="text" placeholder="請輸入用戶名">
<img src="http://celinf.org/yhm.png" alt="">
<p>用戶名不能為空!</p>
</div>
</body>固定定位
<style>
#d1{
width: 1000px; height: 100px; background-color: red;
position: fixed; top:0;
}
body{
padding-top: 100px;
}
#d2{
width: 50px;height: 200px;
background-color: blue;
position: fixed;
padding-top: 200px;right: 0;
}
</style>
<body>
<div id="d1"></div>
<div id="d2"></div>
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
</body>浮動定位
<style>
body>div{
width: 200px; border: 1px solid red;
/*當元素的所有子元素全部浮動時 自動識別的高度為0
后面的元素會頂上來導致顯示異常,添加overflow:hidden解決此異常*/
overflow: hidden;
}
#d1{
width: 50px; height: 50px;
background-color: red;
float: left;
}
#d2{
width: 50px; height: 50px;
background-color: green;
float: left;
}
#d3{
width: 50px;height: 50px;
background-color: blue;
float: left;
}
</style>
<body>
<div>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</div>
</body>溢出設置overflow
行內元素垂直對齊方式vertical-align
<style> /* 塊元素居中 margin */
div{
width: 200px;height: 200px;
border: 1px solid red;
/*設置超出部分的顯示方式*/
overflow: scroll;
}
img{
width: 100px;
/*設置行內元素的垂直對齊方式
top上對齊
middle中間對齊
bottom下對齊
baseline基線對齊(默認)*/
vertical-align: bottom;
}
</style>元素的顯示層級
當兩個元素非靜態定位時可能存在層疊的問題 通過z-index樣式控制顯示層級, 值越大顯示越靠前
<style>
#d1{
width: 50px;height: 100px;
background-color: red;
position: absolute;
/*設置顯示層級 值越大顯示越靠前
只對非靜態定位的元素有效*/
z-index: 1;
}
#d2{
width: 100px;height: 50px;
background-color: blue;
position: absolute;
z-index: 2;
}
</style>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>綜合布局練習（Demo）
Demo的效果圖
<style>
body{
font: 12px "simhei", Arial, Helvetica, sans-serif;
color: #666;
}
body>div{
width: 1000px;margin: 0 auto;
}
#t_l_div{
width: 611px; height: 376px;
float: left; position: relative;
}
#t_r_div{
width: 375px; height: 376px;
float: right;position: relative;
}
#t_div{
overflow: hidden;margin-bottom: 10px;
}
#t_div>div,#b_l_div,#b_r_div>div{
background-color: #e8e8e8;
}
#b_div{
overflow: hidden;
}
#b_l_div{
width: 366px;height: 233px;
float: left;
}
#b_r_div{
overflow: hidden;float: right;
}
#b_r_div>div{
width: 198px;height: 233px;
float: left;margin-left: 10px;
}
#ls_d1{
margin: 25px 0 0 50px;width: 245px;
height: 232px; padding: 5px;
}
.title_p{
color: #333333; font-size: 32px;
font-weight: lighter;
}
.intro_p{
ont-size: 12px;font-weight: lighter;
}
.price_p{
margin-bottom: 12px;font-weight: bold;
color: #0AA1ED;font-size: 24px;
}
.a_title{
display: block;
background-color: #0aa1ed;
color: white;width: 132px;
height: 40px; text-align: center;
line-height: 40px;font-size: 20px;
text-decoration: none;border-radius: 2px;
}
#t_l_div>img{
position: absolute;
right: 20px;bottom: 15px;
}
#lr_d1{
width: 253px;height: 232px;
padding: 4px;text-align: left;
margin: 39px 0 0 25px;
}
#t_r_div>img{
position: absolute;
right: 10px;bottom: 3px;
}
.s_title{
font-size: 12px;width: 100px;
height: 24px; line-height: 24px;
margin: 0 auto;
}
.s_info{
font-size: 12px;text-align: center;
color: #333333;padding-top: 0;
margin-top: 0;
}
.s_price{
text-align: center;font-size: 12px;
font-weight: bold;margin: 6px auto;
color: #0aa1ed;
}
#b_l_div>p,ul{
padding: 0;margin: 0;
}
#top_div{
color: white; font-size: 16px;
background-color: #0aa1ed;
line-height: 35px;border-radius: 2px;
bottom: 5px;
}
#top_div>img{
float: left;margin: 10px 5px 0 10px;
}
.c_div{
padding-left: 10px;
}
.c_div>p{
color: #62B5EC; margin: 17px 0 9px 0;
}
.c_div>ul{
list-style-type: none;overflow: hidden;
}
.c_div>ul>li{
float: left;margin-right: 10px;
}
.c_div>ul>li>a{
text-decoration: none;color: #0aa1ed;
}
</style>
<body>
<div>
<div id="t_div">
<div id="t_l_div">
<div id="ls_d1">
<p class="title_p">靈越 燃7000系列</p>
<p class="intro_p">
酷睿雙核i5處理器|256GB SSD| 8GB內存<br>
英特爾HD顯卡620含共享顯卡內存
</p>
<p class="price_p">￥4999.00</p>
<a href="#" class="a_title">查看詳情</a>
</div>
<img src="http://celinf.cn/study_computer_img1.png" alt="圖1">
</div>
<div id="t_r_div">
<div id="lr_d1">
<p class="title_p">顏值 框不住</p>
<p class="intro_p">
酷睿雙核i5處理器|256GB SSD| 8GB內存
<br>
英特爾HD顯卡620含共享顯卡內存
</p>
<p class="price_p">￥6888.00</p>
<a href="#" class="a_title">查看詳情</a>
</div>
<img src="http://celinf.cn/study_computer_img2.png" alt="圖二">
</div>
</div>
<div id="b_div">
<div id="b_l_div">
<div id="top_div">
<img src="http://celinf.cn/computer_icon1.png" alt="圖三">
<span>電腦,辦公/1F</span>
</div>
<div class="c_div">
<p>電腦整機</p>
<ul>
<li><a href="#">筆記本</a></li>
<li><a href="#">游戲機</a></li>
<li><a href="#">臺式機</a></li>
<li><a href="#">一體機</a></li>
<li><a href="#">服務器</a></li>
<li><a href="#">聯想</a></li>
</ul>
<p>電腦配件</p>
<ul>
<li><a href="#">CPU</a></li>
<li><a href="#">SSD硬盤</a></li>
<li><a href="#">顯示器</a></li>
<li><a href="#">顯卡</a></li>
<li><a href="#">組裝電腦</a></li>
<li><a href="#">機箱</a></li>
</ul>
<p>外設/游戲</p>
<ul>
<li><a href="#">鍵盤</a></li>
<li><a href="#">鼠標</a></li>
<li><a href="#">U盤</a></li>
<li><a href="#">移動硬盤</a></li>
<li><a href="#">游戲設備</a></li>
<li><a href="#">智能單車</a></li>
</ul>
</div>
</div>
<div id="b_r_div">
<div class="s_list">
<img src="http://celinf.cn/study_computer_img3.png" alt="圖四">
<p class="s_info">戴爾(DELL)XPS13-9360-R1609 13.3英寸微邊框筆記本電腦</p>
<p class="s_price">￥4600.00</p>
<a href="#" class="a_title s_title">查看詳情</a>
</div>
<div class="s_list">
<img src="http://celinf.cn/study_computer_img3.png" alt="圖四">
<p class="s_info">戴爾(DELL)XPS13-9360-R1609 13.3英寸微邊框筆記本電腦</p>
<p class="s_price">￥4600.00</p>
<a href="#" class="a_title s_title">查看詳情</a>
</div>
<div class="s_list">
<img src="http://celinf.cn/study_computer_img3.png" alt="圖四">
<p class="s_info">戴爾(DELL)XPS13-9360-R1609 13.3英寸微邊框筆記本電腦</p>
<p class="s_price">￥4600.00</p>
<a href="#" class="a_title s_title">查看詳情</a>
</div>
</div>
</div>
</div>
</body>學習記錄，如有侵權請聯系刪除
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
