css3-3d动画1
2022-07-22 本文已影响0人
钢铁萝莉猫
- 闹着玩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>T</title>
<style>
body{
background-color: #000;
width: 100%;
height: 100%;
}
a{
text-decoration: none;
}
.btn-wrap{
display: flex;
justify-content: space-around;
transform-style: preserve-3d;
transform: translateY(150px);
width: 500px;
margin: 0 auto;
position: relative;
}
.btn-wrap > div{
position: relative;
}
.btn-wrap > div:hover::after {
opacity: 1;
}
.btn-wrap > div::after{
content: '';
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -40px;
width: 35px;
height: 10px;
background-image: radial-gradient(#000 35%,aqua 100%);
border-radius: 99%;
transition: all 0.3s;
opacity: 0;
}
.btn-cdp,.btn-map,.btn-login{
display: block;
border-radius: 50%;
background-image: radial-gradient(aqua 10%, rgba(0, 255, 255, 0) 80%,#000 100%);
text-align: center;
cursor: pointer;
animation-direction: alternate;
animation-iteration-count: infinite;
position: relative;
color: #000000;
}
.btn-cdp{
width: 60px;
height: 60px;
line-height: 60px;
animation-name:shape-cdp;
animation-duration: 2s;
}
@keyframes shape-cdp
{
0% {
transform: scale(0.8) translateY(0);
}
100% {
transform: scale(1.5) translateY(-10px);
}
}
.btn-map{
width: 70px;
height: 70px;
line-height: 70px;
animation-name:shape-map;
animation-duration: 2.3s;
animation-delay: 0.5s;
}
@keyframes shape-map
{
0% {
transform: scale(0.7) translateY(0);
}
100% {
transform: scale(1.3) translateY(15px);
}
}
/* .btn-login{
width: 85px;
height: 85px;
line-height: 85px;
animation-name:shape-login;
animation-duration: 2s;
animation-delay: 0.3s;
}
@keyframes shape-login
{
0% {
transform: scale(0.75) translateY(0);
}
100% {
transform: scale(1.4) translateY(-8px);
}
} */
/* ----- */
.canvas {
margin: 50px auto;
padding: 1px;
width: 800px;
height: 800px;
transform-style: preserve-3d;
transform: perspective(500px);
}
.login-wrap {
position: relative;
margin: 0px auto;
margin-top: -45px;
width: 300px;
height: 300px;
/* border: 1px solid #ddd; */
border-radius: 50%;
transform: rotateX(45deg) translateY(200px);
transform-style: preserve-3d;
}
.login {
width: 40px;
height: 40px;
font-size: 12px;
border-radius: 50%;
text-align: center;
color: aqua;
box-shadow: aqua 0 0 16px inset;
line-height: 40px;
display: block;
position: absolute;
top: -22px;
left: -22px;
animation:
moveX 4s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate,
moveY 4s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
transform: rotateX(-45deg);
cursor: pointer;
}
.hello{
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%) rotateX(-45deg);
color: aqua;
}
.login:hover{
animation-play-state: paused;
}
@keyframes moveX {
0% {
left: -42px;
}
100% {
left: 300px;
}
}
@keyframes moveY {
0% {
top: -42px;
}
100% {
top: 300px;
}
}
</style>
</head>
<body>
<div class="canvas">
<div class="login-wrap">
<span class="hello">hello,nuza</span>
<a class="login" href="./login/">login</a>
</div>
<div class="btn-wrap">
<div>
<a class="btn-cdp" href="./cdp/">cdp</a>
</div>
<div>
<a class="btn-map" href="./map/">map</a>
</div>
</div>
<!-- <div class="btn-wrap">
<div>
<a class="btn-cdp" href="./cdp/">cdp</a>
</div>
<div>
<a class="btn-map" href="./map/">map</a>
</div>
<div>
<a class="btn-login" href="./login/">login</a>
</div>
</div> -->
</div>
</body>
</html>
