CSS3让登陆面板3D旋转起来

时间：2021-05-08

本文实例为大家分享了利用CSS3实现登陆面板3D旋转起来的具体代码，供大家参考，具体内容如下

效果图：

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

旋转结束：

示例代码：

XML/HTML Code复制内容到剪贴板
  • <!DOCTYPEhtml>
  • <htmllang="en">
  • <head>
  • <metacharset="UTF-8">
  • <title>登陆面板旋转</title>
  • <style>
  • body{
  • font-family:"MicrosoftYaHei","微软雅黑";
  • }
  • .container{
  • -webkit-perspective:800;
  • -webkit-perspective-origin:50%50%;
  • -webkit-transform-style:-webkit-preserve-3d;
  • }
  • #login-panel{
  • }
  • .login{
  • width:500px;
  • height:400px;
  • margin:100pxauto;
  • text-align:center;
  • border:1pxsolid#ABCDEF;
  • border-radius:10px;
  • box-shadow:003px3px#ABCDEF;
  • }
  • .loginh1{
  • margin:50px0;
  • }
  • .login-rowspan{
  • font-size:18px;
  • }
  • .login-rowinput{
  • height:25px;
  • line-height:25px;
  • padding:010px;
  • margin:10px0;
  • }
  • .btn{
  • outline:none;
  • background-color:aliceblue;
  • cursor:pointer;
  • width:90px;
  • height:40px;
  • border:1pxsolid#DDD;
  • border-radius:5px;
  • margin:30px20px;
  • font-size:16px;
  • transition:background-color0.5s;
  • -webkit-transition:background-color0.5s;
  • -moz-transition:background-color0.5s;
  • -o-transition:background-color0.5s;
  • }
  • .btn:hover{
  • background-color:antiquewhite;
  • }
  • .login-success{
  • font-size:20px;
  • padding:50px;
  • }
  • </style>
  • <script>
  • varloginBtn,regiBtn;
  • window.onload=function(){
  • loginBtn=document.getElementById("login");
  • loginBtn.onclick=rotate;
  • regiBtn=document.getElementById("regi");
  • regiBtn.onclick=rotate;
  • };
  • functionrotate(){
  • varx=0;
  • varpanel=document.getElementById("login-panel");
  • panel.style.transform="rotateX(0deg)";
  • panel.style.webkitTransform="rotateX(0deg)";
  • varflag=true;
  • vartimer=setInterval(function(){
  • if(Math.round(x)>=90&&flag){
  • panel.innerHTML="<pclass='login-success'>登陆成功</p>";
  • flag=false;
  • }
  • if(Math.round(x)>=358){
  • panel.style.transform="rotateX(360deg)";
  • panel.style.webkitTransform="rotateX(360deg)";
  • clearInterval(timer);
  • returnfalse;
  • }else{
  • x+=2+(360-x)/60;
  • panel.style.transform="rotateX("+x+"deg)";
  • panel.style.webkitTransform="rotateX("+x+"deg)";
  • }
  • },25);
  • }
  • </script>
  • </head>
  • <body>
  • <divclass="container">
  • <divclass="login"id="login-panel">
  • <h1>登陆</h1>
  • <divclass="login-row">
  • <labelfor="username"><span>账号：</span></label>
  • <inputtype="text"id="username"name="username">
  • </div>
  • <divclass="login-row">
  • <labelfor="password"><span>密码：</span></label>
  • <inputtype="password"id="password"name="password">
  • </div>
  • <divclass="login-row">
  • <buttonid="login"class="btn"type="button">登陆</button>
  • <buttonid="regi"class="btn"type="button">注册</button>
  • </div>
  • </div>
  • </div>
  • </body>
  • </html>

    • 以上就是本文的全部内容，希望对大家的学习有所帮助。

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章