登录栏的实现

最新推荐文章于 2022-04-29 21:12:24 发布

mischievous_boy

最新推荐文章于 2022-04-29 21:12:24 发布

阅读量325

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/mischievous_boy/article/details/105407969

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

因为登录栏里有渐变，所以通过网上的一些博客了解了一下，下面稍微总结一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
    <div class="wrapper">我要渐变
    </div>
</body>
</html>

* {
    padding: 0;
    margin: 0;
}
div {
    width: 100px;
    height: 25px;
    border: 1px solid red;
    text-align: center;
    /* 使其背景渐变 */
    background-image: linear-gradient(to right ,orange 20%,yellow 40%,green 100%);
    /* 把div里面的文字剪裁出来 */
    -webkit-background-clip: text;
    /* 剪裁出来的是文字和文字后面的背景，把文字设置为透明，就可以用背景颜色的方式显示文字了 */
    color: transparent;
}

上面是练习时敲得，下面会解释一下

backgro

 background-image: linear-gradient(to right ,orange 20%,yellow 40%,green 100%);

将背景设置为渐变

  -webkit-background-clip: text;

将文字剪裁之后

的und-image: lin

 color: transparent;

将字体的背景颜色设置为透明，就能看到用背景颜色勾勒出来的彩色渐变字体字和剪裁出来的是文字和文字后面的背景，把文字设置为透明，就可以用背景颜色的方式显示文字了文字后面的背景，把文字设置为透明，就可以用背景颜色的方式显示文字了

ear-gradient(to right ,orange 20%,yellow 40%,green 100%); background-image: linear-gradent(to right ,orange 20%,yellow 40%,green 100%);

线性渐变 向下/向上/向左/向右/对角方向

background-image: linear-gradient(to direction, red , yellow);

to direction 决定渐变的方向如 to right ， to right bottom。

background-image: linear-gradient(to right ,orange 50%,green 100%);

background-image: linear-gradient(to right ,orange ,green ,orange);

（本次实验的log in 下面的下划线因为有透明，所以用rbga和百分数的方式比较好一点）实验中的下划线css样式

.login-underline {
    width: 460px;
    height: 2px;
   
    background-image: linear-gradient(
        to right,
        rgba(0,0,0,0) 0%,
        rgba(35,198,200,0.2) 10%,
        rgba(35,198,200,0.3) 20%,
        rgba(35,198,200,0.4) 30%,
        rgba(35,198,200,0.5) 40%,
        rgba(35,198,200,0.8) 50%,
        rgba(35,198,200,0.5) 60%,
        rgba(35,198,200,0.4) 70%,
        rgba(35,198,200,0.3) 80%,
        rgba(35,198,200,0.2) 90%,
        rgba(0,0,0,0) 100%
    );
}

使用角度

background-image: linear-gradient(angle, color-stop1, color-stop2);

例如

  background-image: linear-gradient(45deg ,orange 20% ,green 80%,orange 100%);

实验的中的是重复实现线性渐变（登录的log和末尾都是用的角度）如

   background-image: repeating-linear-gradient(45deg ,orange 10% ,green 15%);

关于径向渐变 https://www.cnblogs.com/xiaohuochai/p/5383285.html 博主写的很好，一看就懂

接下来就是这次实验

点击jion in之后

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <title>登录栏</title>
</head>
<body>
    <div class="wrapper-form1">
        <form action="" class="form1">
            <!-- 登录logo -->
            <div class="login-logo">
                <strong>Log</strong>
                <span>in</span>
            </div>
            <!-- 分割线 -->
            <div class="login-underline"></div>
            <div class="container">
                <div class="login-username">
                    <div >Your email or username</div>
                    <div class="login-username-box"><input type="text" class="login-username-input" placeholder="myusername or mymail@mail.com"></div>
                </div>
                <div class="login-username">
                    <div>Your password</div>
                    <div class="login-username-box"><input type="password" class="login-username-input" placeholder="eg:zdd1345678"></div>
                </div>
                <div class="login-keep">
                    <input type="checkbox" name="" value=""><span>Keep me logging in</span>
                </div>
                <div class="login-submit">
                    <input type="submit" value="Login" name="">
                </div>
            </div>
        </form>
        <footer>
                <div class="footer-info">
                   <a href=""> Not a member yet?</a>
                   <button class="footer-info-submit">join us</button>
               </div>
           </footer>
    </div>
    <div class="wrapper-form2">
        <form action="" class="form2">
            <div class="login-logo">
                <strong>Log</strong>
                <span>up</span>
            </div>
            <div class="login-underline"></div>
            <div class="container">
                <div class="login-username">
                    <div >Your username</div>
                    <div class="login-username-box"><input type="text" class="login-username-input" placeholder="mysuperusename690"></div>
                </div>
                <div class="login-username">
                    <div>Your email</div>
                    <div class="login-username-box"><input type="email" class="login-username-input" placeholder="mysupermail@mail.com"></div>
                </div>
                <div class="login-username">
                    <div>Your password</div>
                    <div class="login-username-box"><input type="password" class="login-username-input" placeholder="eg:zdd123456"></div>
                </div>
                <div class="login-username">
                    <div class="login-username-info">Please confirm you password</div>
                    <div class="login-username-box"><input type="password" class="login-username-input" placeholder="eg:zdd123456"></div>
                </div>
                <div class="login-keep">
                    <input type="checkbox" name="" value=""><span>Keep me logging in</span>
                </div>
                <div class="login-submit">
                    <input type="submit" value="Login" name="">
                </div>
            </div>
        </form>
        <footer>
            <div class="footer-info">
               <a href=""> Not a member yet?</a>
               <button class="footer-info-submit" type="submit">Go and log in</button>
           </div>
       </footer>
    </div>
