其他html代码
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
css实现一个地图折叠展开动画效果代码
css实现一个地图折叠展开动画效果代码
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
:root {
--shadow-color: 0, 0, 0 ;
--border-map: 1px dashed #6a5542 ;
--shadow-bg: #130903;
--map-img-url: url(//repo.bfw.wiki/bfwrepo/image/6032e655ee722.png);
}
body {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
background: url(//repo.bfw.wiki/bfwrepo/image/6032e554eeb71.png);
}
.map-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
outline: none;
width: 100vw;
height: 100vh;
}
.map-container:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: radial-gradient(transparent 0%, transparent 65%, #000000 100%);
}
.map {
background: #e3d198;
z-index: 13;
transition: all 0.5s ease 0s;
position: relative;
display: flex;
align-items: center;
justify-content: center;
outline: none;
width: 16vw;
height: 30vh;
cursor: pointer;
transform-origin: 0% 0%;
perspective-origin: center;
perspective: 800px ;
border-radius: 5px;
transform-origin: center;
image-rendering: pixelated;
}
.map a {
width: 16vw;
height: 30vh;
}
.map div {
position: absolute;
backface-visibility: hidden;
width: 16vw;
height: 30vh;
perspective-origin: center center;
perspective: 100vw;
background-color: #e3d198;
}
.front-mid {
background: var(--map-img-url) no-repeat center calc(50% - 1px);
z-index: 12;
box-shadow: 0px 10px 10px -5px var(--shadow-bg), 5px 0px 10px -5px var(--shadow-bg), -5px 0px 10px -5px var(--shadow-bg);
border-radius: 3px;
transition: all 0.25s ease 1.5s;
animation: initial-fold 6s 1;
}
.map:hover .front-mid {
box-shadow: 0 0 0 0 #00000000;
border-radius: 0;
transition: all 0.25s ease 0.5s;
}
.front-top {
background: var(--map-img-url) no-repeat center calc(50% + 30vh);
z-index: 11;
transition: all 0.4s ease 1.5s;
transform-origin: center bottom;
transform: rotateX(180deg);
top: -30vh;
border-top: var(--border-map);
margin-top: -1px;
animation: folding-top 6s 1;
}
.map:hover .front-top {
transform: rotateX(0deg);
transition: all 0.4s ease 0.25s;
transform-origin: center bottom;
}
.front-bot {
background: var(--map-img-url) no-repeat center calc(50% - 30vh - 1px);
z-index: 10;
transition: all 0.5s ease 1.25s;
transform-origin: center top;
transform: rotateX(-180deg);
top: 30vh;
border-bottom: var(--border-map);
animation: folding-bot 6s 1;
}
.map:hover .front-bot {
transform: rotateX(0deg);
transition: all 0.5s ease 0.5s;
transform-origin: center top;
}
.map div.left1 {
height: 90vh;
width: 16vw;
top: -30vh;
left: -16vw;
background: var(--map-img-url) no-repeat calc(50% + 16vw) 50%;
transform: rotateY(-180deg);
transform-origin: right center;
transition: all 0.5s ease 1s;
border-bottom: var(--border-map);
border-top: var(--border-map);
margin-top: -1px;
animation: folding-left 6s 1;
}
.map:hover div.left1 {
transform: rotateY(-7deg);
transform-origin: right center;
transition: all 0.5s ease 0.75s;
image-rendering: pixelated;
}
.map div.left2 {
height: 90vh;
width: 16vw;
top: 0vh;
left: -16vw;
background: var(--map-img-url) no-repeat calc(50% + 32vw) 50%;
transform: rotateY(-180deg);
transform-origin: right center;
transition: all 0.5s ease 0.5s;
border-bottom: var(--border-map);
border-top: var(--border-map);
margin-top: -1px;
border-left: var(--border-map);
margin-left: -1px;
border-radius: 3px 0 0 3px;
animation: folding-left2 6s 1;
}
.map:hover div.left2 {
transform: rotateY(15deg);
transform-origin: right center;
transition: all 0.5s ease 1.25s;
image-rendering: pixelated;
}
.map div.right1 {
height: 90vh;
width: 16vw;
top: -30vh;
left: 16vw;
background: var(--map-img-url) no-repeat calc(50% - 16vw) 50%;
transform: rotateY(180deg);
transform-origin: left center;
transition: all 0.5s ease 0.75s;
border-top: var(--border-map);
border-bottom: var(--border-map);
margin-top: -1px;
animation: folding-right 6s 1;
}
.map:hover div.right1 {
transform: rotateY(-7deg);
transform-origin: left center;
transition: all 0.5s ease 1s;
image-rendering: pixelated;
}
.map div.right2 {
height: 90vh;
width: 16vw;
top: 0vh;
left: 16vw;
background: var(--map-img-url) no-repeat calc(50% - 32vw) 50%;
transform: rotateY(180deg);
transform-origin: left center;
transition: all 0.5s ease 0.25s;
border-right: var(--border-map);
border-bottom: var(--border-map);
border-top: var(--border-map);
margin-top: -1px;
margin-right: -1px;
border-radius: 0 3px 3px 0;
animation: folding-right2 6s 1;
}
.map:hover div.right2 {
transform: rotateY(15deg);
transform-origin: left center;
transition: all 0.5s ease 1.5s;
image-rendering: pixelated;
}
.map div:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
opacity: 0.75;
}
.front-top:before {
background: linear-gradient( to right, rgba(var(--shadow-color), 0.30) 0%, rgba(var(--shadow-color), 0.24) 2%, rgba(var(--shadow-color), 0.15) 5%, rgba(var(--shadow-color), 0.00) 28%, rgba(var(--shadow-color), 0.00) 60%, rgba(var(--shadow-color), 0.16) 94%, rgba(var(--shadow-color), 0.10) 98%, rgba(var(--shadow-color), 0.06) 100% ), linear-gradient(to bottom, rgba(var(--shadow-color), 0.02) 0%, rgba(var(--shadow-color), 0.00) 72%, rgba(var(--shadow-color), 0.15) 95%, rgba(var(--shadow-color), 0.24) 100%);
}
.front-mid:before {
background: linear-gradient( to right, rgba(var(--shadow-color), 0.30) 0%, rgba(var(--shadow-color), 0.24) 2%, rgba(var(--shadow-color), 0.15) 5%, rgba(var(--shadow-color), 0.00) 28%, rgba(var(--shadow-color), 0.00) 60%, rgba(var(--shadow-color), 0.16) 94%, rgba(var(--shadow-color), 0.10) 98%, rgba(var(--shadow-color), 0.06) 100% ), linear-gradient(to top, rgba(var(--shadow-color), 0.08) 0%, rgba(var(--shadow-color), 0.00) 40%, rgba(var(--shadow-color), 0.14) 100%);
}
.front-bot:before {
background: linear-gradient( to right, rgba(var(--shadow-color), 0.30) 0%, rgba(var(--shadow-color), 0.24) 2%, rgba(var(--shadow-color), 0.15) 5%, rgba(var(--shadow-color), 0.00) 28%, rgba(var(--shadow-color), 0.00) 60%, rgba(var(--shadow-color), 0.16) 94%, rgba(var(--shadow-color), 0.10) 98%, rgba(var(--shadow-color), 0.06) 100% ), linear-gradient(to bottom, rgba(var(--shadow-color), 0.02) 0%, rgba(var(--shadow-color), 0.00) 72%, rgba(var(--shadow-color), 0.15) 95%, rgba(var(--shadow-color), 0.24) 100%);
box-shadow: 0px 5px 5px 0 var(--shadow-bg);
}
.left1:before {
background: linear-gradient( to right, rgba(var(--shadow-color), 0.06) 0%, rgba(var(--shadow-color), 0.10) 2%, rgba(var(--shadow-color), 0.16) 6%, rgba(var(--shadow-color), 0.00) 40%, rgba(var(--shadow-color), 0.02) 100% );
box-shadow: -5px 5px 5px 0 var(--shadow-bg);
}
.left2:before {
background: linear-gradient( to right, rgba(var(--shadow-color), 0.08) 0%, rgba(var(--shadow-color), 0.02) 20%, rgba(var(--shadow-color), 0.00) 60%, rgba(var(--shadow-color), 0.16) 94%, rgba(var(--shadow-color), 0.10) 98%, rgba(var(--shadow-color), 0.06) 100% );
box-shadow: -5px 5px 5px 0 var(--shadow-bg);
}
.right1:before {
background: linear-gradient( to right, rgba(var(--shadow-color), 0.06) 0%, rgba(var(--shadow-color), 0.10) 2%, rgba(var(--shadow-color), 0.16) 6%, rgba(var(--shadow-color), 0.00) 40%, rgba(var(--shadow-color), 0.02) 100% );
box-shadow: 5px 5px 5px 0 var(--shadow-bg);
}
.right2:before {
background: linear-gradient( to right, rgba(var(--shadow-color), 0.30) 0%, rgba(var(--shadow-color), 0.24) 2%, rgba(var(--shadow-color), 0.15) 5%, rgba(var(--shadow-color), 0.00) 28%, rgba(var(--shadow-color), 0.02) 100% );
box-shadow: 5px 5px 5px 0 var(--shadow-bg);
}
.map div span {
width: 100%;
height: 30vh;
position: absolute;
opacity: 0.75;
}
.map div span + span {
top: 30vh;
}
.map div span + span + span {
top: 60vh;
}
.left1 span {
background: linear-gradient( to right, rgba(var(--shadow-color), 0.06) 0%, rgba(var(--shadow-color), 0.10) 2%, rgba(var(--shadow-color), 0.16) 6%, rgba(var(--shadow-color), 0.00) 40%, rgba(var(--shadow-color), 0.02) 100% ), linear-gradient(to bottom, rgba(var(--shadow-color), 0.02) 0%, rgba(var(--shadow-color), 0.00) 60%, rgba(var(--shadow-color), 0.22) 96%, rgba(var(--shadow-color), 0.08) 100%);
}
.left1 span + span {
background: linear-gradient( to right, rgba(var(--shadow-color), 0.06) 0%, rgba(var(--shadow-color), 0.10) 2%, rgba(var(--shadow-color), 0.16) 6%, rgba(var(--shadow-color), 0.00) 40%, rgba(var(--shadow-color), 0.02) 100% ), linear-gradient(to top, rgba(var(--shadow-color), 0.02) 0%, rgba(var(--shadow-color), 0.00) 60%, rgba(var(--shadow-color), 0.18) 94%, rgba(var(--shadow-color), 0.02) 100%);
}
.left1 span + span + span {
background: linear-gradient( to right, rgba(var(--shadow-color), 0.06) 0%, rgba(var(--shadow-color), 0.10) 2%, rgba(var(--shadow-color), 0.16) 6%, rgba(var(--shadow-color), 0.00) 40%, rgba(var(--shadow-color), 0.02) 100% ), linear-gradient(to bottom, rgba(var(--shadow-color), 0.02) 0%, rgba(var(--shadow-color), 0.00) 60%, rgba(var(--shadow-color), 0.22) 96%, rgba(var(--shadow-color), 0.08) 100%);
}
.left2 span {
background: linear-gradient( to right, rgba(var(--shadow-color), 0.08) 0%, rgba(var(--shadow-color), 0.02) 20%, rgba(var(--shadow-color), 0.00) 60%, rgba(var(--shadow-color), 0.16) 94%, rgba(var(--shadow-color), 0.10) 98%, rgba(var(--shadow-color), 0.06) 100% ), linear-gradient( to bottom, rgba(var(--shadow-color), 0.02) 0%, rgba(var(--shadow-color), 0.00) 72%, rgba(var(--shadow-color), 0.15) 95%, rgba(var(--shadow-color), 0.24) 100% );
}
.left2 span + span {
background: linear-gradient( to right, rgba(var(--shadow-color), 0.08) 0%, rgba(var(--shadow-color), 0.02) 20%, rgba(var(--shadow-color), 0.00) 60%, rgba(var(--shadow-color), 0.16) 94%, rgba(var(--shadow-color), 0.10) 98%, rgba(var(--shadow-color), 0.06) 100% ), linear-gradient( to top, rgba(var(--shadow-color), 0.08) 0%, rgba(var(--shadow-color), 0.00) 40%, rgba(var(--shadow-color), 0.14) 100% );
}
.left2 span + span + span {
background: linear-gradient( to right, rgba(var(--shadow-color), 0.08) 0%, rgba(var(--shadow-color), 0.02) 20%, rgba(var(--shadow-color), 0.00) 60%, rgba(var(--shadow-color), 0.16) 94%, rgba(var(--shadow-color), 0.10) 98%, rgba(var(--shadow-color), 0.06) 100% ), linear-gradient( to bottom, rgba(var(--shadow-color), 0.02) 0%, rgba(var(--shadow-color), 0.00) 72%, rgba(var(--shadow-color), 0.15) 95%, rgba(var(--shadow-color), 0.24) 100% );
}
.right1 span {
background: linear-gradient( to right, rgba(var(--shadow-color), 0.06) 0%, rgba(var(--shadow-color), 0.10) 2%, rgba(var(--shadow-color), 0.16) 6%, rgba(var(--shadow-color), 0.00) 40%, rgba(var(--shadow-color), 0.02) 100% ), linear-gradient( to bottom, rgba(var(--shadow-color), 0.02) 0%, rgba(var(--shadow-color), 0.00) 60%, rgba(var(--shadow-color), 0.22) 96%, rgba(var(--shadow-color), 0.08) 100% );
}
.right1 span + span {
background: linear-gradient( to right, rgba(var(--shadow-color), 0.06) 0%, rgba(var(--shadow-color), 0.10) 2%, rgba(var(--shadow-color), 0.16) 6%, rgba(var(--shadow-color), 0.00) 40%, rgba(var(--shadow-color), 0.02) 100% ), linear-gradient( to top, rgba(var(--shadow-color), 0.02) 0%, rgba(var(--shadow-color), 0.00) 60%, rgba(var(--shadow-color), 0.18) 94%, rgba(var(--shadow-color), 0.02) 100% );
}
.right1 span + span + span {
background: linear-gradient( to right, rgba(var(--shadow-color), 0.06) 0%, rgba(var(--shadow-color), 0.10) 2%, rgba(var(--shadow-color), 0.16) 6%, rgba(var(--shadow-color), 0.00) 40%, rgba(var(--shadow-color), 0.02) 100% ), linear-gradient( to bottom, rgba(var(--shadow-color), 0.02) 0%, rgba(var(--shadow-color), 0.00) 60%, rgba(var(--shadow-color), 0.22) 96%, rgba(var(--shadow-color), 0.08) 100% );
}
.right2 span {
background: linear-gradient( to right, rgba(var(--shadow-color), 0.30) 0%, rgba(var(--shadow-color), 0.24) 2%, rgba(var(--shadow-color), 0.15) 5%, rgba(var(--shadow-color), 0.00) 28%, rgba(var(--shadow-color), 0.02) 100% ), linear-gradient( to bottom, rgba(var(--shadow-color), 0.02) 0%, rgba(var(--shadow-color), 0.00) 72%, rgba(var(--shadow-color), 0.15) 95%, rgba(var(--shadow-color), 0.24) 100% );
}
.right2 span + span {
background: linear-gradient( to right, rgba(var(--shadow-color), 0.30) 0%, rgba(var(--shadow-color), 0.24) 2%, rgba(var(--shadow-color), 0.15) 5%, rgba(var(--shadow-color), 0.00) 28%, rgba(var(--shadow-color), 0.02) 100% ), linear-gradient( to top, rgba(var(--shadow-color), 0.08) 0%, rgba(var(--shadow-color), 0.00) 40%, rgba(var(--shadow-color), 0.14) 100% );
}
.right2 span + span + span {
background: linear-gradient( to right, rgba(var(--shadow-color), 0.30) 0%, rgba(var(--shadow-color), 0.24) 2%, rgba(var(--shadow-color), 0.15) 5%, rgba(var(--shadow-color), 0.00) 28%, rgba(var(--shadow-color), 0.02) 100% ), linear-gradient( to bottom, rgba(var(--shadow-color), 0.02) 0%, rgba(var(--shadow-color), 0.00) 72%, rgba(var(--shadow-color), 0.15) 95%, rgba(var(--shadow-color), 0.24) 100% );
}
.credits {
position: absolute;
bottom: 1vh;
width: 100%;
text-align: center;
font-family: Arial, Helvetica, serif;
font-size: 0.65em;
color: #e2d39a;
text-transform: uppercase;
opacity: 0.5;
text-shadow: 0 -1px 1px #5b4632, 0 1px 1px #6b4c3c;
}
.credits:hover {
opacity: 1;
}
.credits a {
color: #ffcc00;
text-decoration: none;
}
.credits a:hover {
color: #bd78dc;
}
@keyframes folding-top {
0% { transform: rotateX(180deg); }
6.25% { transform: rotateX(0deg); }
93.75% { transform: rotateX(0deg); }
100% { transform: rotateX(180deg); }
}
@keyframes folding-bot {
0% { transform: rotateX(-180deg); }
12.5% { transform: rotateX(0deg); }
87.5% { transform: rotateX(0deg); }
100% { transform: rotateX(-180deg); }
}
@keyframes folding-left {
0% { transform: rotateY(-180deg); }
18.25% { transform: rotateY(-7deg); }
81.75% { transform: rotateY(-7deg); }
100% { transform: rotateY(-180deg); }
}
@keyframes folding-right {
0% { transform: rotateY(180deg); }
25% { transform: rotateY(-7deg); }
75% { transform: rotateY(-7deg); }
100% { transform: rotateY(180deg); }
}
@keyframes folding-left2 {
0% { transform: rotateY(-180deg); }
31.25% { transform: rotateY(15deg); }
68.25% { transform: rotateY(15deg); }
100% { transform: rotateY(-180deg); }
}
@keyframes folding-right2 {
0% { transform: rotateY(180deg); }
37.5% { transform: rotateY(15deg); }
62.5% { transform: rotateY(15deg); }
100% { transform: rotateY(180deg); }
}
@keyframes initial-fold {
0% { box-shadow: 0px 10px 10px -5px var(--shadow-bg), 5px 0px 10px -5px var(--shadow-bg), -5px 0px 10px -5px var(--shadow-bg); border-radius: 3px; transition: all 0.25s ease 0.5s;}
12.5% { box-shadow: 0 0 0 0 #00000000; border-radius: 0; transition: all 0.25s ease 0.5s; }
87.5% { box-shadow: 0 0 0 0 #00000000; border-radius: 0; transition: all 0.25s ease 0.5s; }
100% { box-shadow: 0px 10px 10px -5px var(--shadow-bg), 5px 0px 10px -5px var(--shadow-bg), -5px 0px 10px -5px var(--shadow-bg); border-radius: 3px; transition: all 0.25s ease 0.5s;}
}
</style>
</head>
<body >
<div class="map-container">
<div class="map">
<a href="" >
<div class="front-top"></div>
<div class="front-mid">
<div class="left1">
<span></span>
<span></span>
<span></span>
<div class="left2">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="right1">
<span></span>
<span></span>
<span></span>
<div class="right2">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="front-bot"></div>
</a>
</div>
</div>
</body>
</html>
网友评论0