Shopify模版定制: 纯CSS和Liquid实现响应式无缝跑马灯

原创

已于 2023-04-05 15:32:47 修改 · 1.3k 阅读

标签

#liquid #Shopify #Shopify二次开发 #Shopify模版定制

收录于

于 2023-03-30 00:11:28 首次发布

概要

使用纯CSS来解决各种效果是各前端工程师最喜爱的方式。本题将介绍如何使用纯CSS和Liquid实现响应式无缝衔接跑马灯。下面将分为通过纯CSS和HTML实现无缝跑马灯和使用 Liquid 和 CSS 实现响应式跑马灯两个步骤来实现这一功能

效果

纯CSS和Liquid实现响应式无缝跑马灯

纯CSS + HTML 实现无缝跑马灯

1、HTML 代码结构

要实现无缝，我们需要复制出文案结构放在后面

代码

HTML

<div class="marquee__wrapper">
  <div class="marquee">
    <div class="marquee__content">
      <p>温柔的晚风，傍晚的晚霞，冒泡的可乐，人间的美好多着呢，你要相信你配得上世间所有的温柔。</p>
      <p>温柔的晚风，傍晚的晚霞，冒泡的可乐，人间的美好多着呢，你要相信你配得上世间所有的温柔。</p>
    </div>
  </div>
</div>