前端 | 纯CSS实现无限循环轮播
source link: https://www.scarsu.com/infinite_scroll_by_css/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
前端 | 纯CSS实现无限循环轮播
无JS代码实现无限循环轮播、鼠标悬浮时暂停动画、鼠标移出时继续动画
demo代码
<div class="wrap">
<div class="slide-dom">
<div class="itemA">A</div>
<div class="itemB">B</div>
<div class="itemA">A</div>
<div class="itemB">B</div>
</div>
</div>
@keyframes infinite-slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.wrap{
overflow-x: visible;
background:#eee;
width:200px;
height:300px;
margin:0 auto;
padding:100px 0;
}
.slide-dom{
width:max-content;
animation: infinite-slide 10s linear infinite;
}
/* 鼠标悬浮时暂停动画 */
.slide-dom:hover{
animation-play-state: paused;
}
.itemA{
display:inline-block;
width:200px;
height:100px;
background:pink;
}
.itemB{
display:inline-block;
width:200px;
height:100px;
background:yellow;
}
preview
v1.4.18
Recommend
-
63
Vue实现内部组件轮播切换效果
-
69
同学们在写需求的时候肯定会时常用到UIScrollView。而说到UIScrollView，大家最先想到的肯定就是它上面的无限轮播功能。苹果在UIScrollView上并没有提供相应的方法让大家实现轮播，所以就需要通过代码进行处理来实现。先上图
-
23
首先总结一下大体思路就是通过一个ViewPager来进行无限的自动滑动来达到我们想要的实现的轮播图效果 首先先写UI <?xml version="1.0" encoding="utf-8"?> <LinearLayout android:orientation="vertical"...
-
19
去年8月份，我在Github开源了一个无限循环的轮播图库— BannerViewPager (以下简称BVP)。时至今日，一年多的时间过去了，BVP在大家的支持下已经在GitHub上收获了1.9k的Star。...
-
13
iOS下自己动手造无限循环图片轮播 浏览:798次 出处信息 代码示...
-
4
运用CSS实现轮播图发布于 33 分钟前<!-- * @Author: [you name] * @Date: 2021-09-16 23:22:37 * @LastEditors: [you name] * @LastEditTime: 2021-09-16...
-
7
今天，分享一个实际业务中能够用得上的动画技巧。 巧用逐帧动画，配合补间动画实现一个无限循环的轮播效果，像是这样：
-
7
轮播图经常会在项目里用到，但是实际上用到的轮播图都是比较简单的，没有复杂的特效，这个时候如果去引入swiper那些库的话，未免就有点杀鸡焉用牛刀了。 所以不如自己手写一个，而今天我要分享的一种写法也是我最近才发现的，发现写起来真的是很丝滑，只纯css...
-
7
纯CSS实现无限循环轮播无JS代码实现无限循环轮播、鼠标悬浮时暂停动画、鼠标移出时继续动画 2022/4/23 1...
-
4
OpenHarmony使用Swiper组件实现轮播图 作者：zhushangyuan_ 2023-08-08 14:31:42 OpenHarmony可以使用Swiper轮播组件实现轮播图。本例基于橘子购物示例应用，为大家介绍轮播组件Swiper，该组件提供滑动轮播显示的...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK