焦点图动画主要来自我们司空见惯的轮播图,我们点击轮播图的某个指示点时,可以切换会对应的图片,焦点轮播图常用的方案主要是用javascript和css共同实现,方案有大致以下几种:
•bootstrap...的轮播图插件•jquery市场的丰富的轮播图插件•swiper.js(丰富而强大,小程序也内置了swiper组件)•antd/element内置轮播图组件•slick•unslider 最简单的轮播图组件...适用于移动设备和桌面电脑,基于原生JavaScript的模块组件
以上介绍的方案都很成熟,我们可以直接拿来使用,但是为了追求简洁和代码量最低,我们有办法用纯css实现一个简单的焦点图切换动画吗?...)•《css大法》之使用伪元素实现超实用的图标库(附源码)
实现思路如下:
1.建立焦点图和控制点的对应关系2.初始化页面时只让第一个焦点图有宽度,其他宽度都设置为零,当控制点激活时,然控制点对应的目标对象的宽度设置为正常值...,其他的非目标对象都设置为零3.给焦点图添加transition过渡动画4.优化焦点图和控制点样式
具体代码如下:
.swiper {
position: relative