<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<meta?http-equiv="X-UA-Compatible"?content="IE=edge,chrome=1">
<title>css3-html5</title>
<meta?name="description"?content="">
<meta?name="keywords"?content="">
<link?href="css/one.css"?rel="stylesheet">
</head>
<body>
????<figure?class="test1">
???? <img?src="images/cap-pic1.jpg"?/>
???? <figcaption>
???? <h1>圖片標(biāo)題</h1>
???? <p>我是第一張圖片</p>
???? <p>我是第一張圖片</p>
???? <p>我是第一張圖片</p>
???? </figcaption>
????</figure>
????<figure?class="test2">
???? <img?src="images/cap-pic6.jpg"?/>
???? <figcaption>
???? <h1>圖片標(biāo)題</h1>
???? <p>我是第一張圖片</p>
???? <div></div>
???? </figcaption>
????</figure>
????<figure?class="test3">
???? <img?src="images/ec-pic1.jpg"?/>
???? <figcaption>
???? <h1>圖片標(biāo)題</h1>
???? <p>我是第一張圖片</p>
???? </figcaption>
????</figure>
????<figure?class="test4">
???? <img?src="images/ec-pic6.jpg"?/>
???? <figcaption>
???? <h1>圖片標(biāo)題</h1>
???? <p>我是第一張圖片</p>
???? <div?class="num1"></div>
???? <div?class="num2"></div>
???? </figcaption>
????</figure>
????<figure?class="test5">
???? <img?src="images/hol-pic2.jpg"?/>
???? <figcaption>
???? <h1>圖片標(biāo)題</h1>
???? <p>我是第一張圖片</p>
???? <div></div>
???? </figcaption>
????</figure>
????<figure?class="test6">
???? <img?src="images/ec-pic1.jpg"?/>
???? <figcaption>
???? <h1>圖片標(biāo)題</h1>
???? <p>我是第一張圖片</p>
???? <div></div>
???? </figcaption>
????</figure>
</body>
</html>@charset "utf-8";/*css Document*/body,figure,figcaption,img,h1,p{ margin: 0; padding: 0;}figure{width: 33.33%; height: 300px; overflow: hidden; float: left; position: relative; }figure img{width: 100%;height: 100%; display: block; opacity:0.8; transition: all 0.5s;}figcaption{ position:absolute;top:0; left: 0; color: #fff; font-family: "微軟雅黑";}figure figcaption p,h1,span,div{transition: all 0.35s;}@media only screen and (max-width:600px) { figure{width: 100%;}}@media screen and (min-width:601px)and (max-width:1200px){ figure{width: 50%;}}@media only screen and (min-width:1201px ) {? ? figure{width: 33.33%;} }.test1{background: #2F0000;}.test1 figcaption{padding: 20px;}.test1 figcaption p{ background: #fff; color: #333; text-align: center; margin: 5px 0 0 5px; transform: translate(-150px,0);}.test1:hover figcaption p{ transform: translate(0,0);}.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 img{transform: translate(-50px,0); opacity: 0.5;}/*旋轉(zhuǎn)動(dòng)畫*/.test2{background: #030;}.test2 figcaption{width: 100%; height: 100%;}.test2 figcaption h1{margin: 15% 0 0 15%;}.test2 figcaption p{margin-left: 15%; transform: translate(0px,50px); opacity: 0;}.test2 figcaption div{ width: 80%; height: 80%; border: 2px solid #FFFFFF;? position: absolute; top:10%; left: 10%; transform: translate(0px,-300px) 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;}/*斜切動(dòng)畫*/.test3{background: #000;}.test3:hover img{opacity: 0.5;}.test3 figcaption{top:30%; left: 15%;}.test3 figcaption h1{transform: skew(90deg);}.test3 figcaption p{transform: skew(90deg); transition-delay: 0.2s;}.test3:hover figcaption h1{transform: skew(0deg);}.test3:hover figcaption p{transform: skew(0deg); transition-delay: 0.2s;}/*雙線動(dòng)畫*/.test4{background: #333333;}.test4:hover img{opacity: 0.5;}.test4 figcaption{width: 100%; height: 100%;}.test4 figcaption .num1{width: 80%; height: 60%;border-top: 2px solid #0F0;border-bottom: 2px solid #0F0; position: absolute;top:20%;left: 10%; transform: translate(-650px,0px);}.test4 figcaption .num2{width: 60%; height: 80%; border-left: 2px solid #0F0; border-right: 2px solid #0F0; position: absolute;top:10%;left: 20%; transform: translate(0px,300px);}.test4:hover figcaption .num1{transform: translate(0px,0px);}.test4:hover figcaption .num2{transform: translate(0px,0px); transition-delay:0.2s;}/*縮放動(dòng)畫*/.test5{background: #030;}.test5 figcaption{width: 100%; height: 100%;}.test5 figcaption h1{margin: 25% 0 0 35%;}.test5 figcaption p{margin-left: 35%;margin-top: 5px;}.test5 figcaption div{ width: 70%; height: 70%; border: 2px solid #FFFFFF;? position: absolute; top:15%; left: 15%; transform: scale(1.2,1.2);}.test5:hover figcaption div{ transform: scale(1,1);}.test5:hover figcaption h1,.test5:hover figcaption p{transform: scale(1.2,1.2); transition-delay: 0.2s;}.test5:hover img{opacity: 0.5; transform: scale(1.2,1.2);}/*一張圖斜切*/.test6{background: #000; position: relative;}.test6 figcaption{width: 100%; height: 100%;}.test6:hover img{opacity: 0.5;}.test6 figcaption div{ width: 100%; height: 70%; background: #FFFFFF; opacity: 0; position: absolute; top:0%; left: 0%;?}.test6:hover figcaption div{ transform: rotate(-20deg);transform-origin:0% 0%;-ms-transform: rotate(-20deg); /* IE 9 */-ms-transform-origin:0% 0%; /* IE 9 */-webkit-transform: rotate(-20deg); /* Safari and Chrome */-webkit-transform-origin:0% 0%; /* Safari and Chrome */-moz-transform: rotate(-20deg); /* Firefox */-moz-transform-origin:0% 0%; /* Firefox */-o-transform: rotate(-20deg); /* Opera */-o-transform-origin:0% 0%; /* Opera */ opacity: 0.5;}
- 1 回答
- 0 關(guān)注
- 2641 瀏覽
添加回答
舉報(bào)
0/150
提交
取消