                        課程
                    
                        /前端開發(fā)
                        
                            /CSS3
                        
                        /CSS3圖片動態(tài)提示效果

求解,八張動畫圖HTML&CSS源代碼如下。用火狐打開動畫效果有但是閃屏，不能正常顯示；用谷歌可以，但是也會經(jīng)?？ㄋ?！

<!DOCTYPE?html>
<html>
<head>
????<meta?http-equiv="content-type"?content="text/html;charset=UTF-8"?>
????<title>圖片動畫</title>
????<link?rel="stylesheet"?href="stylesheet/style.css"/>
</head>
<body>
<figure?class="test1">
????<img?src="images/1.png"?alt="1"?/>
????<figcaption>
????????<h2>平移動畫</h2>
????????<p>蘇州</p>
????????<p>江南水鄉(xiāng)</p>
????????<p>小美培</p>
????</figcaption>
</figure>
<figure?class="test2">
????<img?src="images/2.jpg"?alt="2"/>
????<figcaption>
????????<h2>旋轉(zhuǎn)動畫</h2>
????????<p>飛來飛去</p>
????????<div></div>
????</figcaption>
</figure>
<figure?class="test13">
????<img?src="images/3.jpg"?alt="3"/>
????<figcaption>
????????<h2>扭曲動畫</h2>
????????<p>斜切，臥倒，起立</p>
????</figcaption>
</figure>
<figure?class="test4">
????<img?src="images/4.jpg"?alt="4"/>
????<figcaption>
????????<h2>縮放動畫</h2>
????????<p>放大，放小</p>
????????<div></div>
????</figcaption>
</figure>
<figure?class="test5">
????<img?src="images/5.jpg"?alt="5"/>
????<figcaption>
????????<h2>縮放動畫</h2>
????????<p>綜合</p>
????????<div></div>
????</figcaption>
</figure>
<figure?class="test6">
????<img?src="images/6.jpg"?alt="6"/>
????<figcaption>
????????<h2>井字格</h2>
????????<p>縮放</p>
????????<div?class="line1"></div>
????????<div?class="line2"></div>
????</figcaption>
</figure>
<figure?class="test7">
????<img?src="images/6.jpg"?alt="7"/>
????<figcaption>
????????<h2>斜三角</h2>
????????<p>斜三角</p>
????????<div></div>
????</figcaption>
</figure>
<figure?class="test8">
????<img?src="images/6.jpg"?alt="8"/>
????<figcaption>
????????<div>
????????????<h2>CSS3圖片動態(tài)提示效果</h2>
????????????<p>實用的CSS3圖片動態(tài)提示效果</p>
????????</div>
????</figcaption>
</figure>
</body>
</html>

@charset?"UTF-8";
body,figure,img,figcaption,h2,p{margin:?0;padding:?0;}
figure{
????position:?relative;
????overflow:?hidden;
????float:?left;
????width:?33.33%;height:?350px;
}
figure?img{
????width:?450px;height:?350px;
????opacity:?0.8;
????transition:all?0.35s;
}
figure?figcaption?p,h2,div,span{transition:all?0.35s;}
figcaption{
????position:?absolute;
????top:?0;left:?0;
????font:?16px?"MICROSOFT?YAHEI";color:?#ffffff;
}
@media?screen?and?(min-width:?1201px){
????figure{width:?33.33%;}
}
@media?screen?and?(min-width:801px)?and?(max-width:?1200px){
????figure{width:?50%;}
}
@media?screen?and?(max-width:?800px){
????figure{width:?100%;}
}
.test1{background:?#2f0000;}
.test1?figcaption{padding:?20px;}
.test1?figcaption?p{
????background-color:?#ffffff;
????margin:?3px;
????color:?#666666;
????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.10s;}
.test1?figcaption?p:nth-of-type(3){transition-delay:0.15s;}
.test1:hover?figcaption?p{transform:translate(0px,0px);}
.test1:hover?img{
????opacity:?1;
????transform:translate(-50px,0);
}

.test2{background:?#46973f;}
.test2?figcaption{width:?100%;height:?100%;}
.test2?figcaption?h2{margin-top:?15%;margin-left:?15%;}
.test2?figcaption?p{margin-left:?15%;transform:translate(0px,50px);opacity:?0;}
.test2?figcaption?div{
????position:?absolute;
????top:?10%;left:?10%;
????width:?80%;height:?80%;
????border:?2px?solid?#ffffff;
????transform:translate(0px,-350px)?rotate(0deg);
}
.test2:hover?img{opacity:?0.6;}
.test2:hover?figcaption?div{transform:translate(0px,0px)?rotate(360deg);}
.test2:hover?figcaption?p{transform:translate(0px,0px);opacity:?1;}

.test3{background:?#002e00;}
.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.6;}
.test3:hover?figcaption?h2{
????transform:skew(0deg);
}
.test3:hover?figcaption?p{
????transform:skew(0deg);
}

.test4{background:?#1a4613}
.test4?figcaption{width:?100%;height:?100%;}
.test4?figcaption?div{
????position:?absolute;
????top:?10%;left:?10%;
????width:?80%;height:?80%;
????border:?2px?solid?#ffffff;
????transform:scale(1,1);
????opacity:?0;
}
.test4?figcaption?h2{margin-top:?15%;margin-left:?15%;}
.test4?figcaption?p{margin-top:5px;margin-left:?15%;}
.test4:hover?img{opacity:?0.6;}
.test4:hover?figcaption?h2{
????transform:scale(1.2,1.2);
????margin-top:?20%;margin-left:?30%;
}
.test4:hover?figcaption?p{
????transform:scale(1.2,1.2);
????margin-left:?30%;
}
.test4:hover?div{transform:scale(0.8,0.8);opacity:?1;}

.test5{background:?#36460c}
.test5?figcaption{width:?100%;height:?100%;}
.test5?figcaption?div{
????position:?absolute;
????top:?10%;left:?10%;
????width:?80%;height:?80%;
????border:?2px?solid?#ffffff;
????transform:scale(1.2,1.2)?rotate(0deg);
????opacity:?0;
}
.test5?figcaption?h2{
????margin-top:?15%;margin-left:?15%;
????transform:scale(1.2,1.2)?skew(90deg);
}
.test5?figcaption?p{
????margin-top:5px;margin-left:?15%;
????transform:scale(1.2,1.2)?skew(90deg);
}
.test5:hover?img{
????opacity:?0.6;
????transform:scale(1.2,1.2);
}
.test5:hover?figcaption?h2{transform:scale(1,1)?skew(0deg);}
.test5:hover?figcaption?p{transform:scale(1,1)?skew(0deg);}
.test5:hover?div{
????transform:scale(1,1)?rotate(360deg);
????opacity:?1;
}

.test6{background:?#ddb31d}
.test6?figcaption{width:?100%;height:?100%;}
.test6?figcaption?h2{
????margin-top:?15%;margin-left:?15%;
????transform:scale(1.2,1.2);
}
.test6?figcaption?p{
????margin-top:5px;margin-left:?15%;
????transform:scale(1.2,1.2)?translate(0,50px);
????opacity:?0;
}
.test6?figcaption?.line1{
????position:?absolute;
????top:?5%;left:?10%;
????width:?80%;height:?90%;
????border-left:?2px?solid?#ffffff;border-right:?2px?solid?#ffffff;
????transform:scale(1,0);
}
.test6?figcaption?.line2{
????position:?absolute;
????top:?10%;left:?5%;
????width:?90%;height:?80%;
????border-top:?2px?solid?#ffffff;border-bottom:?2px?solid?#ffffff;
????transform:scale(0,1);
}
.test6:hover?img{opacity:?0.6;}
.test6:hover?figcaption?h2{transform:scale(1,1);}
.test6:hover?figcaption?p{transform:scale(1,1)?translate(0,0);opacity:?1;}
.test6:hover?figcaption?div{transform:scale(1,1);}

.test7{background:?#ddb31d}
.test7?figcaption{width:?130%;height:?100%;}
.test7?figcaption?div{
????position:?absolute;
????top:0;left:?0;
????width:?100%;height:?100%;
????background:?#ffffff;
????opacity:?0.5;
????transform:?translate(0,100%)?rotate(0deg);
????transform-origin:left?top;
}
.test7?figcaption?h2{
????position:absolute;
????margin:15%?0?0?10%;
????opacity:0;
}
.test7?figcaption?p{
????position:absolute;
????margin:?50%?0?0?50%;
????z-index:9999;
????opacity:0;
????color:#000;
}
.test7:hover?figcaption?div{
????transform:translate(0,100%)?rotate(-15deg);
????opacity:?0.8;
}
.test7:hover?img{opacity:0.6;transform:translate(0,-10px);}
.test7:hover?figcaption?h2{?opacity:1;?transition-delay:0.2s;}
.test7:hover?figcaption?p{?opacity:1;?transition-delay:0.3s;}

.test8{background:?#ddb31d}
.test8?figcaption{width:?100%;height:?100%;}
.test8?figcaption?div{
????position:?absolute;
????top:0;left:?0;
????width:?100%;height:?100%;
????box-sizing:?border-box;
????padding:?0?20%;
????background:?#ffffff;
????opacity:?0.5;
????transform:?translate(0,70%);
}
.test8?figcaption?h2{
????position:absolute;
????margin:5%?0;
????color:#000;
}
.test8?figcaption?p{
????position:absolute;
????margin:?25%?0;
????color:#000;
}
.test8:hover?figcaption?div{
????transform:translate(0,25%);
????opacity:?0.8;
}
.test8:hover?img{opacity:0.6;}