井字格的問題
那個(gè)井字格的 試了試 ?和老師展示的效過不一樣呢
.div1{
width:70%; height:90%; border-left:1px solid #fff; border-right:1px solid #fff; position:absolute; left:15%; top:5%;transform:scale(0); transition: all 0.8s;
}
.div2{
width:90%; height:70%; border-top:1px solid #fff;border-bottom:1px solid #fff; position:absolute; left:5%; top:15%; transform:scale(0); transition: all 0.8s;
}
.test6:hover p{
transform:translate(0,-60px);opacity:1;transition: all 0.3s;
}
.test6:hover img{
opacity:0.5;
}
.test6:hover .div1{
transform:scale(1,1); transition: all 0.8s;
}
.test6:hover .div2{
transform:scale(1,1); transition: all 0.8s;
}
2015-10-22
應(yīng)該是樣式寫錯(cuò)了
2015-12-15
初始的時(shí)候第一個(gè)div要加上{transform:scale(1,0)；opacity：0；}
第二個(gè)div{transform:scale(0,1)；opacity：0；}
鼠標(biāo)hover時(shí)兩個(gè)div要加上{transform:scale(1,1)；opacity：1；}
2015-12-05
.div2標(biāo)簽相當(dāng)于放大了，所以你的圖片應(yīng)當(dāng)縮小相應(yīng)的倍數(shù)，總體上實(shí)現(xiàn)了類似廣角鏡頭的效果。
2015-10-27
寫出來了嗎？是不是要定義起始位置的？