纯CSS实现自动轮播，CSS变量的定义与使用，计算属性的使用

先来看一下实现的效果：

---

实现原理：

HTML中使用ul>li存放图片

CSS使用CSS3的animation来完成动画

---

<!-- HTML -->
<section class="slider-container">
    <ul class="slider">
       <li class="slider-item slider-item1">item1</li>
       <li class="slider-item slider-item2">item2</li>
       <li class="slider-item slider-item3">item3</li>
       <li class="slider-item slider-item4">item4</li>
       <li class="slider-item slider-item5">item5</li>
    </ul>
</section>

/* CSS */

/* CSS变量 */
:root{
   --red:red;
   --pink:pink;
   --blue:blue;
   --hotpink:hotpink;
   --yellow:yellow;
   --count:2s;
   --count1:calc(1*var(--count));
   --count2:calc(2*var(--count));
   --count3:calc(3*var(--count));
   --count4:calc(4*var(--count));
   --count5:calc(5*var(--count));
}

/* 父容器 */
.slider-container {
   width: 500px;
   height: 300px;
   overflow: hidden;
   margin: auto;
}
/* ul元素(做动画的元素) */
.slider{
   width: 2500px;
   height: 300px;
   float: left;
   animation: move6 10s var(--count1) linear infinite;
   -webkit-animation: move6 10s var(--count1) linear infinite;
}
/* 当鼠标放在ul上停止动画进行 */
.slider:hover{
   animation-play-state: paused;
}
.slider-item{
   width: 500px;
   height: 100%;
   line-height: 300px;
   float: left;
   text-align: center;
   font-size: 30px;
   color: #fff;
}
.slider-item1{
   background: var(--red);
}
.slider-item2{
   background: var(--pink);
}
.slider-item3{
   background: var(--blue);
}
.slider-item4{
   background: var(--hotpink);
}
.slider-item5{
   background: var(--yellow);
}
/*定义动画*/
@keyframes move6 {
   from {
       transform: translateX(0)
   }
   to {
       transform: translateX(-2000px)
   }
}

---

以上CSS部分使用了一些CSS原生变量和计算属性：

:root{}指在花括号内设置全局css变量
变量以'--'开头
使用变量的时候需要在var()中使用

计算属性cacle()可以进行计算
任何长度值都可以计算
内的运算符前后都需有一个空格' '