html - 动画中的内容不完全 css-6ren

html - 动画中的内容不完全 css

转载作者：行者123 更新时间：2023-11-28 04:09:06

我正在使用前端，其中 html 页面包含一些内容，这些内容将显示为不推荐使用的选取框标记。所以我用css来实现这个。但是该区域中的每个长字符串都不会完整显示，而是根据屏幕显示字符串的一部分。

这是我的html代码，请提出解决方案。

<!DOCTYPE html>
<html>
    <head>
        <style style="type/css">
            .example1 {
                height: 50px;
                overflow:hidden;
                position:relative;
            }
            .example1 h3 {
                white-space: nowrap;
                text-overflow: ellipsis;
                position: inherit;
                width: 100%;
                height: 20px;
                margin: 0;
/*              line-height: 50px;
*/              text-align: center;
                /* Starting position */
                -moz-transform:translateX(100%);
                -webkit-transform:translateX(100%);  
                transform:translateX(100%);
                /* Apply animation to this element */  
                -moz-animation: 10s linear 0s infinite alternate none example1;
                -webkit-animation: 10s linear 0s infinite alternate none example1;
                animation: 10s linear 0s infinite alternate none example1;
            }
            /* Move it (define the animation) */
            @-moz-keyframes example1 {
                from { margin-left:-20%; }
                to { margin-left:100%; }
            }
            @-webkit-keyframes example1 {
                from { margin-left:-20%; }
                to { margin-left:100%; }
            }
            @keyframes example1 {
                0%   {  -moz-transform: translateX(100%); /* Firefox bug fix */
                        -webkit-transform: translateX(100%); /* Firefox bug fix */
                        transform: translateX(100%);         
                }
                100% {  -moz-transform: translateX(-100%); /* Firefox bug fix */
                        -webkit-transform: translateX(-100%); /* Firefox bug fix */
                        transform: translateX(-100%); 
                }
            }
        </style>
    </head>
    <body>
        <div class="example1">
            <h3>
                 Premium   400 ml  .. Molecule Brew 1600 ml .. Dark Roasted 1600 ml  .. Molecule Brew  400 ml .. Wheat Beer  1600ml    .. Premium 1600  ml  .. Dark Roasted 550 ml   .. Dark Roasted 400 ml   .. Wheat Beer 400 ml .. Wheat Beer 550 ml .. Jack Daniels Honey 360 ML .. Gentlemen's Jack 30 ML    .. Absolut Elyx 30 ML    .. Jack Daniels Honey 750 ML .. Gentlemen's Jack 360 ML   .. Absolut Elyx 360 ML   .. Ciroc 750 ML  .. Ciroc 360 MI  .. Belvedere 30Ml    .. Grey Goose 750 Ml .. Absolut Elyx 750 ML   .. Grey Goose 30 Ml  .. woodford reserve 30 Ml    .. Grey Goose 360Ml  .. Ciroc 30 Ml   .. Belvedere 750 Ml  .. Belvedere 360 Ml  .. woodford reserve 750  Ml  .. woodford reserve 360 Ml   .. SULA  Red BOTTLE  750 ML  .. Sula Red 150 ML   .. opera 150 ML  .. Woodbridge Red 750 ML .. Natana Cuvee Blanche 150 ML   .. Natana Cuvee Blanche 750 ML   .. Jacob Creek Chardonnay 150 ML .. opera 750 ML  . Jacob Creek Chardonnay 750 ML  Bottle .. Woodbridge Red 150 ML .. sangria white  Glass  .. sangria Red  pitcher  .. sangria white   pitcher   .. sangria Red  Glass    .. sula brut .. Jacobs Creek Brut .. Moet & chandon    .. sambuca 30 ml .. kahlua 30 ml  .. xenta absinthe 30 ml  .. campari 30 ml .. malibu 30 ml  . bailey's irish cream 30 ml    .. amaretto 30 ml    .. patron xo caf' 30 ml  .. Jagermeister 30 ml    .. calvados 30 ml    .. Glenmorangie original .. glenfiddich 12 yrs 30 ml  .. SINGLETON 10YRs   .. glenlivet 12 yrs 30 ml    .. glenlivet 15 yrs 30 ml    .. TALISKER 10YRS 30 ml  .. Glenlivet 12 yrs Bottle   .. Glenfiddich 12 yrs Bottlel    .. glenfiddich 18 yrs 30 ml  .. Aberlour 12 yrs 30 ml .. CARDHU 30 ml  .. Glenlivet 15 yrs Bottle   .. OBAN 14YRS 30 ml  .. glenfiddich 15 yrs 30 ml  .. Glenlivet 18 yrs Bottle   .. SINGLETON 10YRs Bottle    .. LAGAVULIN 16YRS 30 ml .. glenlivet 18 yrs 30 ml    .. Glenmorangie original Bottle  .. Glenfiddich 18 yrs Bottle .. OBAN 14YRS Bottle .. Glenfiddich 15 yrs Bottle .. LAGAVULIN 16YRS Bottle    .. CHASER    .. Tonic water   .. Canned juice  .. Sprite    .. Molecule Brew  550 ml .. Kingfisher Premium 330 ml .. Kingfisher Premium 6 pints    .. Kingfisher Premium 12 pints   .. Breezer 330 ml    .. Breezer 6 pints   .. kingfisher ultra 330 ml   .. Breezer 12 pints  .. Budweiser 330 ml  .. kingfisher ultra 6pints   .. kingfisher ultra 12 pints .. Budweiser 12 pints    .. Budweiser 6pints  .. Amstel light  6 pints .. corona extra 6 pints  .. corona extra 12 pints .. corona extra 330 ml   .. Amstel light 330 Ml   .. Hoeggarden 6 pints    .. Hoeggarden 330 Ml .. Hoeggarden 12 pints   .. stella artois 6 Pints .. Amstel light 12 pints .. stella artois 12 Pints    .. stella artois 330 ML  .. BP Reserve Collection 30 Ml   .. Old Monk 360 Ml   .. Smirnoff 30 Ml    .. Old Monk 750 Ml   .. Old Monk 30 Ml    . Blender's Pride 750 Ml    .. Blender's Pride 360 Ml    .. BP Reserve Collection 360 Ml  .. Blender's Pride 30 Ml .. BP Reserve Collection 750 Ml  .. Smirnoff 360 ML   .. Bacardi White rum 360 Ml  .. 100 pipers 360 ML .. Teacher's Highland 750 ML .. Black Dog 8 yrs 750  ML   .. Black Dog 8 yrs 360 ML    .. Smirnoff  750  Ml .. Teacher's Highland 30 ML  .. Bacardi White rum 750 ML  .. Bacardi White rum 30 Ml   .. William Lawson 360 ML .. Black Dog 8 yrs 30 ML .. William Lawson 750 ML .. Teacher's Highland 360 ML .. William Lawson 30 ML  .. 100 pipers 30 ML  .. Blackdog 12 yrs 30 ML .. 100 pipers 12 yrs 750 ML  .. 100 pipers 750 ML .. Blackdog 12 yrs 750 ML    .. Jim Beam 750 ML   .. Jim Beam 30 ML    .. Blackdog 12 yrs 360 ML    .. 100 pipers 12 yrs 30 ML   .. 100 pipers 12 yrs 360 ML  .. Jim Beam 360 ML   .. Ketel One 30 ML   .. Ketel One 360 ML  .. Ketel One 750 ML  .. Absolut 30  ML    .. Absolut 360  ML   .. J&B Rare 360 ML   .. J&B Rare 750 ML   .. JW Red label 750ML    .. BANTINES Finest750 ML .. Jameson 30 ml .. Absolut 750 ML    .. JW Red label 30 ML    .. JW Red label 360ML    .. J&B Rare 30 ML    .. Jameson 360 ml    .. BANTINES Finest30 ML  .. Jameson 750 ml    .. BANTINES Finst  360 ml    .. JW Black Label 30 ml  .. JW Black Label 360 ml .. JW Double Black 360 ML    .. JW Double Black 30 ML .. JW Black Label 750 ML .. Chivas Regal 12yrs 30 ML  .. Chivas Regal 12yrs 360 ML .. JW Double Black 750 ML    .. Jack Daniels Honey 30 ML  .. Chivas Regal 12yrs 750 ML .. Gentlemen's Jack 750 ML text..........................
            </h3>
        </div>
    </body>
