|
|
@@ -1069,5 +1069,131 @@
|
|
|
|
|
|
|
|
|
}
|
|
|
+ //警铃
|
|
|
+ .fire-tip {
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 44px;
|
|
|
+ color: #ff0000;
|
|
|
+ text-shadow: 0 0 1px #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fire-address {
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ margin-top: 44px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fire-handle {
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ background: #00BFF0;
|
|
|
+ color: #ffffff;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ width: 80px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ margin: 24px auto;
|
|
|
+ text-decoration: none
|
|
|
+ }
|
|
|
+
|
|
|
+ .fire-handle:hover {
|
|
|
+ background: #06a2ca;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bell {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ bottom:-20px;
|
|
|
+ width: 100%;
|
|
|
+ height: 320px;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bell canvas {
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: -9px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 保持大小不变的小圆圈 */
|
|
|
+ .dot {
|
|
|
+ position: absolute;
|
|
|
+ width: 96px;
|
|
|
+ height: 96px;
|
|
|
+ left: 160px;
|
|
|
+ top: 160px;
|
|
|
+ background: url('../assets/images/bell.gif') no-repeat;
|
|
|
+ // background: url(.) no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ z-index: 200;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 产生动画（向外扩散变大）的圆圈 */
|
|
|
+ .pulse,
|
|
|
+ .pulse-big {
|
|
|
+ position: absolute;
|
|
|
+ width: 420px;
|
|
|
+ height: 420px;
|
|
|
+ border: 2px solid #EF2D02;
|
|
|
+ background: rgba(239, 45, 2, 0.8);
|
|
|
+ border-radius: 50%;
|
|
|
+ z-index: 100;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pulse {
|
|
|
+ background: rgba(239, 45, 2, 0.6) !important;
|
|
|
+ -webkit-animation: warn 0.9s ease-out;
|
|
|
+ -moz-animation: warn 0.9s ease-out;
|
|
|
+ animation: warn 0.9s ease-out;
|
|
|
+ -webkit-animation-iteration-count: infinite;
|
|
|
+ -moz-animation-iteration-count: infinite;
|
|
|
+ animation-iteration-count: infinite;
|
|
|
+ box-shadow: 1px 1px 30px #EF2D02;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pulse-big {
|
|
|
+ background: rgba(239, 45, 2, 0.6) !important;
|
|
|
+ -webkit-animation: warn1 0.9s ease-out;
|
|
|
+ -moz-animation: warn1 0.9s ease-out;
|
|
|
+ animation: warn1 0.9s ease-out;
|
|
|
+ -webkit-animation-iteration-count: infinite;
|
|
|
+ -moz-animation-iteration-count: infinite;
|
|
|
+ animation-iteration-count: infinite;
|
|
|
+ box-shadow: 1px 1px 30px #EF2D02;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes warn {
|
|
|
+ 0% {
|
|
|
+ -moz-transform: scale(0);
|
|
|
+ transform: scale(0);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ -moz-transform: scale(1);
|
|
|
+ transform: scale(1);
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes warn1 {
|
|
|
+ 0% {
|
|
|
+ -o-transform: scale(0);
|
|
|
+ transform: scale(0);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ -o-transform: scale(0.6);
|
|
|
+ transform: scale(0.6);
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
</style>
|
