无JS首页banner相关CSS动画知识点

效果首先见这里：无JS的简单banner

约定描述：x.y为class为y的x标签；x#y为id为y的x标签；无标签即.y或#y均默认标签为div。

废话不多说，直接上代码：

pug

关于pug的内容本篇不做解释，详情请看：Vue进阶课堂之《从HTML到Pug》

.banners
  input.radio(type='radio' checked name='radio')
  .banner.red

  input.radio(type='radio' name='radio')
  .banner.blue

  input.radio(type='radio' name='radio')
  .banner.green

我们用三个banner做实例，由于不用JS，所以我们应该首先想到自带交互的标签，input，且类型是radio或checkbox，由于banner是典型的点选，所以一定使用radio。

最好把banner功能模块单独放在一个div里面（实例中的.banners），方便后期拓展。

label可选，由于本例与label关系不大，所以给注释了，减少理解难度。label与input的关系请自己查阅。

然后三个type为radio、input.radio，各自后面紧跟一个.banner.颜色，没错，这个div就是我们的banner实例，实际使用中，把div内容填充为banner实际内容即可。

注意input的name属性是必须的，否则无法把三个input归类成同一系统下的radio，即没有name，三个input就脱离了关系，不会出现此消彼长的效果。

到这里，我们banner的标签就搞定了。

有没有问题？有问题赶紧留言提出来啊！

当前效果：

sass

看了上面的效果是不是觉得心累，搞了半天就这么个东西，跟裸三个input有什么区别？

别急，我们需要样式帮忙。

关于sass，这里你先就当做没有大括号跟分好的CSS得了。有兴趣自己查阅一下，很强大的东西。

首先，我们还是正常点，通过.banners设置flex布局使得banner控制的锚点在中间。

.banners
  display: flex
  justify-content: center

然后，习惯性的给控制器（锚点）来个手指的覆盖样式，并且设置下距离上面的距离。

.radio
  position: relative
  top: 70px
  cursor: pointer

在给三个banner上背景色：

.red
  background: red

.blue
  background: blue

.green
  background: green

注意这里由于banner没有大小，所以显示上没有用。

于是乎，我们需要把banner的大小设置好，并且记得把position设为absolute，因为banner的位置是重叠的，如果使用默认或relative会被文档流挤下去。

.banner
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100px
  z-index: -1
  transition: opacity 1s linear
  opacity: 0

这里注意：z-index设置-1是为了让单个radio正常显示在banner上面，如果不设置因为absolute脱离文档流，会把input盖住。

transition（过渡）意思是opacity（透明度）的变化会在1s动态linear（线性）展示，新知识点解释如下：

由于第一个input.radio是checked，所以显示红色。

然后不要忘了交互效果：

.radio:checked + .banner
  opacity: 1

即被选中的input.radio，后面相邻的.banner透明度为1。

由于上面有设置当.banner的透明度变化会触发过渡效果，所以就呈现了点击下方的控制器，从而交替变化banner的功能。

最终效果如下：

完整sass代码：

.banners
  display: flex
  justify-content: center

.radio
  position: relative
  top: 70px
  cursor: pointer

.radio:checked + .banner
  transform: translateX(0)
  opacity: 1

.banner
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100px
  z-index: -1
  transition: opacity 1s linear
  transform: translateX(-100%)
  opacity: 0

.red
  background: red

.blue
  background: blue

.green
  background: green

效果：无JS的简单banner

我还没想到使用CSS如何自动切换checked，有方法的务必教一下啊~

如果文章对你有一点点的帮助，请关注一波，定期更新技术文章，谢谢。