css3中插入地图,CSS3 地图展开动画

最新推荐文章于 2022-12-28 09:05:41 发布
最新推荐文章于 2022-12-28 09:05:41 发布
阅读量392 收藏
点赞数
文章标签： 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;

}

}

约翰福特
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简单的CSS3地图位置标记动画特效
06-11
这是一款简单的带有动画效果的CSS3地图位置标记动画特效，CSS3位置图标标注代码。
css样式 插入地图插件
jack_rose_me的博客
12-16 405
<div id="mapContainer" style={{ position: "absolute", top: "0", bottom: "0", width: "100%", zIndex: 1 }}></div>
css雷达+3D地图
08-23
非常酷炫的雷达扫描和3D地图，css+js+html前端学习专用
纯CSS3地图位置标记动画特效.zip
07-11
纯CSS3地图位置标记动画特效是一款带有动画效果的CSS3位置标注特效。
HTML+CSS3地图动画
氧的博客
06-25 735
图片素材 效果如下图： HTML <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>地图</title> <link rel="stylesheet" type="text/css" href="index.css"/> <
css3的动画特效之动画序列（animation）
12-13
在速度曲线和播放次数之间还可以插入一个时间参数，用以设置动画延迟的时间。如希望使图标在1秒钟后再开始旋转，并旋转两次，代码如下 .close:hover::before{ -webkit-animation: spin 1s linear 1s 2; animation...
CSS3 实现弹幕的示例代码
09-24
示例代码中提到，使用`transform`和`transition`在移动设备上的性能优于使用jQuery的`animate`方法，因为CSS3动画通常由GPU加速，能够减少CPU的负担，特别是在高分辨率和多核设备上，效果更为明显。 综上所述，这...
CSS3 animation实现逐帧动画效果
09-24
CSS3 动画（Animation）是现代网页设计中的一个重要工具，它允许开发者创建丰富的动态效果，包括逐帧动画。在本篇中，我们将深入探讨如何利用CSS3的animation属性来实现逐帧动画效果。 首先，CSS3的`animation`属性...
CSS3 制作旋转的大风车(充满童年回忆)
09-25
很久以前的作品,于是就使用css3做了个于是就做了个充满童年回忆的大风车的大风车,感兴趣的朋友可以了解下啊，或许对你学习css3动画有所帮助，好了，话不多说，看代码
js+css3实现简单时钟特效
10-14
在本文中，我们将探讨如何使用JavaScript（JS）和CSS3技术来实现一个简单而美观的时钟特效。这个时钟不仅能够动态显示当前时间，而且通过利用CSS3的特性，如变换（transform）、边框半径（border-radius）、阴影...
html3D地图
08-15
html3D地图,下载下来直接可以使用观看，3D效果非常好。
CSS3地图活跃热点布局动画特效特效代码
03-20
CSS3地图活跃热点布局动画特效是一款css3基于animation属性制作中国地图活跃热点动画布局效果代码。
网站地图 css and html
03-20
NULL 博文链接：https://rwg109.iteye.com/blog/760101
中国省份地图CSS实现
08-08
中国省份地图CSS实现.rar
css3定点地图
wuyuderen_lpt的博客
06-14 848
如何制作一个定点地图效果链接一、添加css&lt;style type="text/css"&gt; *{margin:0px 0px;padding:0px 0px;} /* 添加背景图 */ .hsbj{height:760px;background:url(images/map_balck_whole_bg.jpg) center no-repeat;} .h...
css3 地图展开,CSS3 实现侧边栏展开收起动画
weixin_39607798的博客
08-04 173
@keyframes规则用于创建动画。@keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果@keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：规定动画的名称规定动画的时长animationanimation 属性是一个简写属性，用于设置动画属性：animation-...
CSS Image Map —— CSS图片地图
Sornets' Blog
07-14 2894
记得在刚刚学习CSS的时候，博主曾经也顺带着学习过CSS Image Map技术，就是通过那几个标签来实现。当时博主作为一个前端小白都感觉出这个方法的繁琐，相信大家在需要做图片地图功能的时候也不喜欢这样做。 今天我就总结一下前一段时间在实习中学习到的一个完成CSS图片地图的思路。 What is 图片地图 ? 可能还有一些朋友不知道图片地图是什么，我就简短的解释一下： 图片
打开地图小册子CSS动画
ICode联盟
02-10 77
下载地址 打开地图小册子CSS动画，向两侧打开书本的动画特效。 dd:
CSS 与 地图可视化 三维跳动注记 （十二）
haibalai2009的博客
12-28 129
css
css3图片地球周转旋转动画特效
最新发布
09-06
接下来，我们使用CSS3中的旋转动画特效来实现地球的周转旋转效果。我们可以通过@keyframes规则定义一个旋转动画，并命名为"rotate"。在这个动画中，我们可以使用transform属性来对图片进行旋转变换。 具体实现地球...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值