請問我這代碼哪里錯了嗎? 沒有旋轉效果 也沒有文字飛上來的效果?
<figure class="tis1">
<figure class="tis2">
<img src="../img/胡歌6.jpg"/>
<figcaption>
<h2>旋轉動畫</h2>
<p>飛來飛去,漫天飛舞</p>
<div></div>
</figcaption>
</figure>
.tis2 {background: #9C9C9C;}
.tis2 figcaption{width: 100%; height: 100%;}
.tis2 figcaption h2{margin-top: 15%;margin-left: 15%;}
.tis2 figcaption p{margin-left: 15%;transform:translate(0px,50px);opacity: 0;}
.tis2 figcaption div{
border: 2px solid #FFFFFF;
width: 80%;
height: 80%;
position: absolute;
top: 10%;?
left: 10%;
transform: translate(0px,-350px) rotate(0deg);
}
.tis2:hover figcaption div{transform:translate(0px,0px) rotate(360deg);}
.tis2:hover figcaption p{transform:translate(0px,0px);opacity:1;}
2017-08-31
你的transition動畫內容屬性設置呢兄弟