</html>

最佳答案

您的文本很长，因此您必须使用更大的负值。我用文本缩进显示下面的内容。

http://codepen.io/hunzaboy/pen/aJLoQx

.example1 {
  height: 50px;
  overflow: hidden;
  position: relative;
}

.example1 h3 {
  white-space: nowrap;
  text-overflow: ellipsis;
  position: inherit;
  width: 100%;
  height: 20px;
  margin: 0;
  /*              line-height: 50px;
*/
  text-align: center;
  /* Starting position */
  animation: example1 120s linear alternate;
}


/* Move it (define the animation) */

@keyframes example1 {
  from {
    text-indent: 100%
  }
  to {
    text-indent: -2311%
  }
}

.example1 {
  height: 50px;
  overflow: hidden;
  position: relative;
}

.example1 h3 {
  white-space: nowrap;
  text-overflow: ellipsis;
  position: inherit;
  width: 100%;
  height: 20px;
  margin: 0;
  /*              line-height: 50px;
*/
  text-align: center;
  /* Starting position */
  animation: example1 150s linear alternate;
}


/* Move it (define the animation) */

@keyframes example1 {
  from {
    text-indent: 100%
  }
  to {
    text-indent: -2311%
  }
}

 <div class="example1">
            <h3>
                 Premium   400 ml  .. Molecule Brew 1600 ml .. Dark Roasted 1600 ml  .. Molecule Brew  400 ml .. Wheat Beer  1600ml    .. Premium 1600  ml  .. Dark Roasted 550 ml   .. Dark Roasted 400 ml   .. Wheat Beer 400 ml .. Wheat Beer 550 ml .. Jack Daniels Honey 360 ML .. Gentlemen's Jack 30 ML    .. Absolut Elyx 30 ML    .. Jack Daniels Honey 750 ML .. Gentlemen's Jack 360 ML   .. Absolut Elyx 360 ML   .. Ciroc 750 ML  .. Ciroc 360 MI  .. Belvedere 30Ml    .. Grey Goose 750 Ml .. Absolut Elyx 750 ML   .. Grey Goose 30 Ml  .. woodford reserve 30 Ml    .. Grey Goose 360Ml  .. Ciroc 30 Ml   .. Belvedere 750 Ml  .. Belvedere 360 Ml  .. woodford reserve 750  Ml  .. woodford reserve 360 Ml   .. SULA  Red BOTTLE  750 ML  .. Sula Red 150 ML   .. opera 150 ML  .. Woodbridge Red 750 ML .. Natana Cuvee Blanche 150 ML   .. Natana Cuvee Blanche 750 ML   .. Jacob Creek Chardonnay 150 ML .. opera 750 ML  . Jacob Creek Chardonnay 750 ML  Bottle .. Woodbridge Red 150 ML .. sangria white  Glass  .. sangria Red  pitcher  .. sangria white   pitcher   .. sangria Red  Glass    .. sula brut .. Jacobs Creek Brut .. Moet & chandon    .. sambuca 30 ml .. kahlua 30 ml  .. xenta absinthe 30 ml  .. campari 30 ml .. malibu 30 ml  . bailey's irish cream 30 ml    .. amaretto 30 ml    .. patron xo caf' 30 ml  .. Jagermeister 30 ml    .. calvados 30 ml    .. Glenmorangie original .. glenfiddich 12 yrs 30 ml  .. SINGLETON 10YRs   .. glenlivet 12 yrs 30 ml    .. glenlivet 15 yrs 30 ml    .. TALISKER 10YRS 30 ml  .. Glenlivet 12 yrs Bottle   .. Glenfiddich 12 yrs Bottlel    .. glenfiddich 18 yrs 30 ml  .. Aberlour 12 yrs 30 ml .. CARDHU 30 ml  .. Glenlivet 15 yrs Bottle   .. OBAN 14YRS 30 ml  .. glenfiddich 15 yrs 30 ml  .. Glenlivet 18 yrs Bottle   .. SINGLETON 10YRs Bottle    .. LAGAVULIN 16YRS 30 ml .. glenlivet 18 yrs 30 ml    .. Glenmorangie original Bottle  .. Glenfiddich 18 yrs Bottle .. OBAN 14YRS Bottle .. Glenfiddich 15 yrs Bottle .. LAGAVULIN 16YRS Bottle    .. CHASER    .. Tonic water   .. Canned juice  .. Sprite    .. Molecule Brew  550 ml .. Kingfisher Premium 330 ml .. Kingfisher Premium 6 pints    .. Kingfisher Premium 12 pints   .. Breezer 330 ml    .. Breezer 6 pints   .. kingfisher ultra 330 ml   .. Breezer 12 pints  .. Budweiser 330 ml  .. kingfisher ultra 6pints   .. kingfisher ultra 12 pints .. Budweiser 12 pints    .. Budweiser 6pints  .. Amstel light  6 pints .. corona extra 6 pints  .. corona extra 12 pints .. corona extra 330 ml   .. Amstel light 330 Ml   .. Hoeggarden 6 pints    .. Hoeggarden 330 Ml .. Hoeggarden 12 pints   .. stella artois 6 Pints .. Amstel light 12 pints .. stella artois 12 Pints    .. stella artois 330 ML  .. BP Reserve Collection 30 Ml   .. Old Monk 360 Ml   .. Smirnoff 30 Ml    .. Old Monk 750 Ml   .. Old Monk 30 Ml    . Blender's Pride 750 Ml    .. Blender's Pride 360 Ml    .. BP Reserve Collection 360 Ml  .. Blender's Pride 30 Ml .. BP Reserve Collection 750 Ml  .. Smirnoff 360 ML   .. Bacardi White rum 360 Ml  .. 100 pipers 360 ML .. Teacher's Highland 750 ML .. Black Dog 8 yrs 750  ML   .. Black Dog 8 yrs 360 ML    .. Smirnoff  750  Ml .. Teacher's Highland 30 ML  .. Bacardi White rum 750 ML  .. Bacardi White rum 30 Ml   .. William Lawson 360 ML .. Black Dog 8 yrs 30 ML .. William Lawson 750 ML .. Teacher's Highland 360 ML .. William Lawson 30 ML  .. 100 pipers 30 ML  .. Blackdog 12 yrs 30 ML .. 100 pipers 12 yrs 750 ML  .. 100 pipers 750 ML .. Blackdog 12 yrs 750 ML    .. Jim Beam 750 ML   .. Jim Beam 30 ML    .. Blackdog 12 yrs 360 ML    .. 100 pipers 12 yrs 30 ML   .. 100 pipers 12 yrs 360 ML  .. Jim Beam 360 ML   .. Ketel One 30 ML   .. Ketel One 360 ML  .. Ketel One 750 ML  .. Absolut 30  ML    .. Absolut 360  ML   .. J&B Rare 360 ML   .. J&B Rare 750 ML   .. JW Red label 750ML    .. BANTINES Finest750 ML .. Jameson 30 ml .. Absolut 750 ML    .. JW Red label 30 ML    .. JW Red label 360ML    .. J&B Rare 30 ML    .. Jameson 360 ml    .. BANTINES Finest30 ML  .. Jameson 750 ml    .. BANTINES Finst  360 ml    .. JW Black Label 30 ml  .. JW Black Label 360 ml .. JW Double Black 360 ML    .. JW Double Black 30 ML .. JW Black Label 750 ML .. Chivas Regal 12yrs 30 ML  .. Chivas Regal 12yrs 360 ML .. JW Double Black 750 ML    .. Jack Daniels Honey 30 ML  .. Chivas Regal 12yrs 750 ML .. Gentlemen's Jack 750 ML text..........................
            </h3>
        </div>

