課程
/前端開發
/CSS3
/CSS3圖片動態提示效果
案例里面的源碼
2018-06-18
源自：CSS3圖片動態提示效果 2-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 {
? ? ? ? .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);
? ? ? ? ? ? opacity: 0;
? ? ? ? .test2 figcaption div {
? ? ? ? ? ? border: 2px solid #fff;
? ? ? ? ? ? width: 80%;
? ? ? ? ? ? height: 80%;
? ? ? ? ? ? top: 10%;
? ? ? ? ? ? left: 10%;
? ? ? ? ? ? transform: translate(0px, -350px) ?rotate(0deg);
? ? ? ? .test2:hover ?figcaption div {
? ? ? ? ? ? transform: translate(0px, 0px) rotate(360deg);
? ? ? ? .test2:hover img {
? ? ? ? .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 {
? ? ? ? .test3:hover img {
? ? ? ? .test3:hover figcaption h2 {
? ? ? ? ? ? transform: skew(0deg);
? ? ? ? .test3:hover figcaption p {
? ? ? ? .test4 {
? ? ? ? ? ? background: #000;
? ? ? ? .test4 figcaption h2 {
? ? ? ? ? ? transform: scale(1.2);
? ? ? ? ? ? opacity:0;
? ? ? ? .test4 figcaption p {
? ? ? ? ? ? margin-top: 5px;
? ? ? ? .test4 figcaption div {
? ? ? ? .test4:hover figcaption div {
? ? ? ? ? ? transform: scale(1);
? ? ? ? ? ? opacity:1;
? ? ? ? .test4 figcaption {
? ? ? ? .test4:hover img {
? ? ? ? ? ? opacity:0.5;
? ? ? ? .test4:hover figcaption h2 {
? ? ? ? .test4:hover figcaption p {
? ? </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="">
? ? ? ? ? ? <h2>旋轉動畫</h2>
? ? ? ? ? ? <p>飛來飛去，飛來飛舞</p>
? ? ? ? ? ? <div>
? ? ? ? ? ? </div>
? ? <figure ?class="test3">
? ? ? ? <img src="3.jpg" alt="">
? ? ? ? ? ? <h2>斜切動畫</h2>
? ? ? ? ? ? <p>斜切動畫圖片注解</p>
? ? <figure class="test4">
? ? ? ? <img src="4.jpg" alt="">
</body>
</html>
舉報
實用的CSS3圖片動態提示效果，熟練掌握CSS動畫的制作技法
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
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>圖片標題</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>