首页 > 特效插件 > 表单按钮 >  纯css实现的小狗动画登录框正文

纯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

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


2、加入html

01<div class="login-box">
02  <div class="dog">
03    <div class="hips ">
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>
12                  </div>
13                </div>
14              </div>
15            </div>
16          </div>
17        </div>
18      </div>
19    </div>
20    <div class="body"></div>
21    <div class="head">
22      <div class="ear left-ear"></div>
23      <div class="ear right-ear"></div>
24      <div class="face">
25        <div class="eyes">
26          <span></span>
27          <span></span>
28        </div>
29        <div class="mouth">
30          <div class="nose"></div>
31          <div class="tongue breath"></div>
32        </div>
33      </div>
34    </div>
35  </div>
36  <div class="login">
37    <input class="username" type="text" autocomplete="on" placeholder="用户名" />
38    <input class="password" type="password" autocomplete="off" placeholder="密码" />
39    <button class="login-button">登录</button>
40  </div>
41</div>


3、引入js

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


下载 提取码/密码:d3av(点击复制密码) 预览