请问老师有源码吗
案例里面的源码
1 回答
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css" media="screen">
body,figure,figcaption,h2,p,img {
margin: 0;
padding: 0;
}
figure {
position: relative;
width: 33.33%;
overflow: hidden;
height: 350px;
float: left;
}
figcaption {
position: absolute;
top: 0;
left: 0;
color: #fff;
font-family: "微软雅黑";
}
@media screen and (max-width: 600px) {
figure {width: 100%;}
}
@media screen and (min-width: 601px) and (max-width: 1000px) {
figure {width: 50%;}
}
@media screen and (min-width: 1001px) {
figure {width: 33.33%;}
}
.test1 {
background: #2f0000;
}
figure img {
opacity: 0.8;
transition: all 0.35s;
}
figure figcaption p,h2,span,div {
transition: all 0.35s;
}
.test1 figcaption p {
background: #fff;
color: #333;
margin: 5px;
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 figcaption {
padding: 20px;
}
.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 {
transform: translate(0px, 50px);
margin-left: 15%;
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 {
opacity: 1;
transform: translate(0px, 0px);
}
.test3 {
background: pink;
}
.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);
opacity:0;
}
.test4 figcaption p {
margin-top: 5px;
margin-left: 15%;
transform: scale(1.2);
opacity:0;
}
.test4 figcaption div {
border: 2px solid #fff;
width: 80%;
height: 80%;
position: absolute;
top: 10%;
left: 10%;
transform: scale(1.2);
opacity:0;
}
.test4:hover figcaption div {
transform: scale(1);
opacity:1;
}
.test4 figcaption {
width: 100%;
height: 100%;
}
.test4:hover img {
opacity:0.5;
transform: scale(1.2);
}
.test4:hover figcaption h2 {
transform: scale(1);
opacity:1;
}
.test4:hover figcaption p {
transform: scale(1);
opacity:1;
}
</style>
</head>
<body>
<figure class="test1">
<img src="1.jpg" alt="">
<figcaption>
<h2>图片标题</h2>
<p>图片注解1</p>
<p>图片注解2</p>
<p>图片注解3</p>
</figcaption>
</figure>
<figure class="test2">
<img src="2.jpg" alt="">
<figcaption>
<h2>旋转动画</h2>
<p>飞来飞去，飞来飞舞</p>
<div>
</div>
</figcaption>
</figure>
<figure class="test3">
<img src="3.jpg" alt="">
<figcaption>
<h2>斜切动画</h2>
<p>斜切动画图片注解</p>
</figcaption>
</figure>
<figure class="test4">
<img src="4.jpg" alt="">
<figcaption>
<h2>旋转动画</h2>
<p>飞来飞去，飞来飞舞</p>
<div>
</div>
</figcaption>
</figure>
</body>
</html>
举报
0/150
提交
取消
