CSS滚动动画

紫微前端

于 2022-06-28 14:05:48 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识加深文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/125501049

前端知识加深专栏收录该内容

510 篇文章 ¥39.90 ¥99.00

订阅专栏

本文介绍了如何利用CSS和CSS自定义属性实现基于页面滚动的SVG元素动画。通过监听页面滚动百分比，并据此调整CSS动画的时间，可以创造出独特的视觉效果。示例中展示了一个在用户滚动时暂停和改变动画迭代的SVG旋转动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

个 CSS 自定义属性，该属性知道页面滚动的百分比：

window.addEventListener('scroll', () => {
  document.body.style.setProperty(
        '--scroll',
         window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
}, false);

让我们先设置一个不使用该值的动画。这是一个简单的 SVG 元素旋转动画，它将永远旋转和旋转：

<svg width="100" height="100" viewBox="0 0 24 24">
  <path d="M21,9H15V22H13V16H11V22H9V9H3V7H21M12,2A2,2 0 0,1 14,4A2,2 0 0,1 12,6C10.89,6 10,5.1 10,4C10,2.89 10.89,2 12,2Z" />
</svg>

<style>
 svg {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;

  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
</style&

了解本专栏