使用animation实现匀速无缝循环滚动动画，鼠标悬停停止运动

最新推荐文章于 2024-05-10 15:56:59 发布
最新推荐文章于 2024-05-10 15:56:59 发布
阅读量6.5k 收藏 10
点赞数 3
分类专栏： css 文章标签： css 循环滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37607451/article/details/102648082
版权 
<!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张图的距离，这时显示
最低0.47元/天 解锁文章
XiaoXiongV
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
10-26
本文将深入解析如何使用jQuery来实现这一功能，并且在鼠标悬停时暂停，鼠标离开后恢复滚动。 首先，我们来看HTML结构。这里创建了一个`<div>`元素，ID为`news`，内部包含一个无序列表`<ul>`，列表中包含多个链接`...
CSS3 animation 无缝滚动，鼠标悬浮暂停
卡尔特斯
09-28 149
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</tit...
CSS3中的animation属性实现无限循环的无缝滚动
热门推荐
JackieDYH的博客
04-23 1万+
在页面中循环展示信息的功能之前一般是用js来实现的，那么用CSS3该如何实现实现呢 有时候在页面的某个模块中，需要无限循环的滚动一些消息。那么如果我们用js实现无缝衔接滚动的思路是什么呢（比如我们这个模块是向上滚动的）？ 克隆A一份完全一样的数据B放在原数据A的后面； 使用setInterval向上滚动A的父级容器； 当向上滚动的距离L正好的A的高度时(L==A.height())，L=0，重新开始滚动，无限循环。 克隆一份数据放在后面，是为了当A向上移动时，后面有数据能填补
使用Animate鼠标悬浮时展示动画
最新发布
weixin_46011290的博客
05-10 409
将它设为与 partnersList 长度相同的数组，用于跟踪哪个图片被悬浮；，就是通过true或false来控制给当前图片加动画；为true或false来动态添加或移除 CSS 类名。：当鼠标移动到图片上时与当鼠标离开图片时，通过设置。：实现点击图片跳转到链接地址list.url；实现鼠标悬浮时展示动画，而不是直接进行动画；:鼠标悬停在当前图片上时有提示显示；
animation 循环_animation
weixin_39763033的博客
11-25 1673
Animation指定一个周期持续时间内的动画。当然需要该属性支持动画。使用时需要指定周期时间和关键帧名称上述代码鼠标放在div上会执行名为move的动画，持续时间为4秒。@keyframes move定义关键帧，按上述比例将时间分为5个关键帧节点，没到达一个关键帧执行当前关键帧语句。Animation 共有8个属性分别如下。animation-name'>：检索或设置对象所应用的...
用animation做无缝匀速滚动
行如逆水行舟，不进则退
04-02 3888
用animation做无缝匀速滚动原理应用 原理 最外层需要一个可视大小的盒子（黑色部分）。记得给这个盒子添加高度（高度和蓝粉色盒子一样） 在可视的盒子里需要放一个盒子，该盒子的宽度就是粉色蓝色盒子宽度的总和，其实也就是你需要动画部分宽度的两倍。然后需要给这个box一个相对定位 position: relative 粉色和蓝色盒子里放的是一样的东西，通过这样来达到视觉上无缝的效果。需要给这两个盒子加绝对定位 position: absolute 。我们就是通过改变它们lefft right 值来实现滚动
Animation 实现匀速旋转
sinat_39348382的博客
01-15 501
Unity 动画
css动画属性详解
weixin_68658847的博客
02-03 2748
css动画属性详解
用CSS3实现无限循环的无缝滚动的示例代码
12-02
【CSS3实现无限循环无缝滚动】在网页设计中，为了创建动态效果，有时我们需要让一些内容如新闻、公告等在页面上实现无限循环滚动。本文将详细介绍如何利用CSS3的特性来实现这一功能，尤其关注`transform`和`...
CSS3鼠标悬停按钮发光动画特效
06-24
在网页设计中，CSS3（Cascading Style Sheets 第三代）...通过结合使用这些特性，我们可以实现鼠标悬停按钮时的发光动画特效，提升网页的用户体验。在实际项目中，可以根据需求进行调整和定制，以达到最佳的视觉效果。
html5鼠标悬停图片动画展示效果
04-06
例如，当鼠标悬停在图片上时，图片可能会沿着一个路径移动，或者颜色会发生渐变，这都是通过CSS3动画实现的。`animation`属性同样包含了多个子属性，如`animation-name`（动画名称）、`animation-duration`（动画...
CSS3动画animation实现云彩向左滚动
01-19
实现的图像动画效果大致是这样的：云彩向左滚动！ 【代码效果】 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>CSS3动画animation实现漂浮的云&lt...
【鼠标移入暂停animation动画】
zzy442054的博客
01-20 962
鼠标移入暂停animation动画实现思路代码详解其他 实现思路 咱们能够利用鼠标的hover伪类实现动画的暂停css 代码 div:hover { animation-play-state:paused; } 详解 animation-play-state 的默认值是 running 其他 animation清除动画 div:hover { animation-duration: 0s; } ...
用 Animation 实现匀速旋转
纸箱猪的专栏
04-12 1万+
年初参加 GGJ 的时候，我曾想偷懒用 Animation 实现物体的匀速旋转。思路很简单，只需要0度和360（或-360）度两个关键帧，然后将动画设为循环播放。当时以为这样事情就成了。谁知做出来的效果是下面这样，物体转完一圈后会停一下：我知道问题就在动画曲线上：只要把曲线弄成一条直线就行。但是当时折腾了一会儿也没调出一条漂亮的直线，因此还是改用代码来实现匀速旋转。今天发现其实根本不用手调，只要右...
html 动画循环播放,CSS3 animation（动画） 属性
weixin_39763902的博客
06-07 5698
一、animation1.CSS3animation(动画)属性语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;实例：div{animation:mymove 5s infinite;-webkit-animation:mymove 5s infini...
动画函数（匀速与变速）
yyy_wj的博客
07-31 685
1、匀速动画函数 案例：移动元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding:...
animation 循环_强大的CSS动画：Transition与Animation
weixin_39806065的博客
11-25 2468
本文总结CSS3中两个用来做动画的属性，一个是transition，另一个是animation。差异比较CSS3差异transition在给定的持续时间内平滑地更改属性值(从一个值到另一个值)，也就是只需要指定开始与结束的参数，参数改变时就触发动画。常用语鼠标事件(:hover、active、:focus、:click)或键盘输入时触发需要事件触发，无法在网页加载时自动发生。一次性，不能重复发生，...
Animation组合动画踩坑-实现循环播放动画，可控制次数
tinyVampire的博客
07-15 2795
Animation组合动画踩坑-实现循环播放动画，可控制次数 比如说期望如下： 如果使用View动画，那么很自然的就想到了通过res/anim下的xml文件来实现，组合动画的话使用set标签即可。 直接这样做真的能生效么？且让我们一步一步实践。先提前剧透下，官网的demo也是有问题的。 赶时间只想看解决方式的同学，可以直接移步到最后一步的demo。 1、使用res/anim下的xml文件，实现组合动画顺序执行的坑。 动画的顺序执行是依靠的startOffset属性，它的值等于前面所有动画的duration
纯css 滚动动画轮播图 鼠标 移入暂停 移出继续
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
06-02 1149
【代码】纯css 滚动动画轮播图 鼠标 移入暂停 移出继续。
css实现一张长图横向无缝循环滚动
06-06
可以使用CSS3的动画特性实现一张长图横向无缝循环滚动，具体步骤如下： 1. 首先将图片包裹在一个容器内，设置容器的宽度为图片宽度的两倍，这样可以让图片循环滚动。 2. 使用CSS3的动画特性实现循环滚动效果，设置动画的名称、持续时间、循环次数等属性。 3. 利用关键帧（@keyframes）设置动画的具体细节，将图片从左侧移出容器，再从右侧移回容器，从而形成无缝循环滚动的效果。 以下是示例代码： HTML代码： ``` <div class="wrapper"> <img src="your-image.jpg"> </div> ``` CSS代码： ``` .wrapper { width: 200%; overflow: hidden; } img { animation: scroll 5s linear infinite; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } ``` 解释：在上述代码中，容器的宽度设置为200%，图片的动画名称为scroll，持续时间为5秒，循环次数为无限次。在关键帧中，图片从左侧移出容器（translateX(0)），再从右侧移回容器（translateX(-50%)），从而形成无缝循环滚动的效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值