animation-timeline实现纯css通过网页滚动驱动css动画进度播放示例代码

代码语言:html

所属分类:加载滚动

代码描述:animation-timeline实现纯css通过网页滚动驱动css动画进度播放示例代码

代码标签: animation-timeline css 网页 滚动 驱动 css 动画 进度 播放 示例 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>

    <style>
        #square {
          background-color: deeppink;
          width: 100px;
          height: 100px;
        
          animation-name: rotateAnimation;
          animation-duration: 3s;
          animation-direction: alternate;
            animation-timeline: scroll(); 
     .........完整代码请登录后点击上方下载按钮下载查看

网友评论0