swiper 动画插件无限循环

最新推荐文章于 2024-05-17 15:36:38 发布

cfc0075

最新推荐文章于 2024-05-17 15:36:38 发布

阅读量658

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/cfc0075/article/details/111253866

版权

本文介绍了如何通过CSS实现swiper动画插件的无限循环效果，只需在CSS文件中添加.xunhuan样式，并将其应用到元素上。示例代码中展示了将无限循环效果应用于图片的实现方式，同时指出这种方法适用于简单需求，复杂的样式覆盖可能需要自定义更多CSS。欢迎读者互相交流。

摘要由CSDN通过智能技术生成

swiper 动画插件无限循环
在css.css文件上加上一个样式

.xunhuan{
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite
}

把.xunhuan样式写到元素上
写法如下，样式名中加上xunhuan

<img src="./image/flower.png" class="image1 ani xunhuan" swiper-animate-effect="fadeInUp" swiper-animate-duration="5s" swiper-animate-delay="0.3s" />

备注：这个应该算是最简单的写法了，也只能满足无限循环的需求。有其他需求还是需要去写一个样式覆盖插件自带的样式。
仅供参考，欢迎互相交流。

关注