特效介绍

纯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 > |