tailwind布局实现酷黑炫酷登录表单页面代码

代码语言:html

所属分类:布局界面

代码描述:tailwind布局实现酷黑炫酷登录表单页面代码

代码标签: tailwind 布局 酷黑 炫酷 登录 表单 页面 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500&amp;display=swap" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: { geist: ['Geist', 'sans-serif'] },
          animation: {
            'float': 'float 6s ease-in-out infinite',
            'data-stream': 'dataStream 3s linear infinite',
            'schema-pulse': 'schemaPulse 4s ease-in-out infinite',
          },
          keyframes: {
            float: { 
              '0%, 100%': { transform: 'translateY(0px)' },
              '50%': { transform: 'translateY(-10px)' }
            },
            dataStream: {
              '0%': { strokeDashoffset: 20 },
              '100%': { strokeDashoffset: 0 }
            },
            schemaPulse: {
              '0%, 100%': { transform: 'scale(1)', opacity: 0.8 },
              '50%': { transform: 'scale(1.02)', opacity: 1 }
            }
          }
        }
      }
    }
  </script>
  <style>
  .........完整代码请登录后点击上方下载按钮下载查看

网友评论0