亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

CSS3圖片動態提示效果

jack.xu Web前端工程師
難度初級
時長 1小時12分
學習人數
綜合評分9.53
159人評價 查看評價
9.9 內容實用
9.3 簡潔易懂
9.4 邏輯清晰
學完了,很到位
skew屬性有bug 會造成瀏覽器崩潰 具體原因未知
友情提示:圖片素材不要選太小
圖片沒有劃入劃出效果的話 css動畫這樣改試試
.test2:hover img{
transform: translate(-50px,0px);
opacity: 0.5;
}

最新回答 / 雙魚小容0313
.text4{position:relative;background:#000;}? ? ?.text4 img{transform:scale(1,1);}? ?.text4? figcaption div{border:2px solid #fff;width:80%;height:80%;position:absolute;left:10%;top:10%; }? ? ? .text4:hover img{transform:scale(1.2,1.2);}
這個講解的一般,,,說真心的
不建議使用*margin,padding為0時 ,那些的沒有用到樣式的都要設置一遍,影響性能,

最贊回答 / qq_與我無關N_0
因為在chrome上斜切90deg,相當于無限大,會卡死,可以改為以下設置,效果一樣會出來;可以設置:transform: skew(89deg);opacity:0;hover設置:transform:skew(0deg);opacity:1;
講的很棒!受益匪淺?。?!

最新回答 / 慕后端5039463
你這個我試過了? 是能動的 你把delay設置成2s 一開始我也以為不能動呢 等個2s就能動了
<p>translate:指定對象的2D平移,單位(px),第一個參數對應x軸,第二個參數對應y軸,如果第二個參數未提供,則默認值為零</p>
<p>rotate:指定對象的2D旋轉(順時針),單位(deg),需先有transform-origin屬性的定義,控制旋轉的中心點,默認值(50% 50%)</p>
<p>scale:指定對象的2D縮放,單位(‘1’),也需要transform-origin屬性的定義,控制縮放中心點,默認值(50% 50%)</p>
<p>skew:指定對象斜切扭曲,單位(deg),第一個參數對應x軸,第二個參數對應y軸,如果第二個參數未提供,默認值為零</p>
90deg不能用可以換成80deg或者其他加個透明度也可以實現
老師講的很好,不過要是有源碼就好了。
講的好復雜,前面說好的比JavaScript簡單去哪了呢
課程須知
1、您要具備HTML和CSS基礎知識 2、了解CSS3中的動畫。
老師告訴你能學到什么?
1,學會兩個HTML5新標簽figure以及figcaption 2,學會使用CSS的transform 3,學會使用CSS3的transition 4,學會利用屬性配合制作出絢麗的動畫效果

微信掃碼,參與3人拼團

微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

友情提示:

您好,此課程屬于遷移課程,您已購買該課程,無需重復購買,感謝您對慕課網的支持!

本次提問將花費2個積分

你的積分不足,無法發表

為什么扣積分?

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分?

舉報

0/150
提交
取消