跪求老師把代碼共享出來好嗎
我聽了一個(gè)小時(shí)的課程收益多多，但確實(shí)需要代碼來看的哦
鵬嘯九天
2016-03-27
3 回答
舉報(bào)
0/150
提交
取消
2016-04-24
素材下載地址http://pan.baidu.com/s/1geCHPvl
2016-03-28
@charset "utf-8";
*{
margin: 0;
padding: 0;
}
figure{
position: relative;
width: 33.33%;
overflow: hidden;
height: 350px;
float: left;
}
@media screen and (max-width: 600px) {
figure{width: 100%;}
}
@media screen and(min-width:601px) and (max-width: 1001px) {
figure{width: 50%;}
}
@media screen and (min-width: 1001px) {
figure{width: 33.33%;}
}
figcaption{
position: absolute;
top: 0px;
left: 0px;
color: #fff;
font-family: "微軟雅黑";
}
figure img{
opacity: 0.8;
transition: all 0.35s;
}
figure figcaption p,h2,span,div{
transition: all 0.35s;
}
.test1{
background: #2f0000;
}
.test1 figcaption{
padding: 20px;
}
.test1 figcaption p{
background: #fff;
color: #333;
margin: 3px;
text-align: center;
transform: translate(-120px,0px);
}
.test1 figcaption p:nth-of-type(1){
transition-delay: 0.05s;
}
.test1 figcaption p:nth-of-type(2){
transition-delay: 0.1s;
}
.test1 figcaption p:nth-of-type(3){
transition-delay: 0.15s;
}
.test1:hover figcaption p{
transform: translate(0px,0px);
}
.test1:hover img{
transform: translate(-50px,0px);
opacity: 0.5;
}
.test2{
background: #030;
}
.test2 figcaption{
width: 100%;
height: 100%;
}
.test2 figcaption h2{
margin-top: 15%;
margin-left: 15%;
}
.test2 figcaption p{
margin-left: 15%;
transform: translate(0px,50px);
opacity: 0;
}
.test2 figcaption div{
border: 2px solid #fff;
width: 80%;
height: 80%;
position: absolute;
top: 10%;
left: 10%;
transform: translate(0px,-350px) rotate(0deg);
}
.test2:hover figcaption div{
transform: translate(0px,0px) rotate(360deg);
}
.test2:hover img{
opacity: 0.5;
}
.test2:hover figcaption p{
transform: translate(0px,0px);
opacity: 1;
}
.test3{
background: #000;
}
.test3 figcaption{
top: 30%;
left: 15%;
}
.test3 figcaption h2{
transform: skew(90deg);
}
.test3 figcaption p{
transform: skew(90deg);
transition-delay: 0.1s;
}
.test3:hover img{
opacity: 0.5;
}
.test3:hover figcaption h2{
transform: skew(0deg);
}
.test3:hover figcaption p{
transform: skew(0deg);
}
.test4{
background: #000;
}
.test4 figcaption h2{
margin-top: 15%;
margin-left: 15%;
transform: scale(1.2,1.2);
opacity: 0;
}
.test4 figcaption p{
margin-top: 5px;
margin-left: 15%;
transform: scale(1.2,1.2);
opacity: 0;
}
.test4 figcaption{
width: 100%;
height: 100%;
}
.test4 figcaption div{
border: 2px solid #fff;
width: 80%;
height: 80%;
position: absolute;
top: 10%;
left: 10%;
transform: scale(1.2,1.2);
opacity: 0;
}
.test4:hover figcaption div{
transform: scale(1,1);
opacity: 1;
}
.test4:hover img{
opacity: 0.5;
transform: scale(1.2,1.2);
}
.test4:hover figcaption h2{
transform: scale(1,1);
opacity: 1;
}
.test4:hover figcaption p{
transform: scale(1,1);
opacity: 1;
}
2016-03-28
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<body>
<figure class="test1">
<img src="img/1.jpg" ?/>
<figcaption>
<h2>圖片標(biāo)題</h2>
<p>圖片注解1</p>
<p>圖片注解2</p>
<p>圖片注解3</p>
</figcaption>
</figure>
<figure class="test2">
<img src="img/2.jpg" ?/>
<figcaption>
<h2>旋轉(zhuǎn)動畫</h2>
<p>飛來飛去，飛來飛去</p>
<div></div>
</figcaption>
</figure>
<figure class="test3">
<img src="img/3.jpg" ?/>
<figcaption>
<h2>斜切動畫</h2>
<p>斜切動畫圖片注解</p>
</figcaption>
</figure>
<figure class="test4">
<img src="img/4.jpg" ?/>
<figcaption>
<h2>旋轉(zhuǎn)動畫</h2>
<p>飛來飛去，飛來飛去</p>
<div></div>
</figcaption>
</figure>
</body>
</html>