From 67d326d365cd484ad11880f6dcbc8f50bda88b2b Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期四, 11 三月 2021 18:32:02 +0800
Subject: [PATCH] 弹框增加了效果
---
/dev/null | 1 -
public/index.html | 4 +++-
src/assets/css/map/map-popup.less | 6 ++++--
3 files changed, 7 insertions(+), 4 deletions(-)
diff --git a/public/assets/css/map/custom-popup.css b/public/assets/css/map/custom-popup.css
deleted file mode 100644
index cf742ef..0000000
--- a/public/assets/css/map/custom-popup.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.custom-popup .leaflet-popup-content-wrapper {
- background-color: rgba(14, 45, 84, 0.9);
- color: #ffffff;
-}
-.custom-popup .leaflet-popup-content-wrapper, .leaflet-popup-tip{
- background-color: rgba(14, 45, 84, 0.9);
-}
-.custom-popup a.leaflet-popup-close-button{
- /**/
- text-align: left;
-}
-
-.custom-popup .leaflet-popup-content{
- text-align: left;
-}
-.leaflet-div-icon{
- background: transparent;
- border:none;
-}
-.leaflet-popup-content-wrapper{
- background: transparent !important;
-}
-.custom-popup .leaflet-popup-tip{
- background-color: #3180a1 ;
-}
-.custom-popup .leaflet-popup-content{
- padding: 0 ;
- margin: 0 ;
- /*margin: -5px -5px !important;*/
-}
-
-.tipBgColor {
- background: #F4DED4;
- font-size: 10px;
- /*height: 22px;*/
-}
diff --git a/public/assets/css/map/magic.min.css b/public/assets/css/map/magic.min.css
deleted file mode 100644
index 1cf6de2..0000000
--- a/public/assets/css/map/magic.min.css
+++ /dev/null
@@ -1 +0,0 @@
-@charset "UTF-8";.magictime{animation-duration:1s;animation-fill-mode:both}.puffIn{animation-name:puffIn}@keyframes puffIn{0%{opacity:0;transform-origin:50% 50%;transform:scale(2,2);filter:blur(2px)}100%{opacity:1;transform-origin:50% 50%;transform:scale(1,1);filter:blur(0)}}.puffOut{animation-name:puffOut}@keyframes puffOut{0%{opacity:1;transform-origin:50% 50%;transform:scale(1,1);filter:blur(0)}100%{opacity:0;transform-origin:50% 50%;transform:scale(2,2);filter:blur(2px)}}.vanishIn{animation-name:vanishIn}@keyframes vanishIn{0%{opacity:0;transform-origin:50% 50%;transform:scale(2,2);filter:blur(90px)}100%{opacity:1;transform-origin:50% 50%;transform:scale(1,1);filter:blur(0)}}.vanishOut{animation-name:vanishOut}@keyframes vanishOut{0%{opacity:1;transform-origin:50% 50%;transform:scale(1,1);filter:blur(0)}100%{opacity:0;transform-origin:50% 50%;transform:scale(2,2);filter:blur(20px)}}.boingInUp{animation-name:boingInUp}@keyframes boingInUp{0%{opacity:0;transform-origin:50% 0;transform:perspective(800px) rotateX(-90deg)}50%{opacity:1;transform-origin:50% 0;transform:perspective(800px) rotateX(50deg)}100%{opacity:1;transform-origin:50% 0;transform:perspective(800px) rotateX(0)}}.boingOutDown{animation-name:boingOutDown}@keyframes boingOutDown{0%{opacity:1;transform-origin:100% 100%;transform:perspective(800px) rotateX(0) rotateY(0)}20%{opacity:1;transform-origin:100% 100%;transform:perspective(800px) rotateX(0) rotateY(10deg)}30%{opacity:1;transform-origin:0 100%;transform:perspective(800px) rotateX(0) rotateY(0)}40%{opacity:1;transform-origin:0 100%;transform:perspective(800px) rotateX(10deg) rotateY(10deg)}100%{opacity:0;transform-origin:100% 100%;transform:perspective(800px) rotateX(90deg) rotateY(0)}}.bombLeftOut{animation-name:bombLeftOut}@keyframes bombLeftOut{0%{opacity:1;transform-origin:50% 50%;transform:rotate(0);filter:blur(0)}50%{opacity:1;transform-origin:-100% 50%;transform:rotate(-160deg);filter:blur(0)}100%{opacity:0;transform-origin:-100% 50%;transform:rotate(-160deg);filter:blur(20px)}}.bombRightOut{animation-name:bombRightOut}@keyframes bombRightOut{0%{opacity:1;transform-origin:50% 50%;transform:rotate(0);filter:blur(0)}50%{opacity:1;transform-origin:200% 50%;transform:rotate(160deg);filter:blur(0)}100%{opacity:0;transform-origin:200% 50%;transform:rotate(160deg);filter:blur(20px)}}.magic{animation-name:magic}@keyframes magic{0%{opacity:1;transform-origin:100% 200%;transform:scale(1,1) rotate(0)}100%{opacity:0;transform-origin:200% 500%;transform:scale(0,0) rotate(270deg)}}.swap{animation-name:swap}@keyframes swap{0%{opacity:0;transform-origin:0 100%;transform:scale(0,0) translate(-700px,0)}100%{opacity:1;transform-origin:100% 100%;transform:scale(1,1) translate(0,0)}}.twisterInDown{animation-name:twisterInDown}@keyframes twisterInDown{0%{opacity:0;transform-origin:0 100%;transform:scale(0,0) rotate(360deg) translateY(-100%)}30%{transform-origin:0 100%;transform:scale(0,0) rotate(360deg) translateY(-100%)}100%{opacity:1;transform-origin:100% 100%;transform:scale(1,1) rotate(0) translateY(0)}}.twisterInUp{animation-name:twisterInUp}@keyframes twisterInUp{0%{opacity:0;transform-origin:100% 0;transform:scale(0,0) rotate(360deg) translateY(100%)}30%{transform-origin:100% 0;transform:scale(0,0) rotate(360deg) translateY(100%)}100%{opacity:1;transform-origin:0 0;transform:scale(1,1) rotate(0) translateY(0)}}.foolishIn{animation-name:foolishIn}@keyframes foolishIn{0%{opacity:0;transform-origin:50% 50%;transform:scale(0,0) rotate(360deg)}20%{opacity:1;transform-origin:0 100%;transform:scale(.5,.5) rotate(0)}40%{opacity:1;transform-origin:100% 100%;transform:scale(.5,.5) rotate(0)}60%{opacity:1;transform-origin:0;transform:scale(.5,.5) rotate(0)}80%{opacity:1;transform-origin:0 0;transform:scale(.5,.5) rotate(0)}100%{opacity:1;transform-origin:50% 50%;transform:scale(1,1) rotate(0)}}.foolishOut{animation-name:foolishOut}@keyframes foolishOut{0%{opacity:1;transform-origin:50% 50%;transform:scale(1,1) rotate(360deg)}20%{opacity:1;transform-origin:0 0;transform:scale(.5,.5) rotate(0)}40%{opacity:1;transform-origin:100% 0;transform:scale(.5,.5) rotate(0)}60%{opacity:1;transform-origin:0;transform:scale(.5,.5) rotate(0)}80%{opacity:1;transform-origin:0 100%;transform:scale(.5,.5) rotate(0)}100%{opacity:0;transform-origin:50% 50%;transform:scale(0,0) rotate(0)}}.holeOut{animation-name:holeOut}@keyframes holeOut{0%{opacity:1;transform-origin:50% 50%;transform:scale(1,1) rotateY(0)}100%{opacity:0;transform-origin:50% 50%;transform:scale(0,0) rotateY(180deg)}}.swashIn{animation-name:swashIn}@keyframes swashIn{0%{opacity:0;transform-origin:50% 50%;transform:scale(0,0)}90%{opacity:1;transform-origin:50% 50%;transform:scale(.9,.9)}100%{opacity:1;transform-origin:50% 50%;transform:scale(1,1)}}.swashOut{animation-name:swashOut}@keyframes swashOut{0%{opacity:1;transform-origin:50% 50%;transform:scale(1,1)}80%{opacity:1;transform-origin:50% 50%;transform:scale(.9,.9)}100%{opacity:0;transform-origin:50% 50%;transform:scale(0,0)}}.spaceInDown{animation-name:spaceInDown}@keyframes spaceInDown{0%{opacity:0;transform-origin:50% 100%;transform:scale(.2) translate(0,200%)}100%{opacity:1;transform-origin:50% 100%;transform:scale(1) translate(0,0)}}.spaceInLeft{animation-name:spaceInLeft}@keyframes spaceInLeft{0%{opacity:0;transform-origin:0 50%;transform:scale(.2) translate(-200%,0)}100%{opacity:1;transform-origin:0 50%;transform:scale(1) translate(0,0)}}.spaceInRight{animation-name:spaceInRight}@keyframes spaceInRight{0%{opacity:0;transform-origin:100% 50%;transform:scale(.2) translate(200%,0)}100%{opacity:1;transform-origin:100% 50%;transform:scale(1) translate(0,0)}}.spaceInUp{animation-name:spaceInUp}@keyframes spaceInUp{0%{opacity:0;transform-origin:50% 0;transform:scale(.2) translate(0,-200%)}100%{opacity:1;transform-origin:50% 0;transform:scale(1) translate(0,0)}}.spaceOutDown{animation-name:spaceOutDown}@keyframes spaceOutDown{0%{opacity:1;transform-origin:50% 100%;transform:scale(1) translate(0,0)}100%{opacity:0;transform-origin:50% 100%;transform:scale(.2) translate(0,200%)}}.spaceOutLeft{animation-name:spaceOutLeft}@keyframes spaceOutLeft{0%{opacity:1;transform-origin:0 50%;transform:scale(1) translate(0,0)}100%{opacity:0;transform-origin:0 50%;transform:scale(.2) translate(-200%,0)}}.spaceOutRight{animation-name:spaceOutRight}@keyframes spaceOutRight{0%{opacity:1;transform-origin:100% 50%;transform:scale(1) translate(0,0)}100%{opacity:0;transform-origin:100% 50%;transform:scale(.2) translate(200%,0)}}.spaceOutUp{animation-name:spaceOutUp}@keyframes spaceOutUp{0%{opacity:1;transform-origin:50% 0;transform:scale(1) translate(0,0)}100%{opacity:0;transform-origin:50% 0;transform:scale(.2) translate(0,-200%)}}.perspectiveDown{animation-name:perspectiveDown}@keyframes perspectiveDown{0%{transform-origin:0 100%;transform:perspective(800px) rotateX(0)}100%{transform-origin:0 100%;transform:perspective(800px) rotateX(-180deg)}}.perspectiveDownReturn{animation-name:perspectiveDownReturn}@keyframes perspectiveDownReturn{0%{transform-origin:0 100%;transform:perspective(800px) rotateX(-180deg)}100%{transform-origin:0 100%;transform:perspective(800px) rotateX(0)}}.perspectiveLeft{animation-name:perspectiveLeft}@keyframes perspectiveLeft{0%{transform-origin:0 0;transform:perspective(800px) rotateY(0)}100%{transform-origin:0 0;transform:perspective(800px) rotateY(-180deg)}}.perspectiveLeftReturn{animation-name:perspectiveLeftReturn}@keyframes perspectiveLeftReturn{0%{transform-origin:0 0;transform:perspective(800px) rotateY(-180deg)}100%{transform-origin:0 0;transform:perspective(800px) rotateY(0)}}.perspectiveRight{animation-name:perspectiveRight}@keyframes perspectiveRight{0%{transform-origin:100% 0;transform:perspective(800px) rotateY(0)}100%{transform-origin:100% 0;transform:perspective(800px) rotateY(180deg)}}.perspectiveRightReturn{animation-name:perspectiveRightReturn}@keyframes perspectiveRightReturn{0%{transform-origin:100% 0;transform:perspective(800px) rotateY(180deg)}100%{transform-origin:100% 0;transform:perspective(800px) rotateY(0)}}.perspectiveUp{animation-name:perspectiveUp}@keyframes perspectiveUp{0%{transform-origin:0 0;transform:perspective(800px) rotateX(0)}100%{transform-origin:0 0;transform:perspective(800px) rotateX(180deg)}}.perspectiveUpReturn{animation-name:perspectiveUpReturn}@keyframes perspectiveUpReturn{0%{transform-origin:0 0;transform:perspective(800px) rotateX(180deg)}100%{transform-origin:0 0;transform:perspective(800px) rotateX(0)}}.rotateDown{animation-name:rotateDown}@keyframes rotateDown{0%{opacity:1;transform-origin:0 0;transform:perspective(800px) rotateX(0) translateZ(0)}100%{opacity:0;transform-origin:50% 100%;transform:perspective(800px) rotateX(-180deg) translateZ(300px)}}.rotateLeft{animation-name:rotateLeft}@keyframes rotateLeft{0%{opacity:1;transform-origin:0 0;transform:perspective(800px) rotateY(0) translateZ(0)}100%{opacity:0;transform-origin:50% 0;transform:perspective(800px) rotateY(180deg) translateZ(300px)}}.rotateRight{animation-name:rotateRight}@keyframes rotateRight{0%{opacity:1;transform-origin:0 0;transform:perspective(800px) rotateY(0) translate3d(0)}100%{opacity:0;transform-origin:50% 0;transform:perspective(800px) rotateY(-180deg) translateZ(150px)}}.rotateUp{animation-name:rotateUp}@keyframes rotateUp{0%{opacity:1;transform-origin:0 0;transform:perspective(800px) rotateX(0) translateZ(0)}100%{opacity:0;transform-origin:50% 0;transform:perspective(800px) rotateX(180deg) translateZ(100px)}}.slideDown{animation-name:slideDown}@keyframes slideDown{0%{transform-origin:0 0;transform:translateY(0)}100%{transform-origin:0 0;transform:translateY(100%)}}.slideDownReturn{animation-name:slideDownReturn}@keyframes slideDownReturn{0%{transform-origin:0 0;transform:translateY(100%)}100%{transform-origin:0 0;transform:translateY(0)}}.slideLeft{animation-name:slideLeft}@keyframes slideLeft{0%{transform-origin:0 0;transform:translateX(0)}100%{transform-origin:0 0;transform:translateX(-100%)}}.slideLeftReturn{animation-name:slideLeftReturn}@keyframes slideLeftReturn{0%{transform-origin:0 0;transform:translateX(-100%)}100%{transform-origin:0 0;transform:translateX(0)}}.slideRight{animation-name:slideRight}@keyframes slideRight{0%{transform-origin:0 0;transform:translateX(0)}100%{transform-origin:0 0;transform:translateX(100%)}}.slideRightReturn{animation-name:slideRightReturn}@keyframes slideRightReturn{0%{transform-origin:0 0;transform:translateX(100%)}100%{transform-origin:0 0;transform:translateX(0)}}.slideUp{animation-name:slideUp}@keyframes slideUp{0%{transform-origin:0 0;transform:translateY(0)}100%{transform-origin:0 0;transform:translateY(-100%)}}.slideUpReturn{animation-name:slideUpReturn}@keyframes slideUpReturn{0%{transform-origin:0 0;transform:translateY(-100%)}100%{transform-origin:0 0;transform:translateY(0)}}.openDownLeft{animation-name:openDownLeft}@keyframes openDownLeft{0%{transform-origin:bottom left;transform:rotate(0);animation-timing-function:ease-out}100%{transform-origin:bottom left;transform:rotate(-110deg);animation-timing-function:ease-in-out}}.openDownLeftReturn{animation-name:openDownLeftReturn}@keyframes openDownLeftReturn{0%{transform-origin:bottom left;transform:rotate(-110deg);animation-timing-function:ease-in-out}100%{transform-origin:bottom left;transform:rotate(0);animation-timing-function:ease-out}}.openDownRight{animation-name:openDownRight}@keyframes openDownRight{0%{transform-origin:bottom right;transform:rotate(0);animation-timing-function:ease-out}100%{transform-origin:bottom right;transform:rotate(110deg);animation-timing-function:ease-in-out}}.openDownRightReturn{animation-name:openDownRightReturn}@keyframes openDownRightReturn{0%{transform-origin:bottom right;transform:rotate(110deg);animation-timing-function:ease-in-out}100%{transform-origin:bottom right;transform:rotate(0);animation-timing-function:ease-out}}.openUpLeft{animation-name:openUpLeft}@keyframes openUpLeft{0%{transform-origin:top left;transform:rotate(0);animation-timing-function:ease-out}100%{transform-origin:top left;transform:rotate(110deg);animation-timing-function:ease-in-out}}.openUpLeftReturn{animation-name:openUpLeftReturn}@keyframes openUpLeftReturn{0%{transform-origin:top left;transform:rotate(110deg);animation-timing-function:ease-in-out}100%{transform-origin:top left;transform:rotate(0);animation-timing-function:ease-out}}.openUpRight{animation-name:openUpRight}@keyframes openUpRight{0%{transform-origin:top right;transform:rotate(0);animation-timing-function:ease-out}100%{transform-origin:top right;transform:rotate(-110deg);animation-timing-function:ease-in-out}}.openUpRightReturn{animation-name:openUpRightReturn}@keyframes openUpRightReturn{0%{transform-origin:top right;transform:rotate(-110deg);animation-timing-function:ease-in-out}100%{transform-origin:top right;transform:rotate(0);animation-timing-function:ease-out}}.openDownLeftOut{animation-name:openDownLeftOut}@keyframes openDownLeftOut{0%{opacity:1;transform-origin:bottom left;transform:rotate(0);animation-timing-function:ease-out}100%{opacity:0;transform-origin:bottom left;transform:rotate(-110deg);animation-timing-function:ease-in-out}}.openDownRightOut{animation-name:openDownRightOut}@keyframes openDownRightOut{0%{opacity:1;transform-origin:bottom right;transform:rotate(0);animation-timing-function:ease-out}100%{opacity:0;transform-origin:bottom right;transform:rotate(110deg);animation-timing-function:ease-in-out}}.openUpLeftOut{animation-name:openUpLeftOut}@keyframes openUpLeftOut{0%{opacity:1;transform-origin:top left;transform:rotate(0);animation-timing-function:ease-out}100%{opacity:0;transform-origin:top left;transform:rotate(110deg);animation-timing-function:ease-in-out}}.openUpRightOut{animation-name:openUpRightOut}@keyframes openUpRightOut{0%{opacity:1;transform-origin:top right;transform:rotate(0);animation-timing-function:ease-out}100%{opacity:0;transform-origin:top right;transform:rotate(-110deg);animation-timing-function:ease-in-out}}.tinDownIn{animation-name:tinDownIn}@keyframes tinDownIn{0%{opacity:0;transform:scale(1,1) translateY(900%)}50%,70%,90%{opacity:1;transform:scale(1.1,1.1) translateY(0)}100%,60%,80%{opacity:1;transform:scale(1,1) translateY(0)}}.tinDownOut{animation-name:tinDownOut}@keyframes tinDownOut{0%,20%,40%,50%{opacity:1;transform:scale(1,1) translateY(0)}10%,30%{opacity:1;transform:scale(1.1,1.1) translateY(0)}100%{opacity:0;transform:scale(1,1) translateY(900%)}}.tinLeftIn{animation-name:tinLeftIn}@keyframes tinLeftIn{0%{opacity:0;transform:scale(1,1) translateX(-900%)}50%,70%,90%{opacity:1;transform:scale(1.1,1.1) translateX(0)}100%,60%,80%{opacity:1;transform:scale(1,1) translateX(0)}}.tinLeftOut{animation-name:tinLeftOut}@keyframes tinLeftOut{0%,20%,40%,50%{opacity:1;transform:scale(1,1) translateX(0)}10%,30%{opacity:1;transform:scale(1.1,1.1) translateX(0)}100%{opacity:0;transform:scale(1,1) translateX(-900%)}}.tinRightIn{animation-name:tinRightIn}@keyframes tinRightIn{0%{opacity:0;transform:scale(1,1) translateX(900%)}50%,70%,90%{opacity:1;transform:scale(1.1,1.1) translateX(0)}100%,60%,80%{opacity:1;transform:scale(1,1) translateX(0)}}.tinRightOut{animation-name:tinRightOut}@keyframes tinRightOut{0%,20%,40%,50%{opacity:1;transform:scale(1,1) translateX(0)}10%,30%{opacity:1;transform:scale(1.1,1.1) translateX(0)}100%{opacity:0;transform:scale(1,1) translateX(900%)}}.tinUpIn{animation-name:tinUpIn}@keyframes tinUpIn{0%{opacity:0;transform:scale(1,1) translateY(-900%)}50%,70%,90%{opacity:1;transform:scale(1.1,1.1) translateY(0)}100%,60%,80%{opacity:1;transform:scale(1,1) translateY(0)}}.tinUpOut{animation-name:tinUpOut}@keyframes tinUpOut{0%,20%,40%,50%{opacity:1;transform:scale(1,1) translateY(0)}10%,30%{opacity:1;transform:scale(1.1,1.1) translateY(0)}100%{opacity:0;transform:scale(1,1) translateY(-900%)}}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 4123528..6c18cb7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,9 @@
<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">
+<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0">-->
+ <meta name="viewport" content="width=device-width">
+ <meta http-equiv="X-UA-Compatible" content="IE=11">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
diff --git a/src/assets/css/map/map-popup.less b/src/assets/css/map/map-popup.less
index 3483c5e..9384d92 100644
--- a/src/assets/css/map/map-popup.less
+++ b/src/assets/css/map/map-popup.less
@@ -7,8 +7,10 @@
/*background-color: transparent;*/
border: .00521rem solid @color;
padding: .10417rem;
- -webkit-box-shadow: 0 0 0.03125rem 0 @color;
- box-shadow: 0 0 0.03125rem 0 @color;
+ //-webkit-box-shadow: 0 0 0.03125rem 0 @color;
+ //box-shadow: 0 0 0.03125rem 0 @color;
+ -webkit-box-shadow: 0 0 10px 0 @color;
+ box-shadow: 0 0 10px @color;
border-radius: 1rem;
}
--
Gitblit v1.8.0