输入密码动画开门效果

2021年11月25日 15:16:25阅读数:67博客 / 「flasky」 / HTML学习

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

效果图如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. div,table,tr,td,span,input,form,section,img ,body{
  8. margin: 0;
  9. padding: 0;
  10. }
  11. .sec{
  12. margin: 0 auto;
  13. }
  14. table ,tr,td{
  15. border: 1px solid #dbdbdb;
  16. border-spacing:10px;
  17. padding: 5px;
  18. text-align: center;
  19. border-radius: 5px;
  20. }
  21. td {
  22. border-radius: 3px;
  23. box-shadow: 6px 3px 2px #acacac;
  24. padding: 10px;
  25. cursor: pointer;
  26. background-color: #E45D00;
  27. color: white;
  28. }
  29. .cusor{
  30. cursor: pointer;
  31. }
  32. td:hover{
  33. background-color: darkred;
  34. color: #fff;
  35. transition: all 0.5s ease;
  36. }
  37. .margin-10{
  38. margin: 10px;
  39. }
  40. input{
  41. border: none;
  42. border-bottom: 1px solid #e4e4e4;
  43. color: darkred;
  44. font-size: 16px;
  45. }
  46. input:focus{
  47. outline: none;
  48. }
  49. .bg-door {
  50. background:url("bgdoor-x.png") no-repeat;
  51. width: 335px;
  52. height: 285px;
  53. }
  54. .d-flex {
  55. display: flex;
  56. }
  57. .f-btw {
  58. justify-content: space-between;
  59. }
  60. .f-center{
  61. justify-content: center;
  62. }
  63. .pos-re {
  64. position: relative;
  65. }
  66. .pos-abs {
  67. position: absolute;
  68. top: 52px;
  69. left: 62px;
  70. }
  71. .m-0{
  72. margin: 0px;
  73. }
  74. .p-0{
  75. padding: 0px;
  76. }
  77. .b-0 {
  78. border: none;
  79. }
  80. .widht-105 {
  81. width: 103%;
  82. }
  83. .transi-2s{
  84. transition: all 3s ease;
  85. }
  86. .trans-Y-left {
  87. transform-style: preserve-3d;
  88. transform-origin: left;
  89. transform: rotateY(45deg);
  90. }
  91. .trans-Y-right {
  92. transform-style: preserve-3d;
  93. transform-origin: right;
  94. transform: rotateY(-45deg);
  95. }
  96. .perspective-1200 {
  97. transform:perspective(1200px);
  98. }
  99. </style>
  100. </head>
  101. <body>
  102. <section class="sec">
  103. <div>
  104. <table>
  105. <tr>
  106. <td id="one" onclick="one()"></td>
  107. <td id="two" onclick="two()"></td>
  108. <td id="tree" onclick="tree()"></td>
  109. </tr>
  110. <tr>
  111. <td id="four" onclick="four()"></td>
  112. <td id="five" onclick="five()"></td>
  113. <td id="six" onclick="six()"></td>
  114. </tr>
  115. <tr>
  116. <td id="seven" onclick="seven()"></td>
  117. <td id="eight" onclick="eight()"></td>
  118. <td id="nine" onclick="nine()"></td>
  119. </tr>
  120. <tr>
  121. <td id="zero" onclick="zero()"></td>
  122. <td id="jin" onclick="ent()"></td>
  123. <td id="tui" onclick="tui()"> 退 </td>
  124. </tr>
  125. </table>
  126. </div>
  127. <br>
  128. <div class="margin-10">
  129. 请输入你的访问密码 <br>
  130. <input type="text" id="tx" readonly="readonly" maxlength="5" size="14">
  131. </div>
  132. <div class="bg-door pos-re">
  133. <div class="d-flex f-center pos-abs m-0 p-0 b-0 perspective-1200">
  134. <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>
  135. <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>
  136. </div>
  137. </div>
  138. </section>
  139. <script>
  140. var tx='';
  141. // oneid=document.getElementById("one");
  142. function ent(){
  143. var txId=document.getElementById('tx').value;
  144. if(txId == '壹贰叄伍柒捌玖'){
  145. localStorage.setItem("passWord",tx);
  146. var left = document.getElementById('leftDoor');
  147. left.className='m-0 p-0 b-0 trans-Y-left transi-2s'
  148. var right = document.getElementById('rightDoor');
  149. right.className='m-0 p-0 b-0 trans-Y-right transi-2s'
  150. setTimeout(function (){
  151. // location.href = "javascript:location.reload()";
  152. location.href = "day1123-2.html";
  153. },3000)
  154. }
  155. }
  156. function tui(){
  157. if (tx.length>0){
  158. tx=document.getElementById('tx').value;
  159. var txNum = tx.length;
  160. tx = tx.substr(0,txNum-1);
  161. document.getElementById('tx').value = tx;
  162. }
  163. return tx;
  164. }
  165. function one(){
  166. if (tx.length<8){
  167. tx=tx+'壹';
  168. document.getElementById('tx').value =tx;
  169. }
  170. return tx;
  171. }
  172. // twoid=document.getElementById("two")
  173. function two(){
  174. if (tx.length<8){
  175. tx=tx+'贰';
  176. document.getElementById('tx').value =tx;
  177. }
  178. return tx;
  179. }
  180. // treeid=document.getElementById("tree")
  181. function tree(){
  182. if (tx.length<8){
  183. tx=tx+'叄';
  184. document.getElementById('tx').value =tx;
  185. }
  186. return tx;
  187. }
  188. // fourid=document.getElementById("four")
  189. function four(){
  190. if (tx.length<8){
  191. tx=tx+'肆';
  192. document.getElementById('tx').value =tx;
  193. }
  194. return tx;
  195. }
  196. // fiveid=document.getElementById("five")
  197. function five(){
  198. if (tx.length<8){
  199. tx=tx+'伍';
  200. document.getElementById('tx').value =tx;
  201. }
  202. return tx;
  203. }
  204. // sixid=document.getElementById("six")
  205. function six(){
  206. if (tx.length<8){
  207. tx=tx+'陆';
  208. document.getElementById('tx').value =tx;
  209. }
  210. return tx;
  211. }
  212. // sevenid=document.getElementById("seven")
  213. function seven(){
  214. if (tx.length<8){
  215. tx=tx+'柒';
  216. document.getElementById('tx').value =tx;
  217. }
  218. return tx;
  219. }
  220. // eightid=document.getElementById("eight")
  221. function eight(){
  222. if (tx.length<8){
  223. tx=tx+'捌';
  224. document.getElementById('tx').value =tx;
  225. }
  226. return tx;
  227. }
  228. // nineid=document.getElementById("nine")
  229. function nine(){
  230. if (tx.length<8){
  231. tx=tx+'玖';
  232. document.getElementById('tx').value =tx;
  233. }
  234. return tx;
  235. }
  236. // zeroid=document.getElementById("zero")
  237. function zero(){
  238. if (tx.length<8){
  239. tx=tx+'零';
  240. document.getElementById('tx').value =tx;
  241. }
  242. return tx;
  243. }
  244. </script>
  245. </body>
  246. </html>

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 博主信息
    「flasky」
    博文
    11
    粉丝
    0
    评论
    0
    访问量
    468
    积分:0
    P豆:27