带有 Tailwind CSS 的动画条/文本并做出反应

Question

任何人都可以帮我弄清楚如何使用react和tailwind css制作本网站https://worldofwomen.art/中使用的2个动画

第一：这张图片的动画条

第二个：动画文本： • 新网站即将推出

我期待有人的帮助，我真的通过了整个晚上在 react 和 tailwind css 中搜索动画，但我没有找到任何关于此的教程。

非常感谢您对我的问题的帮助和阻止

Answer 1

你可以通过使用'animation' css属性只用css（即Tailwindcss）来实现动画

I- 使用以下命令创建一个 nextjs 项目：$npx create-next-app my-app

II- 使用 nextjs 项目设置 tailwindcss：https://tailwindcss.com/docs/guides/nextjs

III- 在 pages/ 文件夹内创建新的 React 组件 animation.js

import React from 'react'
export default function Animation2() {
  return (
    <>
      {/* Image Animation */}
      <div className="animate">
          <img src="/frise-2.2f579f.png" alt="" />
          <img src="/frise-2.2f579f.png" alt="" />
      </div>

      {/* Image Animation - Reversed direction */}
      <div className="animate-reversed">
          <img src="/frise-2.2f579f.png" alt="" />
          <img src="/frise-2.2f579f.png" alt="" />
      </div>
  
      {/* Text Animation */}
      <div className="bg-[#332970] w-screen box-border  p-4 flex items-center overflow-hidden fixed bottom-0">
        <div className="animate">
          {
            [0,1,2,3,4,5,6,7,8,9,10,11].map((i) => (
              <div className="text-[#139bac] whitespace-nowrap inline-flex items-center justify-center">• NEW SITE LAUNCHING SOON&nbsp;</div>
            ))
          }
        </div>
      </div>
      
    </>
  );
}

1. 第一个 div 负责图像的动画，默认方向是从右到左。我使用了 2 个 img 标签，因为它必须有 2 组不同的相同 img 标签。因为在无限循环中，当一个图像消失时，第二个图像会出现，它将重新开始循环，没有任何间隙（您可以评论第二个 img 标签以检查我正在谈论的间隙）

2. 第二个 div 类似于第一个，但它具有反向属性。

3. 对于文本动画，我们做同样的事情，我们必须多次创建文本以避免在为文本设置动画以进行无限循环时出现间隙。为了避免同一标签出现多行： • NEW SITE LAUNCHING SOON 我包装在一个数组中并循环遍历它

4. 所有样式都使用tailwindcss集成在同一个组件中，除了将添加到globals.css文件中的动画，如下所示：

进入 globals.css 文件并添加动画 css 代码：

@tailwind base;
@tailwind components;
@tailwind utilities;


@layer components {
  .animate{
    display: flex;
    animation: scroll 20s linear infinite;
  }
  .animate:hover{
    animation-play-state: paused;
  }

  .animate-reversed{
    display: flex;
    animation: scroll 20s linear infinite;
    animation-direction: reverse;
  }
  .animate-reversed:hover{
    animation-play-state: paused;
  }

  @keyframes scroll {
    0%{

      transform: translateX(0);
    }
    100%{

      transform: translate(-50%);
    }
  }

}

Answer 2

有几种方法可以做到这一点，但考虑到您引用的网站，我注意到它以无限增量工作，因此很可能使用 JS 完成。

PS.：我可以用 javascript 做任何事情。

const sleed1 = document.getElementById("sleed1");

let position1 = 0;

setInterval(() => {
  position1 = position1 + 10;
  sleed1.style.backgroundPosition = position1 + 'px';
  sleed1.style.transitionDuration = '100ms';
}, 40)

#sleed1 {
  width: 100%;
  height: 200px;
  background-color: #ccc;
  background-image: url("https://i.stack.imgur.com/zJXIx.png");
}

<div id="sleed1" />

要控制速度，您可以更改 3 个值：

1. 像素数增加了，我放了 10 个。
2. 过渡的持续时间，我输入了“100ms”。
3. setInterval 间隔，我放了40。

两者都会影响速度，但方式不同，因此请进行调整，直到找到最适合您的解决方案。

要改变雪橇边，将“position + n”改为“position-n”。

React 中的代码相同。将“useEffect”与“,[ ]”一起使用。重要的是不要忘记这一点，因为代码只运行一次并避免不良影响。

https://codesandbox.io/s/slide-image-animation-with-react-and-css-rfhvd?file=/src/App.js