1. 首页
  2. css

创建CSS滑动背景效果

CSS中滑动背景的\”诀窍\”并不新鲜。事实上,我第一次看到它可能是几年前在Valio Con网站上(目前的设计已经没有了)。不过,我碰巧在今天访问的几个新站点上注意到了这一点,并认为值得分享。
这就是我们所追求的效果:
请注意,这不同于CSS幻灯片或旋转木马,其中的内容被分为可以停止的幻灯片。在CodePen上有很多这样的例子。
这种技术以一个元素的背景为背景,在x轴上无限循环地滑动它,以产生一种永远不停地移动背景的效果。设置HTML
这是一种我们的HTML需要的蓝图结构化:
有一个元素适合视口的确切宽度,另一个元素穿过并溢出视口。这意味着我们只需要在HTML标记中创建两个元素:一个用于背景,另一个用作该背景的包含包装,我们还添加了一个overflow属性,它将隐藏在它之外的任何可视内容。把它想象成照片上的作物。包装外可能有多余的东西,但包装使我们看不见它。
这就是我们的.sliding-background发挥作用的地方。它被设置为一些可笑的宽度,这将使大多数视口溢出。这就是诀窍:它应该是某种会溢出包装器的东西。在这个例子中,我有点随意地选择了一个5076px的宽度。创建背景图像
如果我们要在屏幕上滚动一些东西,我们需要一个图像,对吗?这是我们的下一个任务。
还记得我说过我有点武断地选择了5076px作为滑动背景的宽度吗?好吧,这是任意的,但是故意的,在这个意义上,它很好地被3整除,这符合一分钟长的循环的计时,稍后会出现。这意味着我们背景图像的画布是5076 / 3或1692px。最后,我们的背景将在一分钟内无限循环地重复三次。数学赢了!
500px的高度确实是任意的。这可以是你想要的任何东西,并将作为背景图像画布的高度。
这里是这个例子中使用的Photoshop模板,让你开始:
下载ZIP
保存(并优化!)形象。这就是我们将在CSS中用作背景图像的地方:
.sliding-background {background: url(\”..path/to/image\”) repeat-x;height: 500px;width: 5076px;}
太棒了!这给了我们一个巨大的图像,它溢出了包装,现在可以用来在屏幕上无限滚动。滑动效果
好吧,让我们让这个坏男孩动起来。我们希望它从左到右循环,一次又一次地重复,以创建一个无缝的效果,使图像永远持续。
首先,让我们定义CSS动画:
@keyframes .slide {0%{transform: translate3d(0, 0, 0);}100%{transform: translate3d(-1692px, 0, 0);}}
当动画开始时,我们使用transform属性将左图像定位在包装器的左边缘,像这样:
当动画完成时,它会将位置进行负向变换(从左到右),变换量与图像的确切宽度相匹配。而且,由于.sliding-background是实际图像宽度的三倍,因此在再次循环之前,图像在0%和100%之间重复三次。
注意:我们之所以使用额外的,而不是在主上设置background-position的动画,是为了我们可以使用动画transform来进行移动,这是更好的性能。
好的,让我们通过调用.sliding-background类中的slide动画来解决问题:
.sliding-background {background: url(\”..path/to/image\”) repeat-x;height: 560px;width: 5076px;animation: slide 60s linear infinite;}
animation属性指示.sliding-background使用slide动画,并以线性方式每次运行一分钟,无限循环。把它放在一起

.wrapper {overflow: hidden;}.sliding-background {background: url(\”..path/to/image\”) repeat-x;height: 560px;width: 5076px;animation: slide 60s linear infinite;}@keyframes slide{0%{transform: translate3d(0, 0, 0);}100%{transform: translate3d(-1692px, 0, 0);}}
这里是最终结果:

创建CSS滑动背景效果 为WP2原创文章,链接:https://www.wp2.cn/css/%e5%88%9b%e5%bb%bacss%e6%bb%91%e5%8a%a8%e8%83%8c%e6%99%af%e6%95%88%e6%9e%9c/