Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/70.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 如何保持动画背景并使页面在其上滚动?_Html_Css_Css Animations - Fatal编程技术网

Html 如何保持动画背景并使页面在其上滚动?

Html 如何保持动画背景并使页面在其上滚动?,html,css,css-animations,Html,Css,Css Animations,网页有一个静态的背景,我希望动画也保持静态,而网页的内容滚动。这能做到吗?当前,当页面滚动时,动画也会滚动 这是我举的一个粗略的例子。这是我第一次使用css动画。我一直在寻找答案,但只找到了带有滚动事件的动画 html{ 背景:urlhttp://img15.deviantart.net/1294/i/2010/260/9/8/sample_background_001_by_professormegaman-d2yxb7g.png 无重复中心固定; -webkit背景尺寸:封面; -moz背

网页有一个静态的背景,我希望动画也保持静态,而网页的内容滚动。这能做到吗?当前,当页面滚动时,动画也会滚动

这是我举的一个粗略的例子。这是我第一次使用css动画。我一直在寻找答案,但只找到了带有滚动事件的动画

html{ 背景:urlhttp://img15.deviantart.net/1294/i/2010/260/9/8/sample_background_001_by_professormegaman-d2yxb7g.png 无重复中心固定; -webkit背景尺寸:封面; -moz背景尺寸:封面; -o-背景尺寸:封面; 背景尺寸:封面; z指数:-2; } img{ 宽度:100px; } .汽车对吗{ 位置:绝对位置; 最高:86%; 左:0px; z指数:-1; 背景色:红色; 动画持续时间:15秒; 动画名称:戈赖特; 动画迭代次数:无限; -moz动画持续时间:15s; -moz动画名称:goRight; -moz动画迭代次数:无限; } .汽车左转{ 位置:绝对位置; 最高:15%; 左:0px; z指数:-1; 背景颜色:蓝色; 动画持续时间:10秒; 动画名称:高尔夫; 动画迭代次数:无限; -moz动画持续时间:10s; -moz动画名称:goLeft; -moz动画迭代次数:无限; } @戈赖特的关键帧{ 从{ -webkit转换:translate0,0; } 到{ -webkit转换:translate700px,0; } } @-moz为goRight设置关键帧{ 从{ -moz变换:translate0,0; } 到{ -moz变换:translate700px,0; } } @高尔夫关键帧{ 从{ -webkit转换:translate700px,0; } 到{ -webkit转换:translate0,0; } } @-moz关键帧高尔夫球场{ 从{ -moz变换:translate700px,0; } 到{ -moz变换:translate0,0; } } 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 满足于此 尝试添加

.animation-container {
    position: fixed;
    height: 100%;
}

请不要根据答案更改有问题的代码段/代码块。这会让未来的读者感到困惑,首先是什么问题。请回滚您的编辑。