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: [],
}

Note: As your parent element has flex class, it has full width meaning that on hover of whole line (not only eye) hover effect has taken place. To prevent it, I've relocated h-36 and w-36 from 'eye' to a wrapper and add mx-auto to center it.

Tailwind Css 自定义悬停动画

Tailwind Css Custom Animation on Hover

animation

hover

tailwind-css

tailwind.config.js