<!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>图片标题</h1>
<p>我是第一张图片</p>
<p>我是第一张图片</p>
<p>我是第一张图片</p>
</figcaption>
</figure>
<figure class="test2">
<img src="images/cap-pic6.jpg" />
<figcaption>
<h1>图片标题</h1>
<p>我是第一张图片</p>
<div></div>
</figcaption>
</figure>
<figure class="test3">
<img src="images/ec-pic1.jpg" />
<figcaption>
<h1>图片标题</h1>
<p>我是第一张图片</p>
</figcaption>
</figure>
<figure class="test4">
<img src="images/ec-pic6.jpg" />
<figcaption>
<h1>图片标题</h1>
<p>我是第一张图片</p>
<div class="num1"></div>
<div class="num2"></div>
</figcaption>
</figure>
<figure class="test5">
<img src="images/hol-pic2.jpg" />
<figcaption>
<h1>图片标题</h1>
<p>我是第一张图片</p>
<div></div>
</figcaption>
</figure>
<figure class="test6">
<img src="images/ec-pic1.jpg" />
<figcaption>
<h1>图片标题</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;}/*旋转动画*/.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;}/*斜切动画*/.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;}/*双线动画*/.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;}/*缩放动画*/.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 关注
- 2547 浏览
添加回答
举报
0/150
提交
取消