"""html\n<div class="relative w-64 h-80">\n <div class="absolute top-0 left-0 w-full h-full bg-gray-200 rounded-lg shadow-lg transition-transform duration-300 transform hover:scale-105">\n <div class="relative flex justify-center items-center w-full h-full">\n <img src="card-image.jpg" alt="Card Image" class="w-48 h-48">\n

\n
\n <div class="absolute top-0 left-0 w-full h-full rounded-lg shadow-inner-lg bg-gradient-to-r from-yellow-300 via-yellow-500 to-yellow-300 opacity-0 transition-all duration-300 transform hover:opacity-100">\n
\n
\n"""\n\n上面的代码创建了一个卡牌容器,并使用了Tailwind CSS的一些类来实现效果:\n\n- .relative:相对定位,用于定位内部元素。\n- .w-64.h-80:设置卡牌容器的宽度和高度。\n- .absolute:绝对定位,用于定位卡牌和阴影效果。\n- .top-0.left-0:将卡牌和阴影定位到容器的左上角。\n- .w-full.h-full:使卡牌和阴影的宽度和高度与容器相等。\n- .bg-gray-200:设置卡牌的背景颜色。\n- .rounded-lg:设置卡牌的圆角。\n- .shadow-lg:设置卡牌的阴影。\n- .transition-transform.duration-300:设置卡牌在hover时的缩放过渡效果。\n- .transform.hover:scale-105:设置卡牌在hover时的缩放效果。\n- .relative.flex.justify-center.items-center:用于居中显示卡牌内部内容。\n- <img>:卡牌内部的图片元素,用于展示卡牌的内容。\n- .bg-gradient-to-r:设置阴影的背景渐变效果。\n- .from-yellow-300.via-yellow-500.to-yellow-300:设置阴影的背景颜色渐变。\n- .opacity-0:设置阴影的初始透明度为0。\n- .transition-all.duration-300:设置阴影的透明度变化过渡效果。\n- .hover:opacity-100:设置阴影在hover时的透明度为100。\n\n你可以根据需要调整上面代码中的类名和样式,以实现你想要的效果。


原文地址: https://www.cveoy.top/t/topic/p31m 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录