Tailwind CSS 自定义悬停动画

Question

我用顺风创建了一个眼睛图标动画，但是我无法在悬停时制作它:(您能指导我如何在悬停时制作动画吗？:)

顺风眼-图标-动画

感谢您的帮助！！

Answer 1

在配置中扩展

animation

以支持

hover

和

group-hover

变体

<div class="h-36 w-36 mx-auto flex justify-center items-center group hover:animate-roll">
  <div class="h-full w-full bg-black transform rotate-45 border-radius-eye flex justify-center items-center"> </div>
  <div class="h-12 w-12  bg-white rounded-full z-10 absolute group-hover:animate-movement" ></div>
</div>

tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      keyframes: {
      roll: { 
          '0%, 10%, 20%, 30%, 40%, 60%, 70%, 80%, 90%, 100%': { transform: 'scale(1)'},
          '50%': { transform: 'scaleY(0)' }
        },

        movement: {
          '0%, 20%, 40%, 60%, 80%, 100%': { transform: 'translateX(0rem)' },
          '10%': { transform: 'translateX(2rem)' },
          '30%': { transform: 'translateX(-2rem)' },
          '50%': { transform: 'translateY(1rem)' },
          '70%': { transform: 'translateY(-1rem)' },
        }

      },
      animation: {
        roll: 'roll 3s infinite ',
        movement: 'movement 5s infinite'
      },
    },
  },
  variants: {
    extend: {
      animation: ['hover', 'group-hover'] 
    }
  },
  plugins: [],
}

注意：由于您的父元素具有

flex

类，因此它具有全宽，这意味着在整行（不仅仅是眼睛）悬停时会发生悬停效果。为了防止这种情况，我将

h-36

和

w-36

从“眼睛”重新定位到包装器，并添加

mx-auto

将其居中。

Answer 2

但是如果属性是background-position-x怎么办？ 怎么写呢？