css3中插入地图,CSS3 地图展开动画
CSS
语言：
CSSSCSS
确定
html,
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #345761;
overflow: hidden;
}
p {
margin-top: 3rem;
color: #c6d7dc;
text-align: center;
font-family: monospace;
font-size: 1.1rem;
}
.details-on-map {
position: relative;
width: 41rem;
height: 0rem;
margin: 2rem auto 0;
}
#map {
position: absolute;
top: 0;
box-sizing: content-box;
border: 0.5rem solid white;
height: 20rem;
width: 40rem;
border-radius: 0.5rem;
opacity: 0;
visibility: hidden;
}
.paper-map {
position: absolute;
top: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-perspective: 150rem;
perspective: 150rem;
opacity: 0;
}
.map-side {
box-sizing: content-box;
width: 10rem;
height: 20rem;
border: 0.5rem solid white;
background-image: url(https://s31.postimg.org/yxpm4cu4b/map.png);
background-color: rgba(233, 229, 220, 1);
outline: 1px solid transparent;
overflow: hidden;
}
.map-side::before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
background-color: rgba(233, 229, 220, 0.5);
box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.1);
content: "";
}
.map-side:nth-of-type(1) {
border-right: none;
border-radius: 0.5rem 0 0 0.5rem;
background-position: 0 0;
-webkit-transform: translateX(5.05rem) rotateY(-60deg);
transform: translateX(5.05rem) rotateY(-60deg);
}
.map-side:nth-of-type(2) {
border-right: none;
border-left: none;
background-position: -10rem 0;
-webkit-transform: translateX(5rem) rotateY(60deg);
transform: translateX(5rem) rotateY(60deg);
}
.map-side:nth-of-type(3) {
border-right: none;
border-left: none;
background-position: -20rem 0;
-webkit-transform: translateX(-5rem) rotateY(-60deg);
transform: translateX(-5rem) rotateY(-60deg);
}
.map-side:nth-of-type(4) {
border-left: none;
border-radius: 0 0.5rem 0.5rem 0;
background-position: -30rem 0;
-webkit-transform: translateX(-5.05rem) rotateY(60deg);
transform: translateX(-5.05rem) rotateY(60deg);
}
.show-map.details-on-map {
height: 21rem;
}
.show-map #map {
visibility: visible;
-webkit-animation: fadeIn 0.5s 1.25s linear forwards;
animation: fadeIn 0.5s 1.25s linear forwards;
}
.show-map .paper-map {
-webkit-animation: paperMapFadeIn 0.33s ease-in forwards, fadeOut 1s 3.5s linear forwards;
animation: paperMapFadeIn 0.33s ease-in forwards, fadeOut 1s 3.5s linear forwards;
}
.show-map .map-side::before {
-webkit-animation: fadeOut 0.5s 0.33s forwards ease-out;
animation: fadeOut 0.5s 0.33s forwards ease-out;
}
.show-map .map-side:nth-of-type(1) {
-webkit-animation: openMapOuter 0.33s 0.33s linear forwards;
animation: openMapOuter 0.33s 0.33s linear forwards;
}
.show-map .map-side:nth-of-type(2) {
-webkit-animation: openMapInnerLeft 0.33s 0.33s linear forwards;
animation: openMapInnerLeft 0.33s 0.33s linear forwards;
}
.show-map .map-side:nth-of-type(3) {
-webkit-animation: openMapInnerRight 0.33s 0.33s linear forwards;
animation: openMapInnerRight 0.33s 0.33s linear forwards;
}
.show-map .map-side:nth-of-type(4) {
-webkit-animation: openMapOuter 0.33s 0.33s linear forwards;
animation: openMapOuter 0.33s 0.33s linear forwards;
}
.map-side:nth-of-type(1),
.map-side:nth-of-type(3) {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.3);
}
.map-side:nth-of-type(2),
.map-side:nth-of-type(4) {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.3);
}
@-webkit-keyframes openMapOuter {
100% {
-webkit-transform: translateX(0) rotateY(0deg);
transform: translateX(0) rotateY(0deg);
box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.1);
}
}
@keyframes openMapOuter {
100% {
-webkit-transform: translateX(0) rotateY(0deg);
transform: translateX(0) rotateY(0deg);
box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.1);
}
}
@-webkit-keyframes openMapInnerLeft {
0% {
-webkit-transform: translateX(5rem) rotateY(60deg);
transform: translateX(5rem) rotateY(60deg);
}
20% {
-webkit-transform: translateX(4rem) rotateY(53deg);
transform: translateX(4rem) rotateY(53deg);
}
38% {
-webkit-transform: translateX(3.1rem) rotateY(46.2deg);
transform: translateX(3.1rem) rotateY(46.2deg);
}
50% {
-webkit-transform: translateX(2.5rem) rotateY(41.5deg);
transform: translateX(2.5rem) rotateY(41.5deg);
}
65% {
-webkit-transform: translateX(1.75rem) rotateY(34.5deg);
transform: translateX(1.75rem) rotateY(34.5deg);
}
75% {
-webkit-transform: translateX(1.25rem) rotateY(29deg);
transform: translateX(1.25rem) rotateY(29deg);
}
83% {
-webkit-transform: translateX(0.85rem) rotateY(23.8deg);
transform: translateX(0.85rem) rotateY(23.8deg);
}
90% {
-webkit-transform: translateX(0.5rem) rotateY(18.1deg);
transform: translateX(0.5rem) rotateY(18.1deg);
}
95% {
-webkit-transform: translateX(0.25rem) rotateY(12.8deg);
transform: translateX(0.25rem) rotateY(12.8deg);
}
98% {
-webkit-transform: translateX(0.1rem) rotateY(8deg);
transform: translateX(0.1rem) rotateY(8deg);
}
99% {
-webkit-transform: translateX(0.05rem) rotateY(5deg);
transform: translateX(0.05rem) rotateY(5deg);
}
100% {
-webkit-transform: translateX(0) rotateY(0);
transform: translateX(0) rotateY(0);
box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.1);
}
}
@keyframes openMapInnerLeft {
0% {
-webkit-transform: translateX(5rem) rotateY(60deg);
transform: translateX(5rem) rotateY(60deg);
}
20% {
-webkit-transform: translateX(4rem) rotateY(53deg);
transform: translateX(4rem) rotateY(53deg);
}
38% {
-webkit-transform: translateX(3.1rem) rotateY(46.2deg);
transform: translateX(3.1rem) rotateY(46.2deg);
}
50% {
-webkit-transform: translateX(2.5rem) rotateY(41.5deg);
transform: translateX(2.5rem) rotateY(41.5deg);
}
65% {
-webkit-transform: translateX(1.75rem) rotateY(34.5deg);
transform: translateX(1.75rem) rotateY(34.5deg);
}
75% {
-webkit-transform: translateX(1.25rem) rotateY(29deg);
transform: translateX(1.25rem) rotateY(29deg);
}
83% {
-webkit-transform: translateX(0.85rem) rotateY(23.8deg);
transform: translateX(0.85rem) rotateY(23.8deg);
}
90% {
-webkit-transform: translateX(0.5rem) rotateY(18.1deg);
transform: translateX(0.5rem) rotateY(18.1deg);
}
95% {
-webkit-transform: translateX(0.25rem) rotateY(12.8deg);
transform: translateX(0.25rem) rotateY(12.8deg);
}
98% {
-webkit-transform: translateX(0.1rem) rotateY(8deg);
transform: translateX(0.1rem) rotateY(8deg);
}
99% {
-webkit-transform: translateX(0.05rem) rotateY(5deg);
transform: translateX(0.05rem) rotateY(5deg);
}
100% {
-webkit-transform: translateX(0) rotateY(0);
transform: translateX(0) rotateY(0);
box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.1);
}
}
@-webkit-keyframes openMapInnerRight {
0% {
-webkit-transform: translateX(-5rem) rotateY(-60deg);
transform: translateX(-5rem) rotateY(-60deg);
}
20% {
-webkit-transform: translateX(-4rem) rotateY(-53deg);
transform: translateX(-4rem) rotateY(-53deg);
}
38% {
-webkit-transform: translateX(-3.1rem) rotateY(-46.2deg);
transform: translateX(-3.1rem) rotateY(-46.2deg);
}
50% {
-webkit-transform: translateX(-2.5rem) rotateY(-41.5deg);
transform: translateX(-2.5rem) rotateY(-41.5deg);
}
65% {
-webkit-transform: translateX(-1.75rem) rotateY(-34.5deg);
transform: translateX(-1.75rem) rotateY(-34.5deg);
}
75% {
-webkit-transform: translateX(-1.25rem) rotateY(-29deg);
transform: translateX(-1.25rem) rotateY(-29deg);
}
83% {
-webkit-transform: translateX(-0.85rem) rotateY(-23.8deg);
transform: translateX(-0.85rem) rotateY(-23.8deg);
}
90% {
-webkit-transform: translateX(-0.5rem) rotateY(-18.1deg);
transform: translateX(-0.5rem) rotateY(-18.1deg);
}
95% {
-webkit-transform: translateX(-0.25rem) rotateY(-12.8deg);
transform: translateX(-0.25rem) rotateY(-12.8deg);
}
98% {
-webkit-transform: translateX(-0.1rem) rotateY(-8deg);
transform: translateX(-0.1rem) rotateY(-8deg);
}
99% {
-webkit-transform: translateX(-0.05rem) rotateY(-5deg);
transform: translateX(-0.05rem) rotateY(-5deg);
}
100% {
-webkit-transform: translateX(0) rotateY(0);
transform: translateX(0) rotateY(0);
box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.1);
}
}
@keyframes openMapInnerRight {
0% {
-webkit-transform: translateX(-5rem) rotateY(-60deg);
transform: translateX(-5rem) rotateY(-60deg);
}
20% {
-webkit-transform: translateX(-4rem) rotateY(-53deg);
transform: translateX(-4rem) rotateY(-53deg);
}
38% {
-webkit-transform: translateX(-3.1rem) rotateY(-46.2deg);
transform: translateX(-3.1rem) rotateY(-46.2deg);
}
50% {
-webkit-transform: translateX(-2.5rem) rotateY(-41.5deg);
transform: translateX(-2.5rem) rotateY(-41.5deg);
}
65% {
-webkit-transform: translateX(-1.75rem) rotateY(-34.5deg);
transform: translateX(-1.75rem) rotateY(-34.5deg);
}
75% {
-webkit-transform: translateX(-1.25rem) rotateY(-29deg);
transform: translateX(-1.25rem) rotateY(-29deg);
}
83% {
-webkit-transform: translateX(-0.85rem) rotateY(-23.8deg);
transform: translateX(-0.85rem) rotateY(-23.8deg);
}
90% {
-webkit-transform: translateX(-0.5rem) rotateY(-18.1deg);
transform: translateX(-0.5rem) rotateY(-18.1deg);
}
95% {
-webkit-transform: translateX(-0.25rem) rotateY(-12.8deg);
transform: translateX(-0.25rem) rotateY(-12.8deg);
}
98% {
-webkit-transform: translateX(-0.1rem) rotateY(-8deg);
transform: translateX(-0.1rem) rotateY(-8deg);
}
99% {
-webkit-transform: translateX(-0.05rem) rotateY(-5deg);
transform: translateX(-0.05rem) rotateY(-5deg);
}
100% {
-webkit-transform: translateX(0) rotateY(0);
transform: translateX(0) rotateY(0);
box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.1);
}
}
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-webkit-keyframes fadeIn {
to {
opacity: 1;
}
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
@-webkit-keyframes paperMapFadeIn {
0% {
-webkit-transform: scale(0, 0.5);
transform: scale(0, 0.5);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes paperMapFadeIn {
0% {
-webkit-transform: scale(0, 0.5);
transform: scale(0, 0.5);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
css3中插入地图,CSS3 地图展开动画相关推荐
- css3中的渐变效果及花斑动画的实现
大家好,这里是demo软件园,今天为大家分享的是css3中的渐变效果. css3中的渐变需要注意的是渐变的是图片而不是颜色,而渐变又分为两种:线性渐变与径向渐变,今天我们重点介绍的是线性渐变. 1.线 ...
- 原 CSS3中的过渡,css3之过渡
CSS3的过渡和转换 CSS3的过渡和转换 1.过渡 什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性 描述 css transition 简写属性,用 ...
- 如何在Excel中插入可以播放的GIF动画
Q:如何在工作表中插入GIF动画? A:如下例,在工作簿同目录中存有名为1.GIF的动画文件 .插入后仅仅插入了连接,并非真正嵌入了GIF文件.所以如果要在其它地方使用,GIF文件还要随着工作簿一起复 ...
- Excel中插入自定义数据地图
数据: XXXX大学shp格式数据 一. shp数据转为EMF文件 使用ArcGIS打开所有要转化的文件 文件-导出地图-选择EMF格式 二.EXCEL插入EMF excel中: 插入-图片:选择刚刚 ...
- css3中的虚线,CSS3动画中的虚线边框动画
小编典典 CSS可以做到这一点,并且在使用多个背景并使用动画更改其位置时非常简单. .border { height: 100px; width: 200px; background: linear- ...
- 在CAD中插入谷歌地球卫星地图
本文主要介绍如何在CAD中插入谷歌地球卫星地图,作为参照光栅图像.谷歌地球卫星地图使用"迈高图-地图数据下载器"(以下简称:迈高图)下载.迈高图会给出相关插入参数(插入点和缩放比例 ...
- 京东css3动画全屏海报_CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
最近在做项目时,发现CSS3中关于动画的技术,自己很少运用在项目中,平时一些列表块的收缩和展开动画效果,几乎都是使用 display 的 none 和 block,或者 visibility 的 hi ...
- CSS3之利用选择器和content属性在页面中插入内容
CSS3之使用选择器在页面中插入内容 1. 使用选择器来插入内容:例, h2:before{ content:'COLUMN'; color:white: background-color:o ...
- 在网页中插入百度地图
在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api. 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/creatmap/ ...
- 在网页中插入百度地图(实例)
步骤 1 2 3 如何在网页中插入百度地图呢? 2.切换城市,搜索需标注位置.(如下图 方法/步骤 1.进入:http://api.map.baidu.com/lbsapi/creatmap/(创建地 ...
最新文章
- 百度二级网页打不开_网页打不开，原因在这里！
- JavaScript值得注意的小知识点
- java触发full gc的几种情况概述
- Android 源码VecotorDrawable
- 安卓实现定位功能的4种方式
- [深度应用]·实战掌握Dlib人脸识别开发教程
- 模拟UIWebView
- 腾讯开源物联网操作系统 TencentOS tiny，最小体积 1.8KB！
- Promise--优雅的异步回调解决方案
- 【Unity】UGUI无法修改UI元素的Pivot锚点位置
- java美图秀秀,【美图秀秀和Java手机游戏模拟器哪个好用】美图秀秀和Java手机游戏模拟器对比－ZOL下载...
- 计算机无法安装应用,电脑没法安装软件?教您解决电脑没法安装软件
- python-opencv视频转图片+图片转视频（步骤详解）（亲测有效）
- word2013 打开一个新文档，之前打开的最小化的文档也会弹出来？
- 女孩起名字：诗经中惊艳的女孩名字
- 什么是CS、RS、ESD、EFT
- IMDB评出来的100部最难看的电影排行榜
- 人工智能、机器学习和深度学习的区别与联系
- zotero如何用markdown记笔记
- windows 1903用linux使用,Win10 build 1903中的WSL Update允许您从Windows访问Linux文件