【css+js】登录卡片翻转

最新推荐文章于 2024-08-03 23:03:36 发布

阡小年

最新推荐文章于 2024-08-03 23:03:36 发布

阅读量318

点赞数

分类专栏： bilibili视频源码文章标签： css javascript html

本文链接：https://blog.csdn.net/weixin_45562037/article/details/126081755

版权

bilibili视频源码专栏收录该内容

18 篇文章 0 订阅

订阅专栏

效果视频展示：

【css+js】登录卡片翻转

全部代码（放心粘贴）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    html{
        width: 3600px;
        height: 100%;
        
        overflow-x: hidden;
    }
   .background{
        animation: move 5s 0s infinite; 
    } 
    @keyframes move {
        0%{
            transform: translateX(0px);
        }
        100%{
            transform: translateX(-1000px);
        }
    }
    .background>div{
        float: left;
        width: 300px;
        height: 1000px;
        
        filter: blur(150px);
    }

    .card{
        position: absolute;
    
        width: 500px;
        height: 600px;
        top: 50%;
        margin-top: -300px;
        left: 50%;
        margin-left: -250px;
        border: 2px solid black;
        transform-style: preserve-3d;
        transition: 1s;

        border-radius: 30px;
    }
    .card>div{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        backface-visibility:hidden;

        border-radius: 30px;
    }
    .card>.back{
       background: url(https://tse1-mm.cn.bing.net/th/id/OIP-C.29m_a03vVYLU92BpSOXSfgAAAA?pid=ImgDet&rs=1);
        transform: rotateY(180deg);
    }
    .card>.front{
        /* background: lightpink; */
        background: url(https://scpic.chinaz.net/files/pic/pic9/202009/apic27858.jpg) repeat;
    }
    .card>div>.login,.register{
        position: absolute;
        width: 120px;
        height: 40px;
        border: 1px solid black;

        left: 50%;
        margin-left: -60px;
        bottom: 0;
        margin-bottom: 30px;

        font-size: 35px;
        text-align: center;
        line-height: 40px;

        border-radius: 10px;
        background: white;
    }
    .card>div>.text{
        position: absolute;
        top: 30%;
        left: 50%;
        margin-left: -150px;

        color: white;
    }
   
    .card>div>div>input{
        width: 300px;
        height: 50px;
        margin: 20px;
        border-radius: 20px;
    }
</style>
<body>
    <!-- 渐变背景文章网址： https://juejin.cn/post/7057330357556740127  -->
    <div class="background"> 
        <div style="background: #6c71b9;"></div>
        <div style="background: #787dce;"></div>
        <div style="background: #8e94f2;"></div>
        <div style="background: #9fa0ff;"></div>
        <div style="background: #a19cec;"></div>
        <div style="background: #bbadff;"></div>
        <div style="background: #cbb2fe;"></div>
        <div style="background: #dab6fc;"></div>
        <div style="background: #c7abe2;"></div>
        <div style="background: #e0c3fc;"></div>
        <div style="background: #8187dc;"></div>
        <div style="background: #757bc8;"></div>
    </div>

    <div>
        <div class="card">
            <div class="back">
                <div class="text">
                    <p>用户名：</p><input type="text"><br>
                    <p>密码：</p><input type="text">
                </div>
                <div class="login">登录</div>
            </div>
            <div class="front">
                <div class="text">
                    <p>用户名：</p><input type="text"><br>
                    <p>密码：</p><input type="text">
                </div>
                <div class="register">注册</div>
            </div>
        </div>

    <script>
        var card = document.querySelector(".card");
        var login = document.querySelector(".login");
        var register = document.querySelector(".register");
    
        login.addEventListener("click",function(e){
            card.style.transform = "rotateY(0deg)";
            console.log("已点击login")
        })
        register.addEventListener("click",function(e){
          card.style.transform = "rotateY(180deg)";
          console.log("已点击regiter")
        })
    </script>
</body>
</html>