基于vue的模拟gitbook的右下角的评论按钮
html:
<div :class='[water,{open: isOpen}]' @click='openMessage'></div>
js:
export default {
name: "waterDroplet",
data: () => ({
txt: 'borderRadius实现小水滴的效果',
water: 'water',
isOpen: false
}),
methods: {
openMessage() {
this.isOpen = !this.isOpen
}
}
}
css:
.waterDroplet{
.water{
width: 54px;
height: 54px;
position: fixed;
bottom: 20px;
right: 20px;
border-radius: 100%;
transition: all .2s ease-out;
background: url('../assets/message.png') center center #3884FF no-repeat;
background-size: 30px;
}
.water.open{
border-radius:0px 100% 100%;
transform: perspective(500px) rotateZ(45deg);
background: url(../assets/close.png) center center #9a9c9d no-repeat;
background-size: 40px;
}
}
效果如下: