tailwindcss布局简洁大气清爽登录注册页表单代码
代码语言:html
所属分类:表单美化
代码描述:tailwindcss布局简洁大气清爽登录注册页表单代码
代码标签: tailwind 布局 简洁 大气 清爽 登录 注册页 表单 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lucide.min.js"></script>
<style>
.font-geist { font-family: 'Geist', sans-serif !important; }
.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }
.animate-fade-up {
animation: fadeUp 0.6s ease-out forwards;
opacity: 0;
transform: translateY(20px);
}
.animate-slide-right {
animation: slideRight 0.8s ease-out forwards;
opacity: 0;
transform: translateX(-30px);
}
.animate-blur-in {
animation: blurIn 1s ease-out forwards;
filter: blur(10px);
opacity: 0;
}
.animate-scale-up {
animation: scaleUp 0.5s ease-out forwards;
opacity: 0;
transform: scale(0.95);
}
@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideRight {
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes blurIn {
to {
filter: blur(0px);
opacity: 1;
}
}
@keyframes scaleUp {
to {
opacity: 1;
transform: scale(1);
}
}
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0