用CSS-doodle制作炫酷的登录界面

引言

  在Web开发中，登录界面的设计是一个重要的环节。一个吸引人的登录界面不仅可以提高用户体验，还可以提升品牌形象。近年来，随着CSS技术的不断发展，越来越多的开发者开始尝试使用CSS来制作炫酷的登录界面。本文将介绍如何使用CSS-doodle制作一个具有创意和个性的登录界面。

一、什么是CSS-doodle？

CSS-doodle是一个基于CSS的绘图库，它可以让我们使用纯CSS代码来绘制各种图形。通过CSS-doodle，我们可以实现许多以前只能通过图片或者JavaScript来实现的效果，而且更加简洁、高效。

二、制作步骤

1.准备工作

首先，我们需要在HTML文件中引入CSS-doodle库。可以通过以下方式引入：

<script src="https://unpkg.com/css-doodle@0.13.4/css-doodle.min.js"></script>

2.设计登录表单

   接下来，我们使用HTML和CSS来设计登录表单。这里我们使用一个简单的表单结构，包括用户名、密码输入框和登录按钮。

<div class="container">
   
    <div class="drop">
      
      <div class="content">
       
        <h3>用户登录</h3>
        <form id="login-form">
          <div class="inputBox">
            <input type="text" name="uesrname" id="username" class="form-control" placeholder="邮箱/用户名" autocomplete="off" required> 
          </div>
          <div class="inputBox">
            <input type="password" name="password" id="password" class="form-control" placeholder="密码" autocomplete="off" required>
          </div>
         
          <button  class="inputBox"   onclick="submit()" >登录</button>   
     
        </form>
      </div>
    </div>
    <div id="wallbg">
      <canvas ></canvas>
    </div>
    <a href="#" class="btns">忘记密码</a>
    <a href="#" class="btns signup">注册</a>
  </div>

3.使用CSS-doodle绘制图形

现在，我们可以使用CSS-doodle来绘制一些有趣的图形。例如，我们可以在登录表单的背景上绘制一个动态方块下落效果。

 <css-doodle>
  :doodle {
    @grid: 12 / 50vmin 80vmin;
    perspective: 90vmin;
    perspective-origin: 0% -140%;
    transform: scale(.6);
  }

  :container {
    transform-style: preserve-3d;
    animation: camera 5s ease-in-out infinite;
    animation-direction: alternate-reverse;
  }

  --ds: @r(1.5s, 6s, .1);
  --size: @r(2, 16);
  

  --z: calc(@i() * .0001px + var(--size) * .1px);

  animation:
    move var(--ds) linear infinite,
    opacity var(--ds) linear infinite;
  
  animation-delay: 
    calc((@row() - @size-row()) * var(--ds) / @size-row() - @r(@size()) * .1s);
  
  :after {
    content: '';
    @size: calc(var(--size) * 10%);
    background: @p(#00b8a9, #f8f3d4, #f6416c, #ffde7d);
  }

  position: absolute;
  left: calc(@col() * 100% / @size-row());
  @size: calc(100% / @size-row());
  
  @keyframes move {
    0% {
      transform: 
        translate3d(0, 0, calc(var(--z) - 15vmin)) 
        rotateX(180deg) scaleY(.01);
    }
    10% {
      transform: 
        translate3d(0, calc(10% * @size-row()), var(--z)) 
        rotateX(0) scaleY(.8);
    }
    90% {
      transform: 
        translate3d(0, calc(90% * @size-row()), var(--z)) 
        scale(1);
    }
    100% {
      transform: 
        translate3d(0, calc(100% * @size-row()), calc(var(--z) + 5vmin)) 
        scale(.5);
    }
  }

  @keyframes opacity {
    0%, 100% { opacity: 0; }
    10%, 90% { opacity: .9; }
  }

  @keyframes camera {
    from {
      transform: rotateX(-45deg) rotate(140deg) translateY(-10%);
    }
    to {
      transform: rotateX(-45deg) rotate(220deg) translateY(-10%);
    }
  }
</css-doodle>

我们在CSS中为这个元素添加样式，使用CSS-doodle来绘制效果。

效果展示：