<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝轮播</title>
<!-- 运动 -->
<!--
voison:0.1
1 2 3 4 5 6 1
1走到6再到1,这时如果没有1这张图就有一个1图闪现的过程,也就是说,用1图来掩盖图片的动画的重新开始
多添加一张图,运动六张图的距离
-->
<style>
* {
margin:0 auto;
}
a {
text-decoration: none;
display: block;
}
ul {
list-style-type: none;
}
.banner-lb {
width: 310px;
border: 1px solid pink;
height: 193px;
margin:0 auto;
overflow: hidden;
}
.banner-lb img {
width:310px;
height: 193px;
}
.banner-lb ul {
width: 700%; /* 多添加一张图的长度,以避免出现闪图的bug*/
padding-left: 0px;
animation: lb 15s linear infinite; /*循环播放 匀速*/
}
.banner-lb:hover ul { /*
*/
animation-play-state: paused;
}
@keyframes lb {
form {
transform: translateX(0);
}
to {
transform: translateX(-1860px); /*只需要移动6张图的距离,这时显示
使用animation实现匀速无缝循环滚动动画,鼠标悬停停止运动
最新推荐文章于 2024-05-10 15:56:59 发布
本文介绍了如何利用CSS动画(animation)创建一个匀速且无缝循环的滚动效果,并详细讲解了如何通过:hover伪类在鼠标悬停时暂停动画的技巧,为网页增加动态交互体验。
摘要由CSDN通过智能技术生成