登入页面实现简单的animation效果
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <form action="#" class="login">
        <h1>登入</h1>
        <input type="text" placeholder="用户名">
        <input type="password" placeholder="密码">
        <input type="submit" value="提交">
    </form>

</body>

</html>
body {
    font-family: Roboto;
    background-color: #B3BDC2;
    display: flex;
    align-content: center;
    justify-content: center;
}

.login {
    background-color: #0b132b;
    width: 400px;
    color: #f8f9fa;
    padding: 40px;
    /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
    box-shadow: 10px 10px 25px #000000;
    text-align: center;
}

.login input {
    display: block;
    background: none;
    /* input 居中 */
    margin: 25px auto;
    /* input 修改为椭圆 */
    border-radius: 20px;
    /* 除去轮廓选中 */
    outline: none;
    padding: 12px;
    font-size: 15px;
    color: #f8f9fa;
}

/* 修改用户名和密码复选框样式 */
.login input[type="text"],
.login input[type="password"] {
    width: 200px;
    border: 2px solid #556FE8
}

/* 修改提交复选框边框样式 */
.login input[type="submit"] {
    width: 170px;
    border: 2px solid #5BC254;
    cursor: pointer;
}

/* 添加用户名和密码 animation 效果 */
.login input[type="text"]:focus,
.login input[type="password"]:focus {
    width: 220px;
    border-color: #5BC254;
    /* 渐变延迟0.5s */
    transition: 0.5s;
}

/* 添加提交 animation 效果 */
.login input[type="submit"]:hover {
    background: #5BC254;
    transition: 0.5s;
}
版权属于:it小离

本文链接: https://www.itxiaoli.cn/archives/animation.html

版权声明:本站文章采用 署名-非商业性使用-相同方式共享 4.0

最后修改:2021 年 07 月 22 日 03 : 13 AM
如果觉得我的文章对你有用,请随意赞赏