程序员经验分享-hwhale

为什么这个 css 动画无限自动播放轮播会在项目重置时跳转？

2024-04-20

我正在努力根据此处的示例创建无限自动播放轮播：https://codepen.io/jackoliver/pen/qVbQqW https://codepen.io/jackoliver/pen/qVbQqW

请注意 codepen 示例是多么流畅，当轮播从最后一项重置到第一项时，它永远不会跳转。

我的不太顺利 - 我的在重置时跳跃，我不明白为什么......

body {
  align-items: center;
  background: #E3E3E3;
  display: flex;
  height: 100vh;
  justify-content: center;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-456px * 2));
  }
}
.quotes-famous {
  background: white;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  height: 500px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 960px;
}
.quotes-famous::before, .quotes-famous::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 500px;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.quotes-famous::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.quotes-famous::before {
  left: 0;
  top: 0;
}

.quotes-famous__track {
  animation: scroll 1s linear infinite;
  display: flex;
  width: calc(456px * 4);
}

.quotes-famous__quote {
  background: #efefef;
  height: 500px;
  width: 456px;
}
<div class="quotes-famous">
   <div class="quotes-famous__track">
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Quisque at lorem sollicitudin, elementum justo a, dictum tortor. Donec dapibus elementum augue, in imperdiet lorem posuere nec. Sed scelerisque scelerisque imperdiet. </p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</p>
      </div>
  </div>
</div>

codepen 示例将所有图像（或您的情况下的引号）加倍。

body {
  align-items: center;
  background: #E3E3E3;
  display: flex;
  height: 100vh;
  justify-content: center;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-456px * 2));
  }
}
.quotes-famous {
  background: white;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  height: 500px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 960px;
}
.quotes-famous::before, .quotes-famous::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 500px;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.quotes-famous::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.quotes-famous::before {
  left: 0;
  top: 0;
}

.quotes-famous__track {
  animation: scroll 4s linear infinite;
  display: flex;
  width: calc(456px * 4);
}

.quotes-famous__quote {
  background: #efefef;
  height: 500px;
  width: 456px;
}
<div class="quotes-famous">
   <div class="quotes-famous__track">
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Quisque at lorem sollicitudin, elementum justo a, dictum tortor. Donec dapibus elementum augue, in imperdiet lorem posuere nec. Sed scelerisque scelerisque imperdiet. </p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Quisque at lorem sollicitudin, elementum justo a, dictum tortor. Donec dapibus elementum augue, in imperdiet lorem posuere nec. Sed scelerisque scelerisque imperdiet. </p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Phasellus dictum leo enim, a dignissim erat vestibulum at. Sed vitae libero id mauris ullamcorper elementum. Praesent at accumsan ipsum. Quisque sit amet posuere mauris. Proin ac vulputate odio, quis faucibus sem. Cras nec consectetur neque.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Sed sagittis ligula ut est faucibus egestas.</p>
      </div>
      <div class="quotes-famous__quote">
         <p class="quotes-famous__text">Fusce convallis, risus et luctus tempus, urna orci accumsan tortor, accumsan euismod arcu lectus vitae neque. Nulla tincidunt, augue non efficitur euismod, nunc diam feugiat turpis, convallis lacinia velit enim et nisl. Sed at suscipit augue. Curabitur sed dolor metus. Nunc augue eros, aliquet sed mi ac, pulvinar fermentum mauris. Cras condimentum sapien tellus, nec efficitur odio imperdiet vitae.</p>
      </div>
  </div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

cssanimations

