悬停时的 Tailwind Css 自定义动画

Question

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

Tailwind Eye-Icon-Animation

感谢您的帮助！！

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 从 'eye' 重新定位到一个包装器，并添加 mx-auto 使其居中。