請(qǐng)問(wèn)老師有源碼嗎
案例里面的源碼
helen_papa
2018-06-18
1 回答
舉報(bào)
0/150
提交
取消
案例里面的源碼
2018-06-18
舉報(bào)
2018-11-21
<!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>圖片標(biāo)題</h2>
? ? ? ? ? ? <p>圖片注解1</p>
? ? ? ? ? ? <p>圖片注解2</p>
? ? ? ? ? ? <p>圖片注解3</p>
? ? ? ? </figcaption>
? ? </figure>
? ? <figure class="test2">
? ? ? ? <img src="2.jpg" alt="">
? ? ? ? <figcaption>
? ? ? ? ? ? <h2>旋轉(zhuǎn)動(dòng)畫(huà)</h2>
? ? ? ? ? ? <p>飛來(lái)飛去，飛來(lái)飛舞</p>
? ? ? ? ? ? <div>
? ? ? ? ? ? </div>
? ? ? ? </figcaption>
? ? </figure>
? ? <figure ?class="test3">
? ? ? ? <img src="3.jpg" alt="">
? ? ? ? <figcaption>
? ? ? ? ? ? <h2>斜切動(dòng)畫(huà)</h2>
? ? ? ? ? ? <p>斜切動(dòng)畫(huà)圖片注解</p>
? ? ? ? </figcaption>
? ? </figure>
? ? <figure class="test4">
? ? ? ? <img src="4.jpg" alt="">
? ? ? ? <figcaption>
? ? ? ? ? ? <h2>旋轉(zhuǎn)動(dòng)畫(huà)</h2>
? ? ? ? ? ? <p>飛來(lái)飛去，飛來(lái)飛舞</p>
? ? ? ? ? ? <div>
? ? ? ? ? ? </div>
? ? ? ? </figcaption>
? ? </figure>
</body>
</html>