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

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

這種圖片依次淡入出現的效果是如何實現的？萬分感謝

這種圖片依次淡入出現的效果是如何實現的？萬分感謝

慕絲7291255 2019-09-19 21:43:33
初學前端。偶然發現這個網站，https://pepecph.com/，覺得頁面上圖片依次淡入出現的效果非常經驗，想知道是怎么實現的。這個問題其實包含了兩個問題：請問這個種效果怎么實現的，可能需要使用到那些動畫庫？請問在學習前端的時候，當我發現一個網站的效果或者樣式很喜歡，除了去找有其源碼的git倉庫鏈接之外，還有什么其他方法可以“逆向工程”出來它的效果？
查看完整描述

2 回答

?
撒科打諢

TA貢獻1934條經驗 獲得超2個贊

淡入淡出是通過opacity和過渡屬性去控制的，從0-1。如下示例：
.image{
transition:all2s;//all表示該元素不管什么屬性變化都會觸發過渡效果，如果只想要單一效果把all換成opacity就行，表示透明度變化才過渡。2s表示過渡周期為2秒。
}
.fadeout{
opacity:0;
}
//當有了上面兩個CSS后，只需要動態給timg標簽再加上fadeout類名，變成：，就會觸發淡出效果?！澳嫦蚬こ獭蹦阈枰獣褂胏hrome的F12，查看元素，查看CSS，查看JS。
查看完整回答
反對 回復 2019-09-19
?
慕標5832272

TA貢獻1966條經驗 獲得超4個贊

推薦一個amazing的動畫庫GSAP，非常快，還支持與react和vue結合使用，目前官網數據是已被500+萬個網站和品牌使用。
查看完整回答
反對 回復 2019-09-19
  • 2 回答
  • 0 關注
  • 334 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號

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