css实现一个地图折叠展开动画效果代码
代码语言：html
所属分类：动画
代码描述：css实现一个地图折叠展开动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!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.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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代码库
Lisp代码库
网友评论0