• 日期: 2024-09-04
  • 标签: 常规

"""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点我,无需注册和登录