Question

我想在我的网站上有一个滑块，到目前为止我只能使用实际的<img>而不是背景图像来实现它，我知道可以让你的图像褪色in然后淡出，但我想知道是否可以让你的背景图像从页面上滑落。

Answer 1

Tyampus.net有一个很好的工作解释，涉及使用HTML和CSS3。这里解释如下：

根据链接：

第1步 对于此部分，您必须创建一个ul元素，该元素用作滑块的基本框架：以下是用于描述以下内容的剪辑：

<ul class="cb-slideshow">
    <li>
        <span>Image 01</span>
        <div>
            <h3>re·lax·a·tion</h3>
        </div>
    </li>
    <li><!--Other imgs--></li>
    <li><!--...--></li>
</ul>

（跨度将包含背景图像）

第2步

接下来，必须将基本样式添加到列表中，它们包括确保元素已修复并延伸到视口上。

.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}
.cb-slideshow:after { 
    content: '';
    background: transparent url(img.png) repeat top left; 
}

第3步 （图像的位置绝对高度和宽度为100％。代码如下。）

.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 36s linear infinite 0s; 
}

下一个剪辑会将动画设置为36秒：

.cb-slideshow li div { 
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    animation: titleAnimation 36s linear infinite 0s; 
}

步骤4 这定义了滑块的图片和动画延迟：

.cb-slideshow li:nth-child(1) span { 
    background-image: url(../images/1.jpg) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../images/2.jpg);
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(../images/3.jpg);
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(../images/4.jpg);
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) span { 
    background-image: url(../images/5.jpg);
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
    background-image: url(../images/6.jpg);
    animation-delay: 30s; 
}

.cb-slideshow li:nth-child(2) div { 
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) div { 
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) div { 
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) div { 
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) div { 
    animation-delay: 30s; 
}

（图像动画选择器）

@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

此动画以淡出的数量发生

第5步

对于非动画支持浏览器，请添加以下规则

.no-cssanimations .cb-slideshow li span{
    opacity: 1;
}

Answer 2

您可以使用CSS3的多重背景支持并使用标准动画进行滑动：

.slideshow {
  width: 600px;
  height: 400px;
  border: 1px solid #999;
  background: url(http://lorempixel.com/600/400/sports?_=1) 0 0 no-repeat,
    url(http://loremflickr.com/600/400/sports?_=2) 600px 0 no-repeat,
    url(http://loremflickr.com/600/400/sports?_=3) 1200px 0 no-repeat,
    url(http://loremflickr.com/600/400/sports?_=4) 1800px 0 no-repeat;
  animation: slide-right 15s forwards 1s;
}
@keyframes slide-right{
  0% {
    background-position: 0 0, 600px 0, 1200px 0, 1800px 0
  }
  16%, 33% {
    background-position: -600px 0, 0 0, 600px 0, 1200px 0
  }
  49%, 66% {
    background-position: -1200px 0, -600px 0, 0 0, 600px 0
  }
  85%, 100% {
    background-position: -1800px 0, -1200px 0, -600px 0, 0 0
  }
}

<div class="slideshow"></div>

是否可以仅使用html / css创建背景图像滑块

2 个答案: