CSS3-动画元素（如果在视口中可见）（页面滚动）

js CSS

1个回答

写回答

mingd

2025-06-12 14:40

+ 关注

CSS
CSS

CSS3-动画元素（如果在视口中可见）（页面滚动）

CSS3中的动画元素为网页设计师提供了更多的创作空间和表现力。但是，有时候我们希望在用户滚动页面时才触发某些动画效果，以此来提高用户的注意力和体验。本文将介绍如何使用CSS3的动画元素来实现当元素在视口中可见时才触发动画效果的功能。

实现方式

在CSS3中，我们可以使用@keyframes关键字来定义动画的关键帧，然后通过animation属性将动画应用于元素上。为了实现当元素在视口中可见时才触发动画效果的功能，我们可以结合JavaScript来监听页面滚动事件，并判断元素是否在视口中。

示例代码

html
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 定义动画关键帧 */
    @keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    
    /* 将动画应用于元素 */
    .fade-in {
      opacity: 0;
      animation: fadeIn 1s ease-in-out;
    }
  </style>
</head>
<body>
  <div class="contAIner">
    <h1>页面滚动动画示例</h1>
    <div class="fade-in">我会在视口中出现时淡入</div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis, nisl sit amet lacinia fringilla, nunc tellus auctor lectus, vel facilisis nunc erat at ante. Sed auctor, lacus vitae luctus viverra, tortor urna volutpat lacus, sed aliquam lacus risus id nibh.
    <div class="fade-in">我会在视口中出现时淡入</div>
    
<img src="https://img.izhida.com/topic/d52387880e1ea22817a72d3759213819.jpg" alt="Java"><br>Java
Phasellus eu justo in turpis consectetur blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam feugiat, ex nec facilisis viverra, risus urna semper felis, nec lobortis eros sapien sit amet dui. Morbi justo lectus, commodo at leo non, efficitur semper nunc.
    <div class="fade-in">我会在视口中出现时淡入</div>
  </div>
  
  <script>
    // 获取所有带有.fade-in类的元素
    var fadeIns = document.querySelectorAll('.fade-in');
    
    // 监听页面滚动事件
    window.addEventListener('scroll', function() {
      // 遍历每个.fade-in元素
      for (var i = 0; i < fadeIns.length; i++) {</p>        var fadeIn = fadeIns[i];
        var bounding = fadeIn.getBoundingClientRect();
        
        // 判断元素是否在视口中
        if (bounding.top <= window.innerHeight && bounding.bottom >= 0) {
          fadeIn.classList.add('visible');
        } else {
          fadeIn.classList.remove('visible');
        }
      }
    });
  </script>
</body>
</html>

效果说明

以上示例代码中，我们定义了一个名为fadeIn的动画关键帧，使元素从透明度0渐变到透明度1。然后，我们给希望触发动画效果的元素添加了.fade-in类，并将动画应用于它们。通过JavaScript监听页面滚动事件，当元素进入视口时，我们为其添加了.visible类，从而触发动画效果。

通过结合CSS3和JavaScript的功能，我们可以实现当元素在视口中可见时才触发动画效果的功能。这种方式可以增加网页的交互性和吸引力，提高用户体验。希望本文对你理解和应用CSS3动画元素有所帮助。

举报有用（4）分享收藏

CSS3-动画元素（如果在视口中可见）（页面滚动）

1个回答

mingd

热门话题

相关问题