输入密码动画开门效果 - HTML学习

首页 > 博客列表 > 输入密码动画开门效果
博主信息
博文 14
粉丝 0
访问量 11591
专题推荐
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
输入密码动画开门效果
「flasky」
原创
962人浏览过
做的一个输入密码开门效果.
还可以加强效果
效果图如下:
<!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>
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
HTML标签与markdown语法学习

2021-11-11 13:34:05