登陆框css怎么设置成3维效果

html-css03

登陆框css怎么设置成3维效果,第1张

效果图:

代码如下:

<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title>登陆面板旋转</title> 

<style> 

body {  

font-family: "Microsoft YaHei", "微软雅黑" 

}  

.container {  

/*创建3D场景*/  

-webkit-perspective: 800 

-webkit-perspective-origin: 50% 50% 

-webkit-transform-style: -webkit-preserve-3d/*告诉浏览器以下transform操作是在3D场景下进行的*/  

}  

#login-panel {  

/*-webkit-transform: rotateX(45deg)*/  

}  

.login {  

width: 500px 

height: 400px 

margin: 100px auto 

text-align: center 

border: 1px solid #ABCDEF 

border-radius: 10px 

box-shadow: 0 0 3px 3px #ABCDEF 

}  

.login h1 {  

margin: 50px 0 

}  

.login-row span {  

font-size: 18px 

}  

.login-row input {  

height: 25px 

line-height: 25px 

padding: 0 10px 

margin: 10px 0 

}  

.btn {  

outline: none 

background-color: aliceblue 

cursor: pointer 

width: 90px 

height: 40px 

border: 1px solid #DDD 

border-radius: 5px 

margin: 30px 20px 

font-size: 16px 

transition: background-color 0.5s 

-webkit-transition: background-color 0.5s 

-moz-transition: background-color 0.5s 

-o-transition: background-color 0.5s 

}  

.btn:hover {  

background-color: antiquewhite 

}  

.login-success {  

font-size: 20px 

padding: 50px 

}  

</style> 

<script> 

var loginBtn, regiBtn 

window.onload = function() {  

loginBtn = document.getElementById("login") 

loginBtn.onclick = rotate 

regiBtn = document.getElementById("regi") 

regiBtn.onclick = rotate 

function rotate() {  

var x = 0 

var panel = document.getElementById("login-panel") 

panel.style.transform = "rotateX(0deg)" 

panel.style.webkitTransform = "rotateX(0deg)" 

var flag = true 

var timer = setInterval(function() {  

if(Math.round(x) >= 90 &&flag) {  

panel.innerHTML = "<p class='login-success'>登陆成功</p>" 

flag = false 

}  

if(Math.round(x) >= 358) {  

panel.style.transform = "rotateX(360deg)" 

panel.style.webkitTransform = "rotateX(360deg)" 

clearInterval(timer) 

return false 

} else {  

x += 2 + (360 - x) / 60 

panel.style.transform = "rotateX(" + x + "deg)" 

panel.style.webkitTransform = "rotateX(" + x + "deg)" 

}  

}, 25) 

}  

</script> 

</head> 

<body> 

<div class="container"> 

<div class="login" id="login-panel"> 

<h1>登陆</h1> 

<div class="login-row"> 

<label for="username"><span>账号:</span></label> 

<input type="text" id="username" name="username"> 

</div> 

<div class="login-row"> 

<label for="password"><span>密码:</span></label> 

<input type="password" id="password" name="password"> 

</div> 

<div class="login-row"> 

<button id="login" class="btn" type="button">登陆</button> 

<button id="regi" class="btn" type="button">注册</button> 

</div> 

</div> 

</div> 

</body> 

</html> 

<style>

.test

        {

            text-shadow:

            1px 1px 0 #CCC,

            2px 2px 0 #CCC, /* end of 2 level deep grey shadow */

            3px 3px 0 #444,

            4px 4px 0 #444,

            5px 5px 0 #444,

            6px 6px 0 #444 /* end of 4 level deep dark shadow */

        }

</style>

<body>

    <h1>3D效果</h1>

</body>        

// 具体效果可以改变颜色值和位移值来实现不同的3d效果