HTML+CSS+JS 熊猫登录表单

最新推荐文章于 2024-07-24 21:03:00 发布

若冰说

最新推荐文章于 2024-07-24 21:03:00 发布

阅读量802

点赞数 31

分类专栏：若冰说CSS css 文章标签： css html javascript 前端若冰说CSS

本文链接：https://blog.csdn.net/weixin_72553980/article/details/139372134

版权

效果演示

08-熊猫登录表单.gif

实现了一个可爱的熊猫登录界面，页面背景使用了渐变色，熊猫的头部和身体使用了圆形和椭圆形的边框，使用了CSS的伪元素和阴影效果来实现熊猫的手和脚。登录框使用了flex布局，包括用户名和密码的输入框和登录按钮，使用了CSS的过渡效果和伪类来实现输入框的动态效果。整个页面使用了响应式布局，可以适应不同大小的屏幕。

Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熊猫登录表单</title>
    <link rel="stylesheet" href="./08-熊猫登录表单.css">
</head>

<body>
    <div class="container">
        <div class="panda">
            <div class="ear left"></div>
            <div class="ear right"></div>
            <div class="face">
                <div class="eye-shadow left"></div>
                <div class="eye-white left">
                    <div class="eye-ball"></div>
                </div>
                <div class="eye-shadow right"></div>
                <div class="eye-white right">
                    <div class="eye-ball"></div>
                </div>
                <div class="nose"></div>
                <div class="mouth"></div>
            </div>
            <div class="body"></div>
            <div class="foot left">
                <div class="sole"></div>
            </div>
            <div class="foot right">
                <div class="sole"></div>
            </div>
        </div>
        <div class="login-box">
            <div class="hand left"></div>
            <div class="hand right"></div>
            <h1>用户登录</h1>
            <div class="ipt-box">
                <input type="text" required>
                <label>用户名</label>
            </div>
            <div class="ipt-box">
                <input type="password" id="password" required>
                <label>密码</label>
            </div>
            <button>登录</button>
        </div>
    </div>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="./08-熊猫登录表单.js"></script>
</body>

</html>

/* 清除所有元素的默认margin和padding */  
* {
     
    margin: 0; /* 清除外边距 */  
    padding: 0; /* 清除内边距 */  
}  
  
/* 设置body的样式 */  
body {

最低0.47元/天解锁文章

若冰说

关注

31
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JS 熊猫登录表单

实现了一个可爱的熊猫登录界面，页面背景使用了渐变色，熊猫的头部和身体使用了圆形和椭圆形的边框，使用了CSS的伪元素和阴影效果来实现熊猫的手和脚。登录框使用了flex布局，包括用户名和密码的输入框和登录按钮，使用了CSS的过渡效果和伪类来实现输入框的动态效果。整个页面使用了响应式布局，可以适应不同大小的屏幕。
复制链接

扫一扫