特效介绍
纯css实现的小狗动画登录框，正常状态下，小狗会吐着舌头望着你，当用户名输入框获取焦点时，小狗会立马盯着输入框的光标，并且摇晃着身子和尾巴，随着输入时，光标位置变化而跟着变化。当密码框获取焦点时，小狗会立马闭上眼睛，并且静止不动，很有意思。赶紧用在你的个人博客为你的个人博客增添色彩吧！
本插件来自于今日头条博主课如一的文章，原文地址：https://www.toutiao.com/video/7261188618146827560/?app=news_article×tamp=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
1 | <link rel="stylesheet" href="./style.css"> |
2、加入html
01 | <div class="login-box"> |
04 | <div class="dog-tail"> |
05 | <div class="dog-tail"> |
06 | <div class="dog-tail"> |
07 | <div class="dog-tail"> |
08 | <div class="dog-tail"> |
09 | <div class="dog-tail"> |
10 | <div class="dog-tail"> |
11 | <div class="dog-tail"></div> |
20 | <div class="body"></div> |
22 | <div class="ear left-ear"></div> |
23 | <div class="ear right-ear"></div> |
30 | <div class="nose"></div> |
31 | <div class="tongue breath"></div> |
37 | <input class="username" type="text" autocomplete="on" placeholder="用户名" /> |
38 | <input class="password" type="password" autocomplete="off" placeholder="密码" /> |
39 | <button class="login-button">登录</button> |
3、引入js
1 | <script src="./script.js"></script> |
