百度360必应搜狗淘宝本站头条
vba高级教程svn连接scheduledtaskmybatis plus结构体数组
当前位置：网站首页 > 编程网 > 正文

CSS实现文本与图片无限滚动，犹如德芙般丝滑!

yuyutoo 2024-10-12 00:22 15 浏览 0 评论

将详细介绍如何使用 HTML 和 CSS 创建文本与图片的无限滚动动画效果。网页内容包含两个部分，一个是标签组滚动，另一个是图片组滚动，其中动画的效果主要表现为标签和图片一直横向的水平滚动，并且元素会无缝衔接从而实现无限循环，并且首尾两端有渐变蒙层效果，以造成出现和消失的过渡。


HTML 结构

首先，HTML 代码部分包含了5个.scroll元素，这个数量取决于你网页有几个无限滚动区域。每个scroll元素都放了两个div(d1和d2)用于创建滚动容器，其中每个div元素都具有相同的内容元素，用于展示滚动内容。本案例的主要内容就是标签组span和图片组img。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Infinite Scrolling Animation</title>

  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="scroll" style="--t: 20s">
    <div>
      <span>HTML</span>
      <span>CSS</span>
      <span>JavaScript</span>
      <span>Vue</span>
      <span>React</span>
      <span>Figma</span>
      <span>Photoshop</span>
    </div>

    <div>
      <span>HTML</span>
      <span>CSS</span>
      <span>JavaScript</span>
      <span>Vue</span>
      <span>React</span>
      <span>Figma</span>
      <span>Photoshop</span>
    </div>
  </div>

  <div class="scroll" style="--t: 30s">
    <!-- 同上 -->
  </div>

  <div class="scroll" style="--t: 10s">
    <!-- 同上 -->
  </div>

  <div class="scroll" style="--t: 35s">
    <!-- 同上 -->
  </div>

  <div class="scroll img-box" style="--t: 25s">
    <div>
      <img src="./images/img_01.jpg" alt="image">
      <img src="./images/img_02.jpg" alt="image">
      <img src="./images/img_03.jpg" alt="image">
      <img src="./images/img_04.jpg" alt="image">
      <img src="./images/img_05.jpg" alt="image">
      <img src="./images/img_06.jpg" alt="image">
      <img src="./images/img_07.jpg" alt="image">
      <img src="./images/img_08.jpg" alt="image">
      <img src="./images/img_09.jpg" alt="image">
    </div>

    <div>
      <!-- 同上 -->
    </div>
  </div>
</body>

</html>

标签组和图片组里的两个div要宽度保持一致，也就是说d1和d2里的每个标签span要对应相同，否则两个div就会出现滚动覆盖或距离过大。 还有就是每个scroll标签的自定义变量--t的值不一样(又快又慢)，要想滚动效果统一的话时间调整一样就可以了。

CSS 样式

接下来，看 CSS 部分设置了一些基本的全局样式，有重置样式、内容水平垂直居中布局、背景字体颜色等不做过多赘述。

/* @import url('https://fonts.googleapis.com/css?family=Poppins:400,600,700,800&display=swap'); */
@import './google-fonts.css';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  min-height: 100vh;
  background-color: #222;
  color: #fff;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  
}

/* ... */

滚动容器scroll有一个固定宽度，然后对于溢出的内容隐藏不可见，以及使用 mask-image 创建了一个线性渐变遮罩，给内容带来滚动时的淡出淡入视觉效果。

  • span元素标签的样式设置了内联块级元素的展示方式，以及一些边距、边框、字母间距和文本转换。此外，当鼠标悬停时，还设置了背景颜色的变化。
  • img图片的样式设置了最大宽度和灰度滤镜，当鼠标悬停在图片上时，滤镜会被移除，呈现出原始彩色图片。 两者都提供了一种交互反馈的效果。

.scroll {
  display: flex;
  width: 700px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
}

