正文 

当前位置： 首页 > 问答 >

悬停时的 Tailwind Css 自定义动画

     2023-05-08     82

关键词：

【中文标题】悬停时的 Tailwind Css 自定义动画【英文标题】：Tailwind Css Custom Animation on Hover 【发布时间】：2021-09-11 03:21:09 【问题描述】：

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

Tailwind Eye-Icon-Animation

感谢您的帮助！！

【问题讨论】：

【参考方案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 使其居中。

【讨论】：

非常感谢！！！我很欣赏这正在起作用，只是眨眼动画现在起作用了，但是第二个动画“眼球运动”不起作用:(play.tailwindcss.com/m5KKmDYgXa 您在示例中有group:animate-roll，但它应该是group-hover:animate-movement 是的，当我改变它时意识到了这一点但不起作用:(play.tailwindcss.com/bztmKDf8pt 不是group:animate-movement 而是group-hover:animate-movement :) play.tailwindcss.com/fqQk4wmqtx 完美的兄弟！非常感谢你的支持！！呸！那是我在 Tailwind 上的第一部动画 :)

Tailwind CSS组悬停动画不起作用

】TailwindCSS组悬停动画不起作用【英文标题】：Tailwindcssgrouphoveranimationnotworking【发布时间】：2021-12-2108:16:53【问题描述】：我是顺风css的新手。在这种情况下，悬停动画不起作用。当有人将鼠标悬停在组上时，我希望背景具有动... 查看详情

tailwind css - 在悬停时为另一个元素设置动画

】tailwindcss-在悬停时为另一个元素设置动画【英文标题】：tailwindcss-animateanotherelementonhover【发布时间】：2021-04-0420:35:48【问题描述】：在使用tailwindcss转换网站的过程中。我有一个元素，它在悬停时会为其子元素设置动画。我正... 查看详情

我在 Laravel app.css 中定义 Tailwind 活动/悬停类时出错

】我在Laravelapp.css中定义Tailwind活动/悬停类时出错【英文标题】：IgoterrordefiningTailwind\'sactive/hoverclassesinLaravel\'sapp.css【发布时间】：2021-12-0115:27:33【问题描述】：我想在我的Laravel8应用程序中应用tailwind-starter-kit我从html-login-page/lo... 查看详情

不悬停时的CSS动画

】不悬停时的CSS动画【英文标题】：CSSAnimationwhennothoveringov【发布时间】：2014-03-2203:55:54【问题描述】：我试图让我的徽标在悬停时变大，但当鼠标从徽标上移开时又恢复到原始大小。到目前为止，当鼠标悬停在徽标上时，徽标... 查看详情

取消悬停时的 CSS3 动画

】取消悬停时的CSS3动画【英文标题】：CancelCSS3animationonhover【发布时间】：2013-11-2908:03:35【问题描述】：我正在寻找一种在div悬停时完全取消CSS3动画的方法。目前，div有一个动画，在页面加载时播放，显示页面菜单3秒然后淡出... 查看详情

使用 Tailwind 悬停时的 SVG 颜色填充

】使用Tailwind悬停时的SVG颜色填充【英文标题】：SVGcolorfillonhoverusingTailwind【发布时间】：2021-03-1319:15:12【问题描述】：我一直试图让我的svg在悬停时用黑色填充，但似乎无法做到。我希望它有这样的黑色轮廓.然后像这样填写。... 查看详情

使用 css 动画更改悬停时的圆形背景

】使用css动画更改悬停时的圆形背景【英文标题】：Changecirclebackgroundonhoverusingcssanimation【发布时间】：2017-09-0110:00:53【问题描述】：我有一个圆圈，它的背景颜色设置为红色，我想使用css动画更改悬停时的背景，我该怎么做？... 查看详情

悬停时的CSS 3旋转动画[重复]

】悬停时的CSS3旋转动画[重复]【英文标题】：CSS3RotateAnimationonhover[duplicate]【发布时间】：2015-12-1513:31:02【问题描述】：我有这段代码可以在悬停时进行旋转。它根本不起作用。它有什么问题？我需要完整的360º旋转动画.icon-style-... 查看详情

css悬停时的动画（错误的方式）(代码片段)

查看详情

悬停自定义按钮时的矩形叠加

】悬停自定义按钮时的矩形叠加【英文标题】：Rectangleoverlayonhoveringacustombutton【发布时间】：2020-05-0709:39:23【问题描述】：我正在尝试定义一个自定义按钮样式，悬停时会在该按钮周围弹出一个矩形。structCustomButtonStyle:ButtonStyle@... 查看详情

鼠标悬停时的CSS3背景旋转动画

】鼠标悬停时的CSS3背景旋转动画【英文标题】：CSS3backgroundrotationanimationinmousehover【发布时间】：2012-09-1210:42:43【问题描述】：这是我的div。#div1position:absolute;top:50%;left:50%;margin-left:-100px;margin-top:420px;width:158px;height:158px;background-i 查看详情

使用变换时，悬停时的 CSS 动画停留在最后一个关键帧：旋转

】使用变换时，悬停时的CSS动画停留在最后一个关键帧：旋转【英文标题】：CSSanimationonhoverstayatlastkeyframewhenusingtransform:rotate【发布时间】：2014-10-2500:37:39【问题描述】：我试图让此动画在悬停时停留在其最后一个关键帧，但它... 查看详情

Tailwind/CSS 使用自定义字体

】Tailwind/CSS使用自定义字体【英文标题】：Tailwind/CSSusingcustomfonts【发布时间】：2021-03-2722:32:02【问题描述】：我有一个项目需要使用自定义字体。但我不知道如何在我的HTML中使用它。我已经在网上搜索了如何执行此操作，但所... 查看详情

Tailwind css - 使用 className 自定义间距值作为 tailwind 配置的变量

】Tailwindcss-使用className自定义间距值作为tailwind配置的变量【英文标题】：Tailwindcss-useclassNamecustomspacingvalueasvariablefortailwindconfig【发布时间】：2021-07-1920:27:24【问题描述】：有没有办法将间距（或其他参数）的自定义值传递给顺... 查看详情

CSS3 自定义动画在 :hover 之后触发

...描述】：我正在创建一系列“窗户”或“狗门”，当它们悬停在上面时，似乎就像狗门一样推回“窗户”。我已经能够创造出小狗关门的自然效果。它来回摆动几次，然后回到默认位置。我的问题是我无法找到释放悬停时触发挥... 查看详情

悬停时的Javascript动画[关闭]

】悬停时的Javascript动画[关闭]【英文标题】：Javascriptanimationonhover[closed]【发布时间】：2021-04-1512:39:53【问题描述】：如何制作移动点的动画沿着图形的边缘使用数组和事件列表器？当您将光标悬停在动画上时动画开始，并沿同... 查看详情

Tailwind CSS：创建自定义类时引用主题颜色

】TailwindCSS：创建自定义类时引用主题颜色【英文标题】：TailwindCSS:ReferencingThemeColorsWhenCreatingCustomClass【发布时间】：2020-10-2221:51:37【问题描述】：我正在尝试修改tailwind.config.js文件以创建一些自定义类。例如，我想创建一个调... 查看详情

Tailwind CSS 动画在 ReactJs/NextJs 中不起作用

】TailwindCSS动画在ReactJs/NextJs中不起作用【英文标题】：TailwindCSSanimationsnotworkinginReactJs/NextJs【发布时间】：2021-09-1113:24:45【问题描述】：我刚开始学习Tailwind和Nextjs，实际上我是在按照教程编写代码，并且完全按照视频中的内容... 查看详情