输入密码动画开门效果

程序员文章站 2022-03-03 22:32:55

...

做的一个输入密码开门效果.
还可以加强效果

效果图如下:
输入密码动画开门效果


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        div,table,tr,td,span,input,form,section,img ,body{
            margin: 0;
            padding: 0;
        }

        .sec{
            margin: 0 auto;
        }

        table ,tr,td{
            border: 1px solid #dbdbdb;
            border-spacing:10px;
            padding: 5px;
            text-align: center;
            border-radius: 5px;

        }

        td {
            border-radius: 3px;
            box-shadow: 6px 3px 2px #acacac;
            padding: 10px;
            cursor: pointer;
            background-color: #E45D00;
            color: white;
        }

        .cusor{
            cursor: pointer;
        }

        td:hover{
            background-color: darkred;
            color: #fff;
            transition: all 0.5s ease;
        }

        .margin-10{
            margin: 10px;
        }

        input{
            border: none;
            border-bottom: 1px solid #e4e4e4;
            color: darkred;
            font-size: 16px;


        }
        input:focus{
            outline: none;
        }

        .bg-door {
            background:url("bgdoor-x.png") no-repeat;
            width: 335px;
            height: 285px;
        }

        .d-flex {
            display: flex;
        }

        .f-btw {
            justify-content: space-between;
        }

        .f-center{
            justify-content: center;
        }

        .pos-re {
            position: relative;
        }

        .pos-abs {
            position: absolute;
            top: 52px;
            left: 62px;
        }

        .m-0{
            margin: 0px;
        }
        .p-0{
            padding: 0px;
        }
        .b-0 {
            border: none;
        }

        .widht-105 {
            width: 103%;
        }

        .transi-2s{
            transition: all 3s ease;
        }


        .trans-Y-left {
            transform-style: preserve-3d;
            transform-origin: left;
            transform: rotateY(45deg);
        }

        .trans-Y-right {
            transform-style: preserve-3d;
            transform-origin: right;
            transform: rotateY(-45deg);
        }

        .perspective-1200 {
            transform:perspective(1200px);
        }

    </style>



</head>
<body>
<section class="sec">
    <div>
        <table>
            <tr>

                <td id="one" onclick="one()"> 壹 </td>
                <td id="two" onclick="two()"> 贰 </td>
                <td id="tree" onclick="tree()"> 叄 </td>
            </tr>
            <tr>
                <td id="four" onclick="four()"> 肆 </td>
                <td id="five" onclick="five()"> 伍 </td>
                <td id="six" onclick="six()"> 陆 </td>

            </tr>
            <tr>


                <td id="seven" onclick="seven()"> 柒 </td>
                <td id="eight" onclick="eight()"> 捌 </td>
                <td id="nine" onclick="nine()"> 玖 </td>
            </tr>
            <tr>
                <td id="zero" onclick="zero()"> 零 </td>
                <td id="jin" onclick="ent()"> 进 </td>
                <td id="tui" onclick="tui()"> 退 </td>
            </tr>
        </table>
    </div>
    <br>
    <div class="margin-10">
        请输入你的访问密码 <br>
        <input type="text" id="tx" readonly="readonly" maxlength="5" size="14">
    </div>
    <div class="bg-door pos-re">
        <div class="d-flex f-center pos-abs m-0 p-0 b-0 perspective-1200">
            <div class="m-0 p-0 b-0" id="leftDoor"><img class="m-0 p-0 b-0 widht-105" src="leftDoor-x.png" alt=""></div>
            <div class="m-0 p-0 b-0" id="rightDoor"><img class="m-0 p-0 b-0 widht-105" src="rightDoor-x.png" alt=""></div>
        </div>
    </div>
</section>


<script>
    var tx='';


    // oneid=document.getElementById("one");

    function ent(){
        var txId=document.getElementById('tx').value;

        if(txId == '壹贰叄伍柒捌玖'){
            localStorage.setItem("passWord",tx);
            var left = document.getElementById('leftDoor');
            left.className='m-0 p-0 b-0 trans-Y-left transi-2s'

            var right = document.getElementById('rightDoor');
            right.className='m-0 p-0 b-0 trans-Y-right transi-2s'
            setTimeout(function (){
                // location.href = "javascript:location.reload()";
                location.href = "day1123-2.html";
            },3000)

        }
    }


    function tui(){
        if (tx.length>0){
            tx=document.getElementById('tx').value;
            var txNum = tx.length;
            tx = tx.substr(0,txNum-1);
            document.getElementById('tx').value = tx;
        }
        return tx;

    }


    function one(){
        if (tx.length<8){
            tx=tx+'壹';
            document.getElementById('tx').value =tx;
        }
        return tx;
    }

    // twoid=document.getElementById("two")
    function two(){
        if (tx.length<8){
            tx=tx+'贰';
            document.getElementById('tx').value =tx;
        }

        return tx;
    }

    // treeid=document.getElementById("tree")
    function tree(){
        if (tx.length<8){
            tx=tx+'叄';
            document.getElementById('tx').value =tx;
        }

        return tx;
    }

    // fourid=document.getElementById("four")
    function four(){
        if (tx.length<8){
            tx=tx+'肆';
            document.getElementById('tx').value =tx;
        }

        return tx;
    }

    // fiveid=document.getElementById("five")
    function five(){
        if (tx.length<8){
            tx=tx+'伍';
            document.getElementById('tx').value =tx;
        }

        return tx;
    }

    // sixid=document.getElementById("six")
    function six(){
        if (tx.length<8){
            tx=tx+'陆';
            document.getElementById('tx').value =tx;
        }

        return tx;
    }

    // sevenid=document.getElementById("seven")
    function seven(){
        if (tx.length<8){
            tx=tx+'柒';
            document.getElementById('tx').value =tx;
        }

        return tx;
    }

    // eightid=document.getElementById("eight")
    function eight(){
        if (tx.length<8){
            tx=tx+'捌';
            document.getElementById('tx').value =tx;
        }

        return tx;
    }

    // nineid=document.getElementById("nine")
    function nine(){
        if (tx.length<8){
            tx=tx+'玖';
            document.getElementById('tx').value =tx;
        }

        return tx;
    }

    // zeroid=document.getElementById("zero")
    function zero(){
        if (tx.length<8){
            tx=tx+'零';
            document.getElementById('tx').value =tx;
        }
        return tx;
    }

</script>
</body>
</html>

上一篇： JS,CSS HTML 简单开心日历

下一篇：列表页和商品详情页

输入密码动画开门效果

移动web模拟客户端实现多方框输入密码效果【附代码】

Camtasia9素材怎么添加开门状入场动画效果?

angular仿支付宝密码框输入效果

jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换

Android仿支付宝密码输入效果封装

android仿支付宝密码输入框效果

android仿支付宝、微信密码输入框效果

Camtasia9素材怎么添加开门状入场动画效果?

angular仿支付宝密码框输入效果

js怎么给输入框增加动画效果