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

Question

任何人都可以帮我弄清楚如何使用 React 和 Tailwind css

制作本网站 https://worldofwomen.art/ 中使用的 2 个动画

第一：这张图的动画条

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

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

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

Answer 1

有几种方法可以做到这一点，但考虑到您引用的网站，我注意到它以无限增量工作，所以很可能是用 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 个值：

像素数增加了，我放了10个。
过渡的持续时间，我输入'100ms'。
setInterval间隔，我放40。

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

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

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

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

Answer 2

使用'animation' css 属性

就可以用css（即Tailwindcss）实现动画

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

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

III- 创建新的 React 组件 animation.js, inside pages/ folder

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>
      
    </>
  );
}

第一个div负责图像的动画，默认方向是从右到左。我使用了 2 个 img 标签，因为它必须有 2 组不同的相同 img 标签。因为在无限循环中，当一张图片消失时，第二张图片出现，它会重新开始循环而没有任何间隙（您可以评论第二个 img 标签以检查我所说的间隙）
第二个div与第一个相似，但方向相反属性。
对于文本动画，我们做同样的事情我们必须多次创建文本以避免在无限循环中为文本设置动画时出现间隙。并且为了避免同一标签的多行： • 新网站即将推出我包裹在一个数组中并循环遍历它
所有样式都使用 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%);
    }
  }

}

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

Animated bar / text with Tailwind CSS and react

css

animation

css-animations

reactjs

tailwind-css