</body>
</html>
<script>
    var change1 = document.getElementsByClassName('wrapper-form1')[0];
    var change2 = document.getElementsByClassName('wrapper-form2')[0];
    var btn1 = document.getElementsByClassName('wrapper-form1')[0].getElementsByClassName('footer-info-submit')[0];
    var btn2 = document.getElementsByClassName('wrapper-form2')[0].getElementsByClassName('footer-info-submit')[0];
    btn1.addEventListener('click',function()
    {
        change1.style.display = 'none';
        change2.style.display = 'block';
    });
    btn2.addEventListener('click',function()
    {
        change2.style.display = 'none';
        change1.style.display = 'block';
    });
</script>

css

* {
    padding: 0;
    margin: 0;
}
.wrapper-form1 {
    width: 500px;
    height: 356px;
    margin: 100px auto;
    box-shadow: 0 0 5px green;
}
.wrapper-form2 {
    display: none;
    width: 500px;
    height: 500px;
    margin: 100px auto;
    box-shadow: 0 0 5px green;
}
.form1 {
    width: 460px;
    height: 306px;
    padding: 0 20px;
}
.form2 {
    width: 460px;
    height: 450px;
    padding: 0 20px;
    
}
.login-logo {
    width: 400px;
    height: 80px;
    line-height: 80px;
    margin: 0 auto;
    text-align: center;
    font-size: 45px;
    font-weight: 700;
    /* background-color: red; */

}
.login-logo strong {
    font-weight: none;
}
.login-logo span{
    text-indent: 1em;
}
.login-logo span , .login-logo strong{
    display: inline-block;
     background-image:repeating-linear-gradient(-45deg , #12535d 20% , #406f76 40%);
    -webkit-background-clip:text ;
    /* -webkit-text-fill-color: transparent; */
    color: transparent; 
}
.login-underline {
    width: 460px;
    height: 2px;
   
    background-image: linear-gradient(
        to right,
        rgba(0,0,0,0) 0%,
        rgba(35,198,200,0.2) 10%,
        rgba(35,198,200,0.3) 20%,
        rgba(35,198,200,0.4) 30%,
        rgba(35,198,200,0.5) 40%,
        rgba(35,198,200,0.8) 50%,
        rgba(35,198,200,0.5) 60%,
        rgba(35,198,200,0.4) 70%,
        rgba(35,198,200,0.3) 80%,
        rgba(35,198,200,0.2) 90%,
        rgba(0,0,0,0) 100%
    );
}
.form1 .container {
    height: 214px;
    /* background-color: red; */
    padding: 10px 0 0 0;
}
.form2 .container {
    height: 358px;
    /* background-color: red; */
    padding: 10px 0 0 0;
}
.login-username {
    height: 72px;
    /* background-color:green; */
}
.login-username .login-username-info {
    height: 30px;
    line-height: 30px;
    /* background-color: red; */
}
.login-username-box {
    width: 458px;
    height: 30px;
    border: 1px solid black;
    overflow: hidden;
}
.login-username input {
    padding-left: 10px;
    width: 100%;
    height: 20px;
    line-height: 30px; 
    outline: none;
    border: none;
}
.login-keep{
    /* background-color: greenyellow; */
    height: 30px;
    line-height: 30px;
}
.login-keep span{
    display: inline-block;
    text-indent: 10px;
    font-size: 12px;
}
.login-submit {
    height: 40px;
    /* background-color: lightcoral; */
}
.login-submit input{
    width: 100px;
    height: 40px;
    line-height: 40px;
    float: right;
    background-color: #3d9db3;
    font-size: 20px;
    text-align: center;
    color: white;
    outline: none;
    border: none;
}
footer {
    padding: 0 20px;
    height: 50px;
    background-image:repeating-linear-gradient(-45deg , #f6f6f6 10% , #e0e9ea 15%);
}
.wrapper-form1 footer .footer-info {
    float:right;
    height: 40px;
    line-height: 40px;
    width: 240px;
}
.wrapper-form2 footer .footer-info {
    float:right;
    height: 40px;
    line-height: 40px;
    width: 323px;

}

.footer-info a {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    text-decoration: none;
    color: black;
    font-size: 16px;
}
.wrapper-form1 footer .footer-info-submit {
    display: inline-block;
    width: 60px;
    height: 25px;
    line-height: 25px;
    background-color: white;
    margin-left: 20px;
    text-align: center;
    outline: none;
    border: none;
    cursor: pointer;
    
}
.wrapper-form2 footer .footer-info-submit {
    display: inline-block;
    width: 150px;
    height: 25px;
    line-height: 25px;
    background-color: white;
    margin-left: 20px;
    text-align: center;
    outline: none;
    border: none;
    cursor: pointer;
}

mischievous_boy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
登录栏的实现

因为登录栏里有渐变，所以通过网上的一些博客了解了一下，下面稍微总结一下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale...
复制链接

扫一扫