仿百度地图实现底部自动收缩的切换地图模式的三个按钮

最新推荐文章于 2023-07-01 14:26:03 发布

原创

最新推荐文章于 2023-07-01 14:26:03 发布 · 659 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

本文介绍了一种使用CSS3 transition属性实现百度地图模式切换的方法。通过编写特定的HTML和CSS代码，可以创建一个平滑过渡效果的按钮，用于在不同地图模式间进行切换。

在开发和使用百度地图时,发现百度地图开发的模式切换自动收缩挺方便的,查看了一下网页源代码,发现不是地图封装的控件,是html写的按钮.

这里代码用CSS3 transition 属性实现地图切换.

<html>
<head>
<style scoped>
#mapType {
  width: 106px;
  height: 70px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 2;
  cursor: pointer;
  border-radius: 5px;
  transition: width 0.8s, height 0.8s;
  -moz-transition: width 0.8s, height 0.8s, -moz-transform 0.8s; /* Firefox 4 */
  -webkit-transition: width 0.8s, height 0.8s, -webkit-transform 0.8s; /* Safari and Chrome */
  -o-transition: width 0.8s, height 0.8s, -o-transform 0.8s; /* Opera */
}
#mapType:hover {
  width: 288px;
  background: rgba(255, 255, 255, 0.3);
}
#mapType .mapTypeCard {
  position: absolute;
  top: 5px;
  width: 86px;
  height: 60px;
  border-radius: 5px;
  border: solid 1px black;
}
#mapType .mapTy