纯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()可以进行计算
任何长度值都可以计算
内的运算符前后都需有一个空格' '