.scroll > div span {
  display: inline-block;
  margin: 10px;
  padding: 5px 10px;
  background-color: #333;
  border-radius: 5px;

  letter-spacing: 0.2em;
  text-transform: uppercase;

  cursor: pointer;
  transition: background-color 0.5s;
}
.scroll > div span:hover {
  background-color: #4caf50;
}

.img-box img {
  max-width: 150px;
  filter: grayscale(1);
  
  cursor: pointer;
  transition: filter 0.5s;
}
.img-box img:hover {
  filter: grayscale(0);
}

/* ... */

技术实现

接着就是每个滚动容器内包裹两个一样的div元素，用于创建无缝衔接，下面分别简称为d1和d2。通过 white-space: nowrap 属性确保 div 内的内容不换行，从而使得内容能够水平滚动。

主要通过两个不同的关键帧动画@keyframes关键帧和过渡animation属性控制两个滚动区域实现的滚动效果。让元素以无限循环和线性动画的方式在.scroll滚动容器内移动。拿本案列的img-box元素阐释一下动画执行过程：

  • 首先，它定义的CSS变量是--t: 25s。里面两个div元素都应用了25s匀速无限循环动画。
  • 然后，在d1中应用了延迟25s * -1 = -25s，animate动画从 transform: translateX(100%) 开始，将元素初始位置设置在容器的右侧外部。在动画结束时，元素移动到了容器的左侧外部，即 transform: translateX(-100%)。
  • 最后，在d2中应用了延迟25s / -2 = -12.5s，animate2动画从 transform: translateX(0) 开始，将元素初始位置设置在容器的右侧外部。在动画结束时，元素移动到了容器的左侧更远的位置，即 transform: translateX(-200%)。滚动的距离是比第一个d1滚动区域更远的，这样可以实现错开的滚动效果。

.scroll > div {
  white-space: nowrap;
  animation: animate var(--t) linear infinite;
  animation-delay: calc(var(--t) * -1);
}
@keyframes animate {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.scroll > div:nth-child(2) {
  animation: animate2 var(--t) linear infinite;
  animation-delay: calc(var(--t) / -2);
}
@keyframes animate2 {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-200%);
  }
}



@media screen and (max-width: 768px) {
  .scroll {
    width: 90vw;
  }

  .scroll > div span {
    background-color: #4caf50;
  }

  .img-box img {
    width: 33vw;
    filter: grayscale(0);
  }
}

由于animate延迟小于animate2，所以动画a2先执行，从右向左持续滚动到x: -200%，当滚动到-100%时也就是当前可见区域，此时a1开始执行动画 1 ，从右向左持续滚动到x: -100%，当滚动到100%时也就是当前可见区域，a2已经到-200%了，接着看a1继续滚动到-100%，a2继续从0到-200%，如此循环往复。

最后

通过本篇文章相信能够帮助你更好地使用CSS来创建一个文本与图片无限滚动动画，从而理解掌握和应用这个效果。通过 transform 属性的变化实现了水平滚动效果，使得 div 内的内容能够在容器内水平滚动，呈现出无限循环的连接效果。丰富了网页增添加了动态和交互性。


「绝无仅有」CSS打造吸睛的文本与图片无限滚动动画
原文链接：https://juejin.cn/post/7306442463765544971

相关推荐

从零搭建高可用的 MySQL 主从复制架构(基于 Linux 实战指南)

背景在生产环境中，单点MySQL数据库容易成为性能瓶颈或单点故障源。搭建MySQL主从复制架构，可以实现读写分离、高可用，提升系统的整体稳定性与扩展性。...

国外大神成功让Nexus4吃上安卓6.0:基本可正常使用

IT之家讯10月9日消息谷歌已经于10月6日正式开启了Nexus设备Android6.0Marshmallow系统的OTA升级推送。根据之前报道的消息，老一批的Nexus手机如Nexus4/Ne...

