文章/答案/技术大牛

发布

社区首页 >问答首页 >垂直滑动CSS背景图像

问垂直滑动CSS背景图像
EN

Stack Overflow用户

提问于 2014-10-17 16:18:43

回答 1查看 3K关注 0票数 4

我注意到了这对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;
}

html

css

css-animations

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-10-17 16:41:38

伪元滑动背景

<body>的一个或两个背景伪元素，它们是具有高度和宽度百分比的position: fixed。

若要显示背景以上的元素，请使用以下命令：

element-to-show-above {
    position: relative;
    z-index: 1;
}

对于包含大量内容的页面，将上述属性应用到包含所有元素的包装中是有意义的。

两个例子

“显示代码片段”并运行它来查看演示。

#1 -缓慢过渡到顶部并暂停

一个伪元素的高度是视口的高度和宽度的200%。
背景幻灯片到-50%，并暂停使用forwards选项。

注释： Safari目前需要转换属性的-webkit-前缀。

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%);
  }
}

#2 -无休止的背景幻灯片

第一，从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%);
  }
}

票数 6

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26429284

复制

相似问题

问垂直滑动CSS背景图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问垂直滑动CSS背景图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问垂直滑动CSS背景图像
EN