我注意到这对Pinterest有很好的效果。
背景图像垂直滚动,感觉到它大于视口。我试过玩CSS没有运气。
的HTML
<div class="out">
<div class="inner">hello</div>
</div>
的CSS
@keyframes scrollBgGridLinks {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-330px);
}
}
.inner {
animation: 35s linear 0s normal forwards 1 scrollBgGridLinks;
background-color: red;
position: absolute;
clip:rect(0px, 50px, 50px, 0px);
width:200px;
}
.out {
height:200px;
}
的一个或两个背景伪构件<body>
是position: fixed
具有高度和宽度的百分比。
要在背景上方显示元素,请使用以下命令:
element-to-show-above {
position: relative;
z-index: 1;
}
对于内容很多的页面,将上述属性应用于包含所有元素的包装器是有意义的。
“显示代码段”并运行它以查看演示。
一个伪元素的高度是视口的高度和宽度的200%
背景滑至-50%,并在该forwards
选项下暂停
注意: Safari当前需要-webkit-
transform属性的前缀。
body {
margin: 0;
}
body:before {
content: '';
display: block;
-webkit-animation: 80s bg linear forwards;
animation: 80s bg linear forwards;
background: url(http://i.stack.imgur.com/zawJr.jpg) no-repeat;
background-size: 100% 100%;
position: fixed;
height: 300%;
width: 200%;
top: 0;
left: 0;
}
@-webkit-keyframes bg {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
}
@keyframes bg {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
}
第一位从0开始,滑到-100%。
第二个数字从100%开始,然后滑到0。
它们一起形成了恒定的运动错觉,不需要额外的HTML!
body {
margin: 0;
}
body:before {
content: '';
display: block;
-webkit-animation: 5s bg linear infinite;
animation: 5s bg linear infinite;
background: url(http://i.stack.imgur.com/zawJr.jpg) no-repeat;
background-size: 100% 100%;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
body:after {
content: '';
display: block;
-webkit-animation: 5s bg2 linear infinite;
animation: 5s bg2 linear infinite;
background: url(http://i.stack.imgur.com/zawJr.jpg) no-repeat;
background-size: 100% 100%;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
@-webkit-keyframes bg {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-webkit-keyframes bg2 {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
100% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
}
@keyframes bg {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@keyframes bg2 {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
100% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句