生活随笔
收集整理的這篇文章主要介紹了
程序员女朋友的相册
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
女朋友的相冊(cè)
使用HTML和CSS實(shí)現(xiàn)，
效果圖
下面展示一些 內(nèi)聯(lián)代碼片。
CSS樣式
/*設(shè)置背景頁(yè)面顏色*/
html{/*背景顏色漸變*/background:linear-gradient(#FF6666 0%,#336699 20%);height: 100%;/*字體顏色*/color:#99cc33;
}
/*動(dòng)態(tài)樣式設(shè)置*/
/*最外層盒子樣式*/
.wrap{width: 200px;height: 200px;/*改變左右上下,圖片方塊移動(dòng)*/margin: 150px auto;position: relative;}
/*包裹所有盒子樣式*/
.cube{width: 200px;height: 200px;margin: 0 auto;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);animation: rotate 20s infinite linear;/*勻速*//* animation-timing-function: linear; */
}
@keyframes rotate{from{transform: rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{position: absolute;width: 200px;height: 200px;opacity: 0.8;transition: all .4s;
}
/*定義所有圖片樣式*/
.pic{width: 200px;height: 200px;
}
.cube .out_front{transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back{transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left{transform: rotateY(90deg) translateZ(100px);
}
.cube .out_right{transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_top{transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom{transform: rotateX(-90deg) translateZ(100px);
}
/*定義小正方體樣式*/
.cube span{display: bloack;width: 100px;height: 100px;position: absolute;top: 50px;left: 50px;
}
.cube .in_pic{width: 100px;height: 100px;
}
.cube .in_front{transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back{transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left{transform: rotateY(90deg) translateZ(50px);
}
.cube .in_right{transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_top{transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom{transform: rotateX(-90deg) translateZ(50px);
}
/*鼠標(biāo)移入后樣式*/
.cube:hover .out_front{transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back{transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left{transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right{transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_top{transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom{transform: rotateX(-90deg) translateZ(200px);
}
.hovertreeinfo{text-align:center;}
.hovertreeinfo a{color:white}``````HTML結(jié)構(gòu)## 標(biāo)題
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/index.css">
</head>
<body><div class="hovertreeinfo"><h2></h2>雜貨鋪老板</div><!--/*外層最大的盒子*/--><div class="wrap"><!-- /*包裹所有元素的盒子*/--><div class="cube"><!--前面圖片 --><div class="out_front"><img src="images/1.jpg" class="pic" /></div><!--后面圖片 --><div class="out_back"><img src="images/2.jpg" class="pic"/></div><!--左面圖片 --><div class="out_left"><img src="images/3.jpg" class="pic" /></div><!-- 右面圖片 --><div class="out_right"><img src="images/4.jpg" class="pic" /></div><!-- 上面圖片 --><div class="out_top"><img src="images/5.jpg" class="pic" /></div><!-- 下面圖片 --><div class="out_bottom"><img src="images/6.jpg" class="pic" /></div><!--小正方體 --><!--前面圖片 --><span class="in_front"><img src="images/7.jpg" class="in_pic" /></span><!--后面圖片 --><span class="in_back"><img src="images/8.jpg" class="in_pic" /></span><!--左面圖片 --><span class="in_left"><img src="images/9.jpg" class="in_pic" /></span><!--右面圖片 --><span class="in_right"><img src="images/10.jpg" class="in_pic" /></span><!--上面圖片 --><span class="in_top"><img src="images/11.jpg" class="in_pic" /></span><!--下面圖片 --><span class="in_bottom"><img src="images/12.jpg" class="in_pic" /></span></div></div></body>
</html>
總結(jié)
以上是生活随笔為你收集整理的程序员女朋友的相册的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
