纯css实现的小狗动画登录框

纯css实现的小狗动画登录框，正常状态下，小狗会吐着舌头望着你，当用户名输入框获取焦点时，小狗会立马盯着输入框的光标，并且摇晃着身子和尾巴，随着输入时，光标位置变化而跟着变化。当密码框获取焦点时，小狗会立马闭上眼睛，并且静止不动，很有意思。赶紧用在你的个人博客为你的个人博客增添色彩吧！

本插件来自于今日头条博主课如一的文章，原文地址：https://www.toutiao.com/video/7261188618146827560/?app=news_article&timestamp=1690888215&share_uid=MS4wLjABAAAAPW3YDVvf3p4n11izZ06GHpLSJSSi3eG00zekr1_AA-g&wxshare_count=1&tt_from=weixin&utm_source=weixin&utm_medium=toutiao_android&utm_campaign=client_share&share_token=77d009bb-b790-48a8-9614-d65023bf8f03&source=m_redirect

1、引入style.css

<link rel="stylesheet" href="./style.css">

2、加入html

<div class="login-box">
  <div class="dog">
    <div class="hips ">
      <div class="dog-tail">
        <div class="dog-tail">
          <div class="dog-tail">
            <div class="dog-tail">
              <div class="dog-tail">
                <div class="dog-tail">
                  <div class="dog-tail">
                    <div class="dog-tail"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="body"></div>
    <div class="head">
      <div class="ear left-ear"></div>
      <div class="ear right-ear"></div>
      <div class="face">
        <div class="eyes">
          <span></span>
          <span></span>
        </div>
        <div class="mouth">
          <div class="nose"></div>
          <div class="tongue breath"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="login">
    <input class="username" type="text" autocomplete="on" placeholder="用户名" />
    <input class="password" type="password" autocomplete="off" placeholder="密码" />
    <button class="login-button">登录</button>
  </div>
</div>

3、引入js

<script src="./script.js"></script>