CSS3让登陆面板旋转起来

最新推荐文章于 2022-11-02 16:22:26 发布

葡萄干是个程序员

最新推荐文章于 2022-11-02 16:22:26 发布

阅读量851

点赞数

分类专栏： Web前端文章标签： html css3 登陆面板的3D旋转

本文链接：https://blog.csdn.net/qq_15096707/article/details/50987407

版权

Web前端专栏收录该内容

107 篇文章 2 订阅

订阅专栏

这里只考虑chrome的兼容。

LoginRotate.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆面板旋转</title>
    <style>
        body {
            font-family: "Microsoft YaHei", "微软雅黑";
        }

        .container {
            /*创建3D场景*/
            -webkit-perspective: 800;
            -webkit-perspective-origin: 50% 50%;
            -webkit-transform-style: -webkit-preserve-3d; /*告诉浏览器以下transform操作是在3D场景下进行的*/
        }

        #login-panel {
            /*-webkit-transform: rotateX(45deg);*/
        }

        .login {
            width: 500px;
            height: 400px;
            margin: 100px auto;
            text-align: center;

            border: 1px solid #ABCDEF;
            border-radius: 10px;
            box-shadow: 0 0 3px 3px #ABCDEF;
        }
        .login h1 {
            margin: 50px 0;
        }
        .login-row span {
            font-size: 18px;
        }
        .login-row input {
            height: 25px;
            line-height: 25px;
            padding: 0 10px;
            margin: 10px 0;
        }

        .btn {
            outline: none;
            background-color: aliceblue;

            cursor: pointer;
            width: 90px;
            height: 40px;
            border: 1px solid #DDD;
            border-radius: 5px;
            margin: 30px 20px;
            font-size: 16px;

            transition: background-color 0.5s;
            -webkit-transition: background-color 0.5s;
            -moz-transition: background-color 0.5s;
            -o-transition: background-color 0.5s;
        }
        .btn:hover {
            background-color: antiquewhite;
        }

        .login-success {
            font-size: 20px;
            padding: 50px;
        }
    </style>

    <script>
        var loginBtn, regiBtn;
        window.onload = function() {
            loginBtn = document.getElementById("login");
            loginBtn.onclick = rotate;
            regiBtn = document.getElementById("regi");
            regiBtn.onclick = rotate;
        };

        function rotate() {
            var x = 0;
            var panel = document.getElementById("login-panel");
            panel.style.transform = "rotateX(0deg)";
            panel.style.webkitTransform = "rotateX(0deg)";

            var flag = true;
            var timer = setInterval(function() {
                if(Math.round(x) >= 90 && flag) {
                    panel.innerHTML = "<p class='login-success'>登陆成功</p>";
                    flag = false;
                }

                if(Math.round(x) >= 358) {
                    panel.style.transform = "rotateX(360deg)";
                    panel.style.webkitTransform = "rotateX(360deg)";
                    clearInterval(timer);
                    return false;
                } else {
                    x += 2 + (360 - x) / 60;
                    panel.style.transform = "rotateX(" + x + "deg)";
                    panel.style.webkitTransform = "rotateX(" + x + "deg)";
                }
            }, 25);
        }
    </script>
</head>
<body>
    <div class="container">
        <div class="login" id="login-panel">
            <h1>登陆</h1>
            <div class="login-row">
                <label for="username"><span>账号：</span></label>
                <input type="text" id="username" name="username">
            </div>
            <div class="login-row">
                <label for="password"><span>密码：</span></label>
                <input type="password" id="password" name="password">
            </div>
            <div class="login-row">
                <button id="login" class="btn" type="button">登陆</button>
                <button id="regi" class="btn" type="button">注册</button>
            </div>
        </div>
    </div>
</body>
</html>

运行结果如下：

点击登陆，登陆面板会发生360度旋转，并显示信息。

旋转结束：

葡萄干是个程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3让登陆面板旋转起来

这里只考虑chrome的兼容。LoginRotate.html 登陆面板旋转 body { font-family: "Microsoft YaHei", "微软雅黑"; } .container { /*创建3D场景*/ -webkit
复制链接

扫一扫

专栏目录