如何为我的电子商务商店模仿这种旋转文本动画？

Posted 2023-02-21

【中文标题】如何为我的电子商务商店模仿这种旋转文本动画？

【英文标题】：How can I mimic this revolving text animation for my e-commerce store?

【发布时间】：2022-01-20 18:49:46

【问题描述】：

我想使用 Janji.com 主页（Shopify 商店）上的文字动画，靠近页脚上方的底部。

文字说： 为您的 [ 旅程 ] 做好准备。

而“旅程”是一个在其他几个词之间循环的列表项。

我无法以与此类似的方式在线查找如何执行此操作。理想情况下，它会是 javascript 或比将一百行 CSS 复制粘贴到我的商店更轻的东西。有什么我不知道的图书馆吗？

【参考方案1】：

.prop-wrapper.vert-scroll 
    color: #0064a5;
    font-size: 2.5em;
    font-weight: 700;
    padding: 3%;

.tickerv-wrap 
    background: 0 0;
    box-sizing: content-box;
    height: 55px;
    overflow: hidden;
    padding: 0;
    margin-bottom: 12.5px;
    display: inline-block;
    vertical-align: middle;

.tickerv-wrap ul 
    padding: 0;
    margin: 0;
    list-style-type: none;
    animation-name: tickerv;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(1,0,0.5,0);

.tickerv-wrap ul li 
    font-size: 1em;
    line-height: 50px;
    color: #0064a5;
    font-weight: 700;
    margin: 0 0;

@keyframes tickerv
0%margin-top:025%margin-top:-50px50%margin-top:-100px75%margin-top:-150px100%margin-top:0.tickerv-wrap ulpadding:0;margin:0;list-style-type:none;animation-name:tickerv;animation-duration:10s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(1,0,0.5,0).tickerv-wrap ul:hoveranimation-play-state:paused

After checking the code on the website, 
I found this done using the CSS code and you can use the bellow code and implement it on any website.
<div class="prop-wrapper vert-scroll" style="max-width: 1500px; margin:auto;">
  Equipping you for the [
  <div class="tickerv-wrap"><ul>
  <li>path</li>
  <li>trail</li>
  <li>road</li>
  <li>journey</li>
</ul></div>
  ] ahead
</div>