继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

前端绅士
关注TA
已关注
手记 54
粉丝 1.6万
获赞 893

效果首先见这里:无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(线性)展示,新知识点解释如下:

属性 说明
transtion 过渡,参数分别是:过渡的属性、过渡时间、过渡效果,上面就是opacity使用过渡,1s时间,线性效果。
opacity 透明度,从0-1,由看不见到完全看见,注意是透明度,不是是否消失。

图片描述

由于第一个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,有方法的务必教一下啊~

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

打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP