台灣最大程式設計社群網站
線上人數
681
 
會員總數:245017
討論主題:188961
歡迎您免費加入會員
討論區列表 >> CSS/HTML5/Bootstarp >> hovver無法啟用
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
hovver無法啟用
價值 : 50 QP  點閱數:449 回應數:1

樓主

jenny
門外漢
0 1
6 0
發送站內信


為什麼.picture:hover無法啟用啊?



----------------------------------------
css
*{
position: relative;
box-sizing: border-box;
font-family: arial;
}
html,body{
height: 100%;
}
.wrapper{
height:100%;

background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);}
/*camera*/
.camera{
width: 200px;
height: 200px;
border: 10px solid #fff;
border-radius: 50px;
perspective: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
animation:
ballup 0.5s 1s both,
balldown 0.2s 1.5s ease-in forwards,
camerain 0.3s 1.7s forwards ;

}
@keyframes ballup{
0%{top: 50%;
width: 5px;
height: 5px;
opacity: 0;
}
10%{
opacity: 1;
}
100%{top: 10%;
width: 5px;
height: 5px;}
}
@keyframes balldown{
0%{top: 10%;}
100%{top: 50%;}
}
@keyframes camerain{
0%{width: 5px; height: 5px;
}
80%{
width: 250px;
height: 250px;
}
100%{width: 200px;height: 200px; }
}
/*lens*/
.lens{
width: 100px;
height: 100px;
border: 15px solid #fff;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
animation:
lensin 0.3s 1.8s backwards;
}
@keyframes lensin{
0%{
width: 0;height: 0;
opacity: 0;

}
10%{
opacity: 1;
}
80%{
width: 120px;
height: 120px;
}
100%{
width: 100px;
height: 100px;

}
}
/*flashlight*/
.flashlight{
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 20px;
right: 20px;
animation:flashlightin
0.3s 2.2s backwards
;
}
@keyframes flashlightin{
0%{
transform: scale(0);
}
80%{
transform: scale(1.2);
}
100%{
transform: scale(1);

}
}

.flashlight:after{
content: "";
width: 200px;
height: 200px;
border-radius: 50%;
background-color: rgba(256,256,256,0.5);
opacity: 0;

display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
animation:
flashlight 0.3s 3s;


}

@keyframes flashlight{
0%{opacity: 0;}
25%{opacity: 1;}
50%{opacity: 0;}
75%{opacity: 1;}
100%{opacity: 0;}

}

/*picture*/
.picture{
width: 250px;
height: 250px;
background-color: #ccc;
border: 10px solid #fff;
border-bottom: 20px solid #fff;
display:inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
opacity: 0;
/* overflow: hidden; */
animation:
pic 1s 3.5s forwards,
picflip 1s 4.5s both ;
transition: all 0.3s;


}


@keyframes pic
{
0%{
width: 120px;
height: 0px;
opacity: 0;
top: 100%;
transform: translate(-50%,0%);
}
100%{width:120px;
height: 120px;
opacity: 1;
top: 100%;
transform: translate(-50%,0%);

}
}


@keyframes picflip
{
0%{width:120px;
height: 120px;

top: 100%;
transform: translate(-50%,0%)
rotateX(0deg);}
100%{width:250px;
height: 250px;

top: 50%;
transform: translate(-50%,-50%)
rotateX(360deg);}}

.imgbox img{
width: 100%;
}

.imgbox{
animation:showimg
1s 5s backwards;

}
@keyframes showimg{
0%{opacity: 0;}
100%{opacity: 1;}
}

.picture:hover
{
width: 400px;
height: 400px;
}

為什麼.picture:hover無法啟用啊?








搜尋相關Tags的文章: [ hover ] , [ css ] ,
本篇文章發表於2018-11-01 10:15
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
回應

浩瀚星空
捐贈 VP 給 浩瀚星空 檢舉此回應
請善用你的瀏覽器,f12大法查原因。

先確定是否是如你說的「無法啟用」
本篇文章回覆於2018-11-02 15:41
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.