话不多说,直接上图,我查看了百度地图的然后试着做了一个具有收缩功能的
<template>
<div id="mapType">
<div class="mapTypeCard vectorType">
<span>地图</span>
</div>
<div class="mapTypeCard imgType">
<span>影像</span>
</div>
<div class="mapTypeCard terType">
<span>地形</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {},
mounted() {}
};
</script>
<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 .mapTypeCard span {
width: 36px;
height: 16px;
position: absolute;
bottom: 1px;
right: 1px;
display: inline-block;
font-size: 12px;
line-height: 16px;
text-align: center;
color: #fff;
background: #888f88;
opacity: 0.8;
}
#mapType .vectorType {
background-color: pink;
z-index: 3;
right: 15px;
transition: right 0.8s;
-moz-transition: right 0.8s; /* Firefox 4 */
-webkit-transition: right 0.8s; /* Safari and Chrome */
-o-transition: right 0.8s; /* Opera */
}
#mapType .imgType {
z-index: 2;
right: 10px;
background-color: rgb(118, 118, 201);
transition: right 0.8s;
-moz-transition: right 0.8s; /* Firefox 4 */
-webkit-transition: right 0.8s; /* Safari and Chrome */
-o-transition: right 0.8s; /* Opera */
}
#mapType .terType {
z-index: 1;
right: 5px;
background-color: greenyellow;
transition: right 0.8s;
-moz-transition: right 0.8s; /* Firefox 4 */
-webkit-transition: right 0.8s; /* Safari and Chrome */
-o-transition: right 0.8s; /* Opera */
transition: right 0.8s;
-moz-transition: right 0.8s; /* Firefox 4 */
-webkit-transition: right 0.8s; /* Safari 和 Chrome */
-o-transition: right 0.8s; /* Opera */
}
#mapType:hover .vectorType {
right: 197px;
}
#mapType:hover .imgType {
right: 101px;
}
#mapType:hover .terType {
right: 5px;
}
#mapType .vectorType:hover,
#mapType .active {
border: solid 1px #31a5f7;
}
#mapType .imgType:hover {
border: solid 1px #31a5f7;
}
#mapType .terType:hover {
border: solid 1px #31a5f7;
}
#mapType .vectorType:hover span,
#mapType .active span {
background: #31a5f7;
}
#mapType .imgType:hover span {
background: #31a5f7;
}
#mapType .terType:hover span {
background: #31a5f7;
}
</style>