为什么这个 css 动画无限自动播放轮播会在项目重置时跳转？ 的相关文章

  • 在 HTML 页面中显示代码片段

    就像 stackoverflow 的 WYSIWYG 文本编辑器中有一个代码示例插入器一样 参见此处的图片 http img72 imageshack us img72 8241 codesample png 我想要这样的格式化程序在 ht

  • 使用 C# 网页浏览器单击 Javascript 按钮

    我需要让一个程序在网络浏览器中为我点击一个 javascript 按钮 这有可能吗 我想用 C 来完成这个 按钮 INPUT id str class text style TEXT ALIGN center maxLength 4 siz

  • Contenteditable 显示最后插入的 html 元素

    我使用 contenteditable div 作为输入字段来输入一些文本 并通过该文本中的按钮 小 html 图片 插入图标 只要文本比 contenteditable 字段窄 就可以了 一旦文本比字段长 因此它被部分隐藏 当我输入文本字

  • 将图像从 JQuery 上传到 Node JS

    我需要从我的网站上传图像文件HTML页 但是 我不会使用form标签 因为还有其他form稍后将用于将数据传递到服务器的字段 文本字段 复选框等 我的后端在Node JS 我想要的只是从Node Js结尾 我怎样才能做到这一点 HTML d

  • 如何动态更改表格单元格文本颜色？

    我需要一个解决方案来通过 javascript 动态更改表格单元格的文本颜色 文本可以是以下颜色 蓝色 绿色 红色和黑色 表示例

  • CSS - 当 Margin-Top 存在时，Margin-Bottom 被忽略

    我有一个场景 我有多个 DIV 与 margin top 和 margin bottom 堆叠在一起 但我发现当我有 margin top 时 margin bottom 被忽略 我无法解释这是如何发生的 html div class bo

  • 如何在IE8及以下浏览器中应用边框半径？

    我想知道如何将 border radius 应用于 IE8 及以下 IE8 浏览器 我知道 border radius 是 HTML5 的一项功能 而 IE8 不支持它 我发现通过使用 htc 我们可以实现这一点 但是通过使用 htc 我遇

  • 同位素 Jquery 插件布局问题

    我正在尝试在此站点上设置同位素 它需要处理布局 并且我需要能够将项目附加到容器中 问题是它似乎没有正确初始化图像 这是我初始化它的方法 document ready function var container container cont

  • 无需 JavaScript 的图像翻转

    我试图找到一种不使用 javascript 的方法 该方法允许您将鼠标悬停在较小的 div 或图像 上来更改较大 div 的背景 纯粹使用 HTML 和 CSS 可以吗 该示例有 2 个问题 1 仅滚动其中一个 div 有效 因为它紧随其后

  • 如何在 HTML/CSS 中进行制表符停止

    我想用 HTML 呈现一些文本的格式 这是一张图片 请注意带有项目符号点和段落编号的灰线 项目符号应位于页面中央 并且数字应正确对齐 我一直在尝试思考如何在 HTML 中做到这一点 但一无所获 您将如何捕获这种格式 您可以使用 before

  • WebSQL DB 会与 Chrome 的应用程序同步吗？

    我正在为 Chrome 构建一个打包应用程序 我目前正在使用 WebSQL 来存储 检索数据 如果我选择在 Chrome 中同步应用程序 我在一台计算机上输入的数据会显示在另一台计算机上吗 例如 在我的桌面上 我打开应用程序并添加一条记录

  • -moz-background-clip:text 在 Firefox 中不起作用

    我正在尝试用图像填充 h1 标签中的文本内容 根据我的理解 我在 html 中执行以下操作 div class image clip h1 MY WONDERFULL TEXT h1 div 并在 css 文件中 image clip ba

  • 有没有办法在 Blazor 中隐藏 div？

    我正在使用 Blazor 并且想在按下导航栏切换器图标时隐藏侧边栏 列表项崩溃了 但问题是 div 仍然存在 div class page div class sidebar div class nav top row pl 4 navba

  • Bootstrap 中的垂直菜单

    有没有办法使用任何引导类来创建垂直菜单 不是下拉菜单 侧边栏上完全独立的垂直菜单 我可以使用我的 css 创建一个 但只是想知道引导程序中是否有任何内置类 或者可以使用顶部栏通过任何 hack 来完成吗 这个问题现在已经很老了 但如果有人看

  • 如何从对象 URL 获取文件或 blob？

    我允许用户通过拖放和其他方法将图像加载到页面中 当图像被删除时 我正在使用URL createObjectURL转换为对象 URL 以显示图像 我不会撤销该网址 因为我会重复使用它 所以 当需要创建一个FormData对象 以便我可以允许他

  • Bootstrap 4.1.1 form-check form-check-inline 单选按钮

    我正在尝试将单选按钮显示为内联选项 在 Bootstrap 4 1 1 文档中 示例代码是 div class form check form check inline div

  • 如何让 AppBar 组件填充所有 div 的宽度和高度的 10%？

    class MyStupidComponent extends React Component render return div div div div

  • Codeigniter 中的 HTML 格式的电子邮件

    如何在 codeigniter 中发送格式化的电子邮件 我有这段代码 可以很好地发送电子邮件 但它没有按应有的方式格式化它 您可以看到显示收到电子邮件的图片 function email sender this gt load gt hel

  • 使用 Azure Bot Framework Web 聊天无法单击电话号码

    Setup 我使用以下命令创建了一个 Azure QnA Web 聊天机器人QnAMaker https www qnamaker ai Azure 机器人服务 https azure microsoft com en us service

  • css Flex div 随着子文本区域的增长而增长（无jquery）[重复]

    这个问题在这里已经有答案了 想象一下我有以下内容 div padding 20px div style display flex background gold div

随机推荐

  • Django：如何计算浏览的人数

    我正在 Django 中制作一个简单的 BBS 应用程序 我希望每当有人看到帖子时 该帖子的浏览量 post view no 就会增加 目前我面临两个困难 我需要限制 post view no 的增加 以便一个用户只能增加一次 无论用户刷新

  • 使用 Rails 动态构建 RESTful 路由

    我正在尝试编写一个辅助方法 该方法接受复数资源的名称并返回相应的链接 该方法的本质是 def get link resource link to resource capitalize resource path end 显然resourc

  • Django CMS 多级下拉菜单

    我对 Django CMS 有点陌生 我尽力避免询问 但这让我发疯 我制作了一个带有主题和类别模型的 Wiki 应用程序 我将它连接到我的 CMS 上的一个站点并将其添加到我的菜单中 现在我希望能够在我的菜单上显示所有顶级类别 其子类别和主

  • 类型错误：Object(...) 不是 Vue 中的函数

    我是 Vue 新手 正在尝试处理表单 我正在制作一个网络应用程序来管理会议 为此我有一个多步骤表单来处理访客和主持人数据 当我单击提交按钮时 出现以下错误 TypeError Object is not a function 我在 stac

  • Nginx：从不同的根目录和位置提供 JPG 图像

    我有 3 个不同的存储区域 头像 文章 趋势 用于存储我的图像 我想将 URL trends 123 jpg 链接 到趋势文件夹 avatars 23 jpg 链接 到头像等 配置一 server listen 8089 server na

  • 使用偏移时导航栏项目可点击区域被剪切

    在 SwiftUI 中 考虑这个导航栏 这是尾随的方式 navigationBarItems宣布 HStack spacing 0 Button action self addListModal true label NavBarImage

  • Python - 对包含字符串和数字的列表中的数字值进行排序

    我创建了一个列表 其中包含 python 中分数文件的所有信息 分数 txt 文件 Dan Danson 9 6 1 John Johnson 5 7 10 Mike Mikeson 10 7 6 我这样做是为了将 txt 文件中的信息获取

  • ruby splat 运算符在多重赋值期间到底如何获取数组的第一个和其余部分？

    在 ruby 中 可以将多重赋值与 splat 运算符结合起来 以模拟函数式语言中的first 和rest 或head 和tail first rest 1 2 3 4 first output 1 rest output 2 3 4 sp

  • 有人使用 ASP .NET 会员资格吗？

    想知道是否有人使用 ASP NET 会员资格 如果你这样做 请告诉我你的想法 如果您不使用它 您打算在未来的项目中使用它吗 如果没有 为什么 RWendi 是的 已经用过很多次了 它会为你节省很多工作 客户经常会要求更改用户名和管理密码重置

  • 如何使用适用于 C 和 C++ 的 GSOAP 访问 Amazon AWS S3？

    我到处搜索这个 但找不到一个合适的代码 我怎样才能访问亚马逊 AWS S3 http aws amazon com s3 服务使用GSOAP http gsoap2 sourceforge net 下面的代码来自OP 最初 该帖子包含问题和

  • VS 2012 扩展中的标准控件

    我目前正在更改公司内部的 VS 扩展以支持 Visual Studio 2012 我正在努力解决的是如何使 UI 动态适应活动的 VS 主题 我找到了几个颜色 画笔的资源键 Microsoft VisualStudio Shell 11 0

  • Google Freebase API 如何获取图像的 URL？

    所以 我试图弄清楚如何获取 Freebase 数据库中图像的 URL 我想要一张旧金山的照片 这就是我获取旧金山主题的方式 https www googleapis com freebase v1sandbox topic 2Fen 2Fs

  • 编译具有多个参数的案例类会导致 java.lang.StackOverflowError

    我有以下带有大量参数 150 的案例类 在使用 sbt 版本 0 14 编译期间导致 java lang StackOverflowError 异常 类定义 case class TestClass Param1 String Param2

  • 通过 url 将整数传递给 php $_GET

    所以我正在做一些 CTF 挑战之一是关于 php 类型杂耍 代码看起来像这样 if GET var1 hash md4 GET var1 print flag 所以我 80 确定我需要传入一个整数 这样它就会是真的 但我能操作的只是 url

  • jQuery Uncaught TypeError 与 Theme Punch Revolution Slider

    我遇到了一个无法追踪的问题 我正在使用革命滑块 http themes themepunch com theme revolution jq我不断收到 jQuery 错误 Uncaught TypeError Cannot read pro

  • WordPress REST API - 允许任何人发帖

    我正在 WordPress 上构建一个应用程序 它需要一个简单的前端表单 任何人都可以提交需要保存在数据库中的信息 我正在尝试通过 REST API 来处理这个问题 由于应用程序的性质 提交此信息时不能进行任何页面重定向 我可以毫无问题地设

  • LinqDataSource：过滤并绑定到gridview

    问题没有按照我想要的方式解决 但我继续感谢 ukaszW pl 他的时间和努力 我正在使用 gridview 控件和 linqdatasource 它一切正常 我添加了 searchBySubject 的功能 并且添加了WhereParam

  • 如何将“旧的 spring mvc 控制器与 jsp”和“vaadin7 ui”集成在一起

    我正在尝试将 vaadin 与我的 spring mvc 应用程序集成 我有一些带有 jsp 文件的 url spring mvc 控制器使用它们 例如 mysite com spring mysite com spring example

  • Zend 引擎可以嵌入 PHP 之外吗？

    如果我记得的话 Zend 引擎的原始设计之一是它相对容易嵌入人们可能希望创建的其他语言 基本上 PHP 语法没有所有 PHP 模块 现在还是这样吗 嗯 Zend 引擎基本上是一个解释 PHP 字节码的虚拟机 基本上 您要做的就是为一种语言和

  • 为什么这个 css 动画无限自动播放轮播会在项目重置时跳转？

    我正在努力根据此处的示例创建无限自动播放轮播 https codepen io jackoliver pen qVbQqW https codepen io jackoliver pen qVbQqW 请注意 codepen 示例是多么流畅

热门标签