首页 > 其他分享 >css让图片自动滚动

css让图片自动滚动

时间:2023-07-07 13:47:00浏览次数:31  
标签:滚动 滚动条 自动 CSS 设置 scroll css 图片

转自于:https://www.yzktw.com.cn/post/1051445.html

CSS让图片自动滚动是一种非常实用的功能,它可以让网站的页面更加动态和生动。实现这个功能的方法也非常简单,只需要使用CSS中的滚动条属性即可。

/* 将所有图片都放在一个div内 */
.scroll {
overflow: auto; /* 设置滚动条 */
white-space: nowrap; /* 将所有内容在一行内显示 */
}

以上代码中,我们设置了一个名为.scroll的class,将所有的图片都放在了一个

标签内。然后,我们使用CSS的overflow和white-space属性来设置滚动条的样式以及将所有内容都在一行内显示。

 

这样,所有的图片就会自动按照一定的速度在网页上滚动显示了。如果想要调整滚动条的速度,可以使用CSS中的animation属性来实现。

.scroll img {
animation: scroll 10s linear infinite; /* 设置动画 */
}
/* 定义动画 */
@keyframes scroll {
from {
transform: translateX(0); /* 初始位置 */
}
to {
transform: translateX(-100%); /* 结束位置 */
}
} 
以上代码中,我们设置了一个animation属性,用来实现滚动条的动画效果。通过设置from和to两个关键帧,我们将图片从初始位置滚动到结束位置,而linear关键字则表示滚动速度是匀速的。

 通过这些方法,我们可以很容易地实现一个图片自动滚动的效果,并且还可以根据自己的需求来调整滚动速度和样式。

标签:滚动,滚动条,自动,CSS,设置,scroll,css,图片
From: https://www.cnblogs.com/Ao-min/p/17534728.html

相关文章

  • 实现图片平铺可左右切换也可自动滚动的效果
    <!DOCTYPEhtml><htmllang="en"> <head> <metacharset="utf-8"/> <title>Swiperdemo</title> <metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale......
  • 灯光控制器——使用TPT进行测试自动化的标准示例
    在PikeTec,我们有一个示例来展示我们的测试自动化工具TPT:灯光控制器。 这些信息正在等着你: 为什么是这样一个简单的例子?灯控制器演示模型的主要功能灯控制器演示模型的接口灯控制器演示模型的行为特殊情况-更改为自动模式特殊情况-在自动模式下改变光强不同的实现......
  • 在CSS中创建一个遮罩层并阻止点击穿透的常见方案
    使用position:fixed和z-index:创建一个具有全屏尺寸的<div>元素,并将其设置为position:fixed,top:0,left:0,width:100%,height:100%,然后使用z-index将其放在其他元素之上。通过设置透明度、背景颜色或使用其他视觉效果,可以实现遮罩层的效果。这样的遮罩层将位于所有其他......
  • 2023ACM暑假训练day 9 后缀自动机SAM
    目录DAY9后缀自动机SAM训练情况简介题DAY9后缀自动机SAM训练情况简介2023-07-0709:20:38星期五题题意:思路:......
  • 后缀自动机SAM
    目录后缀自动机例题相关资料后缀自动机例题相关资料......
  • CSS基础知识(未完待续)
    前言:从本篇开始记录css的一些基础知识,但不会涉及css3,以后会单独学习记录。1.CSS简介html只关注了内容的语义,但并没有注意具体布局的美化以及样式,如果用html去设置的话,就会显得十分臃肿,这时候就需要css来进行设置了。CSS是层叠样式表的简称,有时候我们也会称之为css样式表或者......
  • 基于Aidlux的自动驾驶之智能预警部署
    YOLOP能同时处理目标检测、可行驶区域分割、车道线检测三个视觉感知任务,并速度优异、保持较好精度进行工作,代码开源。它是华中科技大学---王兴刚团队,在全景驾驶感知方面提出的模型。这是实操视频:https://www.bilibili.com/video/BV1LX4y1i7mi/?vd_source=4b36e62d12ccafa4305abaa......
  • CSS学习笔记3-CSS元素定位
    1标准流布局1.1认识定位属性......
  • Element Plus 实现Icon图标的自动导入
    ElementPlus官方文档对于Icon图标的自动导入,言之甚少。故博主来写篇文章总结一下,如何正确使用unplugin-icons和unplugin-auto-import从iconify中自动导入图标。1.安装依赖npmi-Dunplugin-iconsunplugin-auto-importPS:如果你之前配置ElementPlus组件为“按需......
  • 基于Jenkins+Gitee实现SpringBoot项目自动化部署(Docker版)
    前言:上一篇笔记:基于Jenkins+Gitee实现SpringBoot项目自动化部署(非Docker版)。本篇笔记介绍一下Docker版本的Jenkins如何实现项目自动化部署。本案例基于Linux CentOS7服务器,防火墙开放8080端口(Jenkins使用),80端口(项目使用),云服务器直接在控制台配置安全规则即可。1......