Aos.js 入场动画

最近写一个某网站，要求入场动画，效果如下

话不多说看效果

依赖

 npm install aos --save

main.js引入

import AOS from "aos";
import "aos/dist/aos.css";
AOS.init();

部分代码

<template><div><div style="color: #333333;"><divdata-aos="fade-up"data-aos-duration="500"class="title">What is CoCoSwap</div><divdata-aos="fade-up"data-aos-duration="600"class="desc">A more concise leveraged aggregate trading system</div><divdata-aos="fade-up"data-aos-duration="700"class="content">Kokoswap uses an aggregate transaction model to automatically route users with the highest transaction return or the lowest transaction fee.</div><divdata-aos="fade-up"data-aos-duration="800"class="content1">KoKoSwap supports multi-token leveraged trading services including ETH/USDT, USDC/USDT, aToken/USDT.</div></div><divclass="row q-col-gutter-md"data-aos="fade-up"data-aos-duration="1200"data-aos-anchor-placement="top-bottom"><divdata-aos="fade-up"data-aos-duration="1300"class="q-mb-md col-lg-4 col-md-6 col-12"><q-card flat ><img src="~/assets/img/index/2.png"><div class="card-text text-center"><div  data-aos="fade-up"data-aos-duration="1400"class="text-black text-title q-pt-md">Loan service</div><div  data-aos="fade-up"data-aos-duration="1500"class="text-grey-99 text-desc q-pb-md q-px-sm text-justify">Rich choice of loan currency, high interest rate return, safe use of funds</div></div></q-card></div><divdata-aos="fade-up"data-aos-duration="1400"class="q-mb-md col-lg-4 col-md-6 col-12"><q-card flat><img src="~/assets/img/index/3.png"><div class="card-text text-center"><div  data-aos="fade-up"data-aos-duration="1700"class="text-black text-title q-pt-md">Aggregate transaction</div><div  data-aos="fade-up"data-aos-duration="1800"class="text-grey-99 text-desc q-pb-md q-px-sm text-justify">Intelligent routing algorithm to help users maximize asset returns</div></div></q-card></div><divdata-aos="fade-up"data-aos-duration="1500"class="q-mb-md col-lg-4 col-md-6 col-12"><q-card flat ><img src="~/assets/img/index/4.png"><div class="card-text text-center"><div  data-aos="fade-up"data-aos-duration="2000"class="text-black text-title q-pt-md">Unique clearing service system</div><div  data-aos="fade-up"data-aos-duration="2100"class="text-grey-99 text-desc q-pb-md q-px-sm text-justify">Adopting multi-sign DAO governance and a high-availability clearing model based on Layer 2</div></div></q-card></div></div></div>
</template><script>
export default {name: 'Second'
}
</script><style scoped lang="scss">
.title {font-size: 28px;letter-spacing: 1px;font-weight: bold;
}
.desc{font-size: 24px;margin-top: 10px;margin-bottom: 20px;}
.content{font-size: 20px;margin-top: 30px;margin-bottom: 10px;color: #999999;}
.content1{font-size: 20px;margin-bottom: 50px;color: #999999;}
.card-text{background: #F3F6FF;
}
</style>

更多用法…

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！