HTML和CSS滚动时动画效果

yycvip

随着内容进入视口时的动画效果越来越流行，可以吸引用户注意每个部分。不过，适度为宜，避免效果过于喧闹。这个效果使用了 AOS（滚动时动画）库。



HTML

1. <div class="item" data-aos="fade-up">1</div>
   
2. <div class="item" data-aos="fade-down">2</div>
   
3. <div class="item" data-aos="fade-right">3</div>
   
4. <div class="item" data-aos="fade-left">4</div>
   
5. 
   
6. <div class="item" data-aos="zoom-in">5</div>
   
7. <div class="item" data-aos="zoom-out">6</div>
   
8. 
   
9. <div class="item" data-aos="slide-up">7</div>
   
10. 
    
11. <div class="item" data-aos="flip-up">8</div>
    
12. <div class="item" data-aos="flip-down">9</div>
    
13. <div class="item" data-aos="flip-right">10</div>
    
14. <div class="item" data-aos="flip-left">11</div>
    

复制代码

CSS

1. * {
   
2.   box-sizing: border-box;
   
3. }
   
4. 
   
5. .item {
   
6.   width: 200px;
   
7.   height: 200px;
   
8.   margin: 50px auto;
   
9.   padding-top: 75px;
   
10.   background: #ccc;
    
11.   text-align: center;
    
12.   color: #FFF;
    
13.   font-size: 3em;
    
14. }
    

复制代码

JS

1. AOS.init({
   
2.   duration: 1200,
   
3. })
   

复制代码