急死!CPU被挖矿了，却找不到哪个进程

CPU起飞了最近有朋友在群里反馈，自己服务器的CPU一直处于高占用状态，但用...

甜甜的安卓5.0却让手机ROOT难度大大增加

IT之家（www.ithome.com）：甜甜的安卓5.0却让手机ROOT难度大大增加对设备进行ROOT，毫无疑问，这是安卓最美丽的地方之一，不管是对于消费者来说还是开发者。Root意味着掌握更多的权...

Linux基础知识（linux基础知识点及答案）

系统目录结构/bin：命令和应用程序。/boot：这里存放的是启动Linux时使用的一些核心文件，包括一些连接文件以及镜像文件。/dev：dev是Device(设备)的缩写,该目录...

Linux 内核 6.15 发布:内存、网络、文件系统全面升级!

核心增强：性能与安全双飞升！Linux内核6.15的正式版！虽然因一个临门一脚的Bug晚了几小时，但最终还是带着一堆硬核更新闪亮登场！...

AlmaLinux 9.6 发布，新增功能亮点纷呈!

距离上一版本AlmaLinux9.5发布六个月后，基于5.14内核的AlmaLinux正式宣布其企业级Linux发行版的9.x系列第六个更新——AlmaLinux9.6（Sag...

理解Linux下的SELinux（linux seccomp）

理解Linux下的SELinux长久以来，每当遇到授权问题或者新安装的主机，我的第一反应是通过setenforce0命令禁用SELinux，来减少产生的权限问题，但是这并不是一个良好的习惯。这篇文章...

3个简单实用的网址导航网站（简洁的网站导航）

在我们使用电脑上网的时候经常会访问某些常用的网站，每一次都去通过搜索访问就比较浪费时间，添加在浏览器收藏夹不方便在其他电脑使用。找一个好用的网址导航网站就可以帮我们把所有常用的网址集合在一个页面，方便...

整点不一样的网站制作教程，教你怎么用网站模板制作网站#...

网站制作教程整点不一样的网站。不要再问我网站制作教程了，今天给你整个怎么用网站模板制作网站的教程。·1、登录账号进入后台。·2、选择模板。自助建站平台通常提供各种各样的网站模板，可以根据自己的需求和喜...

5个最好的外贸独立站模板，让你的网站更加专业

作为外贸行业从业者，一个专业且具有吸引力的网站是必不可少的。然而，建立一个专业的网站需要耗费大量的时间和精力，尤其是在设计和开发方面。为了帮助您缩短网站建设的时间和成本，以下是5个最好的外贸独立站模板...

网站建设模板 **网站建设模板:全面指南与创意构思*

网站建设模板**网站建设模板：全面指南与创意构思**随着互联网技术的迅猛发展，网站已成为企业、机构和个人展示自身形象、传递信息、实现交流的重要平台。本文将详细介绍网站建设的基本模板，并提供创意...

原地封神!一个只用套模板即可制作电子相册的网站

对于忙碌的年轻人来说，一键操作的模板意味着无需复杂的操作步骤，就能轻松制作出精美的电子相册。但是一个好的工具也是事关重要，最近发现了一款非常适合年轻人的模板---FLBOOK在线制作电子杂志平台，只需...

跨屏建站网kpfree免费网站模板2023.1.14发布更新

跨屏建站网kpfree免费网站模板2023.1.14发布更新，摒弃了之前的卡片式设计，采用了移动优先的设计原则，简化了页面设计风格，优化了代码，优化了图片质量，确保网页打开速度。砍掉了一些花哨而无用的...

响应式大型电子企业集团类网站模板源码-青柠资源网qnziyw.cn

模板信息：模板编号：10964模板编码：UTF8模板颜色：红色模板分类：科技、电子、数码设备适合行业：电子设备类企业模板介绍：本模板自带eyoucms内核，无需再下载eyou系统，原创设计、手工书写D...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表