Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 输入密码动画开门效果
Blogger Information
Blog 14
fans 0
comment 0
visits 8044
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
输入密码动画开门效果
「flasky」
Original
673 people have browsed it

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

效果图如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.     <style>
  9.         div,table,tr,td,span,input,form,section,img ,body{
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  14.         .sec{
  15.             margin: 0 auto;
  16.         }
  18.         table ,tr,td{
  19.             border: 1px solid #dbdbdb;
  20.             border-spacing:10px;
  21.             padding: 5px;
  22.             text-align: center;
  23.             border-radius: 5px;
  25.         }
  27.         td {
  28.             border-radius: 3px;
  29.             box-shadow: 6px 3px 2px #acacac;
  30.             padding: 10px;
  31.             cursor: pointer;
  32.             background-color: #E45D00;
  33.             color: white;
  34.         }
  36.         .cusor{
  37.             cursor: pointer;
  38.         }
  40.         td:hover{
  41.             background-color: darkred;
  42.             color: #fff;
  43.             transition: all 0.5s ease;
  44.         }
  46.         .margin-10{
  47.             margin: 10px;
  48.         }
  50.         input{
  51.             border: none;
  52.             border-bottom: 1px solid #e4e4e4;
  53.             color: darkred;
  54.             font-size: 16px;
  57.         }
  58.         input:focus{
  59.             outline: none;
  60.         }
  62.         .bg-door {
  63.             background:url("bgdoor-x.png") no-repeat;
  64.             width: 335px;
  65.             height: 285px;
  66.         }
  68.         .d-flex {
  69.             display: flex;
  70.         }
  72.         .f-btw {
  73.             justify-content: space-between;
  74.         }
  76.         .f-center{
  77.             justify-content: center;
  78.         }
  80.         .pos-re {
  81.             position: relative;
  82.         }
  84.         .pos-abs {
  85.             position: absolute;
  86.             top: 52px;
  87.             left: 62px;
  88.         }
  90.         .m-0{
  91.             margin: 0px;
  92.         }
  93.         .p-0{
  94.             padding: 0px;
  95.         }
  96.         .b-0 {
  97.             border: none;
  98.         }
  100.         .widht-105 {
  101.             width: 103%;
  102.         }
  104.         .transi-2s{
  105.             transition: all 3s ease;
  106.         }
  109.         .trans-Y-left {
  110.             transform-style: preserve-3d;
  111.             transform-origin: left;
  112.             transform: rotateY(45deg);
  113.         }
  115.         .trans-Y-right {
  116.             transform-style: preserve-3d;
  117.             transform-origin: right;
  118.             transform: rotateY(-45deg);
  119.         }
  121.         .perspective-1200 {
  122.             transform:perspective(1200px);
  123.         }
  125.     </style>
  129. </head>
  130. <body>
  131. <section class="sec">
  132.     <div>
  133.         <table>
  134.             <tr>
  136.                 <td id="one" onclick="one()"> 壹 </td>
  137.                 <td id="two" onclick="two()"> 贰 </td>
  138.                 <td id="tree" onclick="tree()"> 叄 </td>
  139.             </tr>
  140.             <tr>
  141.                 <td id="four" onclick="four()"> 肆 </td>
  142.                 <td id="five" onclick="five()"> 伍 </td>
  143.                 <td id="six" onclick="six()"> 陆 </td>
  145.             </tr>
  146.             <tr>
  149.                 <td id="seven" onclick="seven()"> 柒 </td>
  150.                 <td id="eight" onclick="eight()"> 捌 </td>
  151.                 <td id="nine" onclick="nine()"> 玖 </td>
  152.             </tr>
  153.             <tr>
  154.                 <td id="zero" onclick="zero()"> 零 </td>
  155.                 <td id="jin" onclick="ent()"> 进 </td>
  156.                 <td id="tui" onclick="tui()"> 退 </td>
  157.             </tr>
  158.         </table>
  159.     </div>
  160.     <br>
  161.     <div class="margin-10">
  162.         请输入你的访问密码 <br>
  163.         <input type="text" id="tx" readonly="readonly" maxlength="5" size="14">
  164.     </div>
  165.     <div class="bg-door pos-re">
  166.         <div class="d-flex f-center pos-abs m-0 p-0 b-0 perspective-1200">
  167.             <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>
  168.             <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>
  169.         </div>
  170.     </div>
  171. </section>
  174. <script>
  175.     var tx='';
  178.     // oneid=document.getElementById("one");
  180.     function ent(){
  181.         var txId=document.getElementById('tx').value;
  183.         if(txId == '壹贰叄伍柒捌玖'){
  184.             localStorage.setItem("passWord",tx);
  185.             var left = document.getElementById('leftDoor');
  186.             left.className='m-0 p-0 b-0 trans-Y-left transi-2s'
  188.             var right = document.getElementById('rightDoor');
  189.             right.className='m-0 p-0 b-0 trans-Y-right transi-2s'
  190.             setTimeout(function (){
  191.                 // location.href = "javascript:location.reload()";
  192.                 location.href = "day1123-2.html";
  193.             },3000)
  195.         }
  196.     }
  199.     function tui(){
  200.         if (tx.length>0){
  201.             tx=document.getElementById('tx').value;
  202.             var txNum = tx.length;
  203.             tx = tx.substr(0,txNum-1);
  204.             document.getElementById('tx').value = tx;
  205.         }
  206.         return tx;
  208.     }
  211.     function one(){
  212.         if (tx.length<8){
  213.             tx=tx+'壹';
  214.             document.getElementById('tx').value =tx;
  215.         }
  216.         return tx;
  217.     }
  219.     // twoid=document.getElementById("two")
  220.     function two(){
  221.         if (tx.length<8){
  222.             tx=tx+'贰';
  223.             document.getElementById('tx').value =tx;
  224.         }
  226.         return tx;
  227.     }
  229.     // treeid=document.getElementById("tree")
  230.     function tree(){
  231.         if (tx.length<8){
  232.             tx=tx+'叄';
  233.             document.getElementById('tx').value =tx;
  234.         }
  236.         return tx;
  237.     }
  239.     // fourid=document.getElementById("four")
  240.     function four(){
  241.         if (tx.length<8){
  242.             tx=tx+'肆';
  243.             document.getElementById('tx').value =tx;
  244.         }
  246.         return tx;
  247.     }
  249.     // fiveid=document.getElementById("five")
  250.     function five(){
  251.         if (tx.length<8){
  252.             tx=tx+'伍';
  253.             document.getElementById('tx').value =tx;
  254.         }
  256.         return tx;
  257.     }
  259.     // sixid=document.getElementById("six")
  260.     function six(){
  261.         if (tx.length<8){
  262.             tx=tx+'陆';
  263.             document.getElementById('tx').value =tx;
  264.         }
  266.         return tx;
  267.     }
  269.     // sevenid=document.getElementById("seven")
  270.     function seven(){
  271.         if (tx.length<8){
  272.             tx=tx+'柒';
  273.             document.getElementById('tx').value =tx;
  274.         }
  276.         return tx;
  277.     }
  279.     // eightid=document.getElementById("eight")
  280.     function eight(){
  281.         if (tx.length<8){
  282.             tx=tx+'捌';
  283.             document.getElementById('tx').value =tx;
  284.         }
  286.         return tx;
  287.     }
  289.     // nineid=document.getElementById("nine")
  290.     function nine(){
  291.         if (tx.length<8){
  292.             tx=tx+'玖';
  293.             document.getElementById('tx').value =tx;
  294.         }
  296.         return tx;
  297.     }
  299.     // zeroid=document.getElementById("zero")
  300.     function zero(){
  301.         if (tx.length<8){
  302.             tx=tx+'零';
  303.             document.getElementById('tx').value =tx;
  304.         }
  305.         return tx;
  306.     }
  308. </script>
  309. </body>
  310. </html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post