CSS 动画滑块

Posted 2023-03-06

【中文标题】CSS 动画滑块

【英文标题】：CSS Animation slider

【发布时间】：2017-03-11 12:47:53

【问题描述】：

我正在尝试仅使用 CSS 制作动画滑块。我有 3 张图片要水平滑动。我的问题是我可以添加它们转换，但没有动画动画必须在每张图像上停止几秒钟。任何人都知道如何管理它？我用萨斯。

代码：

.slider 
  position: relative;
  height: 100vh;
  // width: 100vw;
  overflow: hidden;
  display: block;
  .slides 
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: flex;
    transition-timing-function: ease-out;
    animation: slide 3s steps(2) infinite;
    .slide 
      height: 100vh;
      width: 100vw;
      padding: 100px;
      margin: 0 auto;
      float: left;
      text-align: center;
      img 
        margin: 0 auto;
        border-radius: 50%;
        height: 250px;
      
      h1 
        color: #323232;
        font-size: 32px;
        line-height: 42px;
        letter-spacing: 1px;
        padding-bottom: 12px;
      
      h4 
        font-weight: 200;
        line-height: 32px;
        letter-spacing: 0.9px;
        display: flex;
      
    
    //end .slide
    &:after 
      content: "";
      clear: both;
      display: block;
    
  
  //end .slides
  @keyframes slide 
    to 
      transform: translateX(-300vw);
    
  

<section class="slider">
  <div class="slides">
    <div class="slide">
      <img src="images/testimonial-img-1.jpg"  />
      <h1>TANYA - Architect</h1>
      <h4>Lorem ipsum dolor sit amet, maecenas eget vestibulum justo imperdiet, wisi risus purus augue vulputate voluptate neque, curabitur dolor libero sodales vitae elit massa.</h4>
    </div>

    <div class="slide">
      <img src="images/testimonial-img-2.jpg"  />
      <h1>LINDA - City planner</h1>
      <h4>Lorem ipsum dolor sit amet, maecenas eget vestibulum justo imperdiet, wisi risus purus augue vulputate voluptate neque, curabitur dolor libero sodales vitae elit massa.</h4>
    </div>

    <div class="slide">
      <img src="images/testimonial-img-3.jpg"  />
      <h1>SANDAR - Developer</h1>
      <h4>Lorem ipsum dolor sit amet, maecenas eget vestibulum justo imperdiet, wisi risus purus augue vulputate voluptate neque, curabitur dolor libero sodales vitae elit massa.</h4>
    </div>
  </div>
</section>

【问题讨论】：

你的代码有几件事，首先，你的代码有错误数量的括号19。其次，您的代码有很多不需要的嵌套。无需将.slide 嵌套在.slider 和.slides 中。您可以通过在顶层编写它来完成同样的事情。将嵌套级别保持在最低水平总是一个好主意

【参考方案1】：

您的 CSS，已修复：

.slider
      position: relative;
      height: 100vh;
      // width: 100vw;
      overflow: hidden;
      display: block;
    
    .slides
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        display: flex;
        animation: slide 3s ease-out infinite;    
    
    .slide
        height: 100vh;
        width: 100vw;
        padding: 100px;
        margin: 0 auto;
        float: left;
        text-align: center;
    
    img
        margin: 0 auto;
        border-radius: 50%;
        height: 250px;
    

    h1
        color: #323232;
        font-size: 32px;
        line-height: 42px;
        letter-spacing: 1px;
        padding-bottom: 12px;
    

    h4
        font-weight: 200;
        line-height: 32px;
        letter-spacing: 0.9px;
        display: flex;
    

    &:after
      content: ""; 
      clear: both; 
      display: block; 
    

结束 是错误的。你不能在另一个里面有一个css规则。 此外，如果您使用动画，过渡时间也没有做任何事情，您可以将其添加到动画声明中。过渡和动画是两个不同的东西。两者都有计时功能，您可以在一行或单独声明。

【讨论】：

感谢您的回答。我想括号没问题，我使用 sass 来管理 css。其次，我知道那个解决方案，但是——我的错误——我并不准确。我想改变那三张照片，但在每张照片上我也想停几秒钟。在你写的那种情况下，图像会浮动，并且不会停止三次。

【参考方案2】：

试试这个：-

#outerbox
	width:700px;
	overflow:hidden;
	
	
#sliderbox
	position:relative;
	width:2800px;
	animation:animation 20s infinite;
	
	
#sliderbox img
	float:left;
	 
@keyframes animation
	0%
		left:0px;
		
	100%
		left:-2800px;	
			
	
		

<div id="outerbox">
<div id="sliderbox">
<img src="http://labs.qnimate.com/slider/1.jpg"/> 
<img src="http://labs.qnimate.com/slider/2.jpg"/>
<img src="http://labs.qnimate.com/slider/3.jpg"/>

好的，试试这个

#outerbox
	width:700px;
	
#sliderbox
	position:relative;
	width:2800px;
	animation:animation 20s infinite;
	
#sliderbox img
	float:left;
	 
@keyframes animation
	0%
		left:0px;
		
	20%
		left:0px;	
			
	25%
		left:-700px;	
			
	45%
		left:-700px;	
			
	50%
		left:-1400px;	
			
	70%
		left:-1400px;	
			
	
		

<div id="outerbox">
<div id="sliderbox">
<img src="http://labs.qnimate.com/slider/1.jpg"/> 
<img src="http://labs.qnimate.com/slider/2.jpg"/>
<img src="http://labs.qnimate.com/slider/3.jpg"/>
 </div>
 </div>

【讨论】：

感谢您的回答，但我希望在每张图片上，动画都会停止几秒钟。我的错误我之前没有添加它。