如图所示，博主封装一个vue点赞效果的组件，由于网上很少有这种插件样式，所以今天出一个点赞教程。
*注意：本次使用两个img标签（两个颜色小手svg），如果你希望用到icon，也可自己更改代码实现。
点赞效果主要用到css，所以，你需要知道的css3知识：
1、animation 动画配合 keyframes 规则使用。
2、box-shadow 阴影与 transition 过渡效果的妙用。思路：（两种样式，一个控制开关）
1、点赞，出现缩放的红色小手，通过 animation 从0%～50%～100% 的缩放效果。
2、周边向外扩展的光晕效果，使用阴影box-shadow的第四个属性（阴影扩展半径）
和第五个属性（颜色）来实现。
3、使用vue @click事件，点击控制变量，通过三目运算，控制样式变化。不多说了，直接看代码：
⚠️注意：img标签中的图片请更换自己的本地图片路径，否则会报错。
<!-- 点赞 -->
<template>
<div id=''>
<div class="circle flex-h" @click="handleClick" :class="isUp?'check':''">
<div class="img-box" :class="isUp?'img-box-check':''">
<img v-if="isUp" src="@/assets/images/fab.svg" alt="" />
<img v-else src="@/assets/images/fab2.svg" alt="" />
</div>
</div>
</div>
</template>
<script>
export default {
components: {},
data () {
return {
isUp: false
};
},
created () {
},
mounted () {
},
computed: {},
watch: {},
methods: {
handleClick () {
this.isUp = !this.isUp
}
},
}
</script>
<style lang='less' scoped>
.circle {
border-radius: 50%;
cursor: pointer;
box-shadow: 0px 0px 0px 0px rgba(223, 46, 58, 0.5);
.img-box {
width: 20px;
height: 20px;
margin: 5px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none; // 防止快速点击图片被选中，可不加，为提高体验，博主加上了这几行代码。
& img {
width: 100%;
height: 100%;
}
}
}
.check {
-webkit-transition: box-shadow 0.5s;
-moz-transition: box-shadow 0.5s;
-o-transition: box-shadow 0.5s;
transition: box-shadow 0.5s;
box-shadow: 0px 0px 0px 1em rgba(226, 32, 44, 0);
}
.img-box-check {
animation: anm 0.5s;
-moz-animation: anm 0.5s;
-webkit-animation: anm 0.5s;
-o-animation: anm 0.5s;
}
@keyframes anm {
0% {
transform: scale(0);
-webkit-transform: scale(0);
-moz-transform: scale(0);
}
50% {
transform: scale(1.3);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
}
100% {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
}
}
// 以下为处理兼容代码，可不看。
@-moz-keyframes anm {
0% {
transform: scale(0);
-webkit-transform: scale(0);
-moz-transform: scale(0);
}
50% {
transform: scale(1.3);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
}
100% {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
}
}
@-webkit-keyframes anm {
0% {
transform: scale(0);
-webkit-transform: scale(0);
-moz-transform: scale(0);
}
50% {
transform: scale(1.3);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
}
100% {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
}
}
@-o-keyframes anm {
0% {
transform: scale(0);
-webkit-transform: scale(0);
-moz-transform: scale(0);
}
50% {
transform: scale(1.3);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
}
100% {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
}
}
</style>以上就是点赞效果案例，自己加上 props 封装下，喜欢请点赞。
wechat:villinwechat
