CSS滚动动画

最新推荐文章于 2024-03-07 16:42:20 发布

紫微前端

最新推荐文章于 2024-03-07 16:42:20 发布

阅读量2.1k

点赞数

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

本文链接：https://blog.csdn.net/liuhao9999/article/details/125501049

版权

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

510 篇文章 11 订阅 ¥39.90 ¥99.00

订阅专栏

个 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>

<script>
window.addEventListener(
  "scroll",
  () => {
    document.body.

了解本专栏