关于html - 动画中的内容不完全 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42807488/

文章推荐： c++ - Opus encode & decode 没有错误但不是相同的值

文章推荐： javascript - 在 Visual Studio Code typescript 调试中找不到源映射

文章推荐： c++ - 为什么在多文件中使用类声明友元函数时出现错误类未定义？

文章推荐： html - 减少html中垂直线和第二个字段之间的前导空间

java - 并行流看起来不像是并行工作，完全
1。 Set 的 parallelStream 没有使用足够的线程。 Java8 parallelStream 不能完全并行工作。在我的计算机中，当任务数小于处理器数时，java8 集的 parall
java - 完全 OR 的正则表达式包含
我想将位置发送到 Google Geocoding API，因此我想用 + 替换文本中的任何空格或逗号(因为可以接收)。例如，所有这些样本应返回 Glentworth+Ireland: Glentw
javascript - 如何(完全)复制文件但更改文件名？
所以我需要为将要上传的图像文件生成较小的预览，并且我必须在每个文件名的末尾附加“_preview”。目前我正在这样做: uploadFile.map((file) => { if (fi
haskell - 为什么您不能(完全)应用具有使用其他类型同义词的参数的类型同义词？
我们可以用参数定义类型同义词，这在与实际类型一起使用时效果很好: type MyType t = t String String data Test a b = Test a b f :: MyTyp
delphi - 需要计算哪些像素是(完全)透明的
给定一个包含一些 TGraphic 后代的 Delphi TPicture，我需要计算像素颜色和不透明度。我认为我必须为每个类提供不同的实现，并且我认为我已经涵盖了 TPngImage。 32 位位图
.net - Powershell 卸载模块...完全
我正在调试 Powershell 项目。我正在使用 Import-Module 从我的 C# dll 加载 PS 模块，一切正常。尽管调用 Remove-Module 并不会完全卸载模块，因为 DLL
elasticsearch - ElasticSearch中的半完全(完全)匹配
有没有办法在ElasticSearch中要求完整(尽管不一定精确)匹配？例如，如果一个字段具有术语"I am a little teapot short and stout"，我想匹配" i am
sql - 根据年份是否(完全)包含在日期范围内进行匹配
我正在尝试根据日期范围连接两个表。表A格式为: ID CAT DATE_START DATE_END 1 10 2018-01-01 2020-12-31 2
ASP.NET - 信任级别 = 完全？
我最近加入了一家公司，在分析他们的环境时，我注意到 SharePoint web.config 的信任级别设置为“完全”。我知道这绝对是一个糟糕的做法，并且希望 stackoverflow 社区能够帮
ajax - 完全 Ajax 应用程序的基于内容的广告
我构建了一个完全依赖 AJAX 的 php/js 应用程序，因此没有任何内容是静态的。我正在尝试找到一种方法来转换基于内容的广告，该广告使用 AJAX 交付的内容作为关键字。 Google 的 Ad
sql - 根据年份是否(完全)包含在日期范围内进行匹配
我正在尝试根据日期范围连接两个表。表A格式为: ID CAT DATE_START DATE_END 1 10 2018-01-01 2020-12-31 2
c# - 如何判断文件是否已*完全*写入
我熟悉 FileSystemWatcher 类，并使用它进行了测试，或者我使用快速循环进行了测试，并在目录中列出了类型文件的目录列表。在这种特殊情况下，它们是 zip 压缩的 SDF 文件，我需要解压
javascript - Disqus 评论框不显示(完全)
按照 Disqus 上的教程进行操作时，评论框不会呈现。从 disqus 上找到的管理员看来，它的设置似乎是正确的。 var disqus_config = function () { this
python - 完全 Cython 化的应用程序
是否可以使用 Cython 将 Python 3 应用程序完全编译/链接为可执行格式(当然假设所有使用的模块都是 cythonable)。我在 Linux 下工作，我希望获得一个依赖性尽可能小的 E
c# - 隐藏控制台应用程序的控制台(完全)，但只是有时
我有一个 C# 控制台应用程序，而不是运行预构建步骤(以获取 NuGet 包)。当我调试这个时，我想传入一个参数并显示控制台。当我不调试它时，我不想看到它。我什至不希望它在那里闪烁一秒钟。我找到了
algorithm - 完全 K 叉树
我在 n 个节点上有一个完整的 19 元树。我标记所有具有以下属性的节点，即它们的所有非根祖先都是最年长或最小的 child (包括根)。我必须为标记节点的数量给出一个渐近界限。我注意到第一层有一
java - 完全 volatile 可见性保证
我正在阅读一篇关于 Java Volatile 关键字的文章，遇到了一些问题。 click here public class MyClass { private int years;
algorithm - NP 完全 - 在非确定性多项式时间内可解
一本书中写道——“如果问题 A 是 NP-Complete，则存在解决 A 的非确定性多项式时间算法”。但据我所知，"is"——NP 完全问题的答案可以在多项式时间内“验证”。我真的很困惑。能否使用非
algorithm - 子集推理 NP 完全？
考虑以下问题: 有N个硬币，编号为1到N。你看不到它们，但是给出了关于它们的 M 个事实，形式如下: struct Fact { set positions int num_head
c++ - 如何使用户定义的类型像内置类型一样*完全*地初始化？
我想制作一个包装数字类型的类型(并提供额外的功能)。此外，我需要数字和包装器可以隐式转换彼此。到目前为止我有: template struct Wrapper { T value;

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 动画中的内容不完全 css