css3 - google design 效果?
問題描述
https://design.google.com/art...
想問下他點(diǎn)每一個(gè)頁面後除了背景字跟物件會(huì)fadeInUp出現(xiàn)往下移之後每個(gè)區(qū)塊的圖也會(huì)fadeInUp(手機(jī)也會(huì))這該怎麼做呢?
問題解答
回答1:<link rel='stylesheet' href='http://m.piao2010.com/wenda/css/animate.css' />
<p data-wow-duration='1s'>
<p class='card horizontal'> <p class='card-image'><i class='ion ionicons ion-clock ion-4x blue-text'></i> </p> <p class='card-stacked'><p class='card-content'> <h5 class='header st'>內(nèi)容標(biāo)題</h5> <p>內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題內(nèi)容標(biāo)題</p></p> </p></p>
</p>
<script type='text/javascript' src='http://code.jquery.com/jquery...<script>window.jQuery || document.write(’<script src='js/jquery.min.js'></script>’)</script><script type='text/javascript' src='http://m.piao2010.com/wenda/js/jquery-migrate-1.2.1.min.js'></script><script type='text/javascript' src='http://m.piao2010.com/wenda/js/wow.js' ></script><script>
//頁面滾動(dòng)動(dòng)畫效果var wow = new WOW({ boxClass: ’wow’, animateClass: ’animated’, offset: 100, mobile: true, live: true});wow.init();
</script>
mobile:true; 即代表手機(jī)端也支持滾動(dòng)動(dòng)畫特效。
相關(guān)文章:
1. html5 - HTML代碼中的文字亂碼是怎么回事?2. node.js - vue 子組件的菜單 如何與 父組件 通信?3. javascript - 這兩種函數(shù)寫法各有什么好處?4. 前端 - css3傾斜帶來問題部分?5. javascript - node環(huán)境使用vue-cli 配置代理6. 微信支付 - python做微信企業(yè)付款出現(xiàn)CA證書錯(cuò)誤7. angular.js - 在ionic下,利用javascript導(dǎo)入百度地圖,pc端可以顯示,移動(dòng)端無法顯示8. 前端 - css自定義字體9. html5 - 如何禁止百度轉(zhuǎn)碼?10. 微信內(nèi)網(wǎng)頁上傳圖片問題
