tailwindcss 如何做出hover的时候展现出像炉石卡牌那样指上去的效果并且卡牌周围还要泛着金色传说
要实现类似炉石卡牌的效果,你可以使用Tailwind CSS的动画和阴影类来实现:
- 首先,为卡牌添加一个
hover的样式类,以在鼠标悬停时应用特效。可以使用hover伪类选择器来实现:
<div class="card hover:shadow-lg hover:scale-105 hover:border-yellow-500">
<!-- 卡牌内容 -->
</div>
-
当鼠标悬停在卡牌上时,应用
shadow-lg类来添加一个稍微明显的阴影效果,scale-105类来放大卡牌一点,border-yellow-500类来改变卡牌的边框颜色为金色。 -
对于金色传说的效果,可以使用
before伪元素来创建一个位于卡牌周围的金色边框。首先,为卡牌的父元素添加一个relative类,然后使用before伪元素为卡牌创建一个绝对定位的元素,设置它的宽度、高度、边框和动画效果。最后,使用transform属性将伪元素缩放一点以创建金色传说的效果。
<div class="relative">
<div class="card hover:shadow-lg hover:scale-105 hover:border-yellow-500">
<!-- 卡牌内容 -->
</div>
<div class="absolute top-0 left-0 w-full h-full border-4 border-yellow-500 transform scale-105 transition-all duration-300 origin-top-left"></div>
</div>
以上代码中的w-full和h-full属性将伪元素的宽度和高度设置为和卡牌一样,border-4设置边框的宽度为4个像素,transition-all和duration-300属性用于创建动画效果,origin-top-left属性将缩放的原点设置为左上角。
这样,当鼠标悬停在卡牌上时,卡牌会放大、添加阴影,并且会有一个金色传说的效果出现在周围。
注意:以上代码只是示例,实际效果可能需要根据你的具体需求进行调整。你可以根据需要修改阴影、边框和动画效果的样式类来实现你想要的效果
原文地址: http://www.cveoy.top/t/topic/iZ7Y 著作权归作者所有。请勿转载和采集!