vue实现直播间点赞功能

}

.b1 {

background-image: url(./images/bg1.png);

/* // 可以使用雪碧图

// background-position: -42px -107px;

// background-size: 188.5px 147px; */

}

.b2 {

background-image: url(./images/bg2.png);

/* // background-position: -84px -107px;

// background-size: 188.5px 147px; */

}

.b3 {

background-image: url(./images/bg3.png);

/* // background-position: 0 -107px;

// background-size: 188.5px 147px; */

}

.b4 {

background-image: url(./images/bg4.png);

/* // background-position: -45px -62px;

// background-size: 188.5px 147px; */

}

.b5 {

background-image: url(./images/bg5.png);

/* // background-position: -107px -42px;

// background-size: 188.5px 147px; */

}

.b6 {

background-image: url(./images/bg6.png);

/* // background-position: -107px 0;

// background-size: 188.5px 147px; */

}

.bl1 {

animation: bubble_1 var(–bubble_time) linear 1 forwards,

bubble_big_1 var(–bubble_scale) linear 1 forwards,

bubble_y var(–bubble_time) linear 1 forwards;

}

.bl2 {

animation: bubble_2 var(–bubble_time) linear 1 forwards,

bubble_big_2 var(–bubble_scale) linear 1 forwards,

bubble_y var(–bubble_time) linear 1 forwards;

}

.bl3 {

animation: bubble_3 var(–bubble_time) linear 1 forwards,

bubble_big_1 var(–bubble_scale) linear 1 forwards,

bubble_y var(–bubble_time) linear 1 forwards;

}

.bl4 {

animation: bubble_4 var(–bubble_time) linear 1 forwards,

bubble_big_2 var(–bubble_scale) linear 1 forwards,

bubble_y var(–bubble_time) linear 1 forwards;

}

.bl5 {

animation: bubble_5 var(–bubble_time) linear 1 forwards,

bubble_big_1 var(–bubble_scale) linear 1 forwards,

bubble_y var(–bubble_time) linear 1 forwards;

}

.bl6 {

animation: bubble_6 var(–bubble_time) linear 1 forwards,

bubble_big_3 var(–bubble_scale) linear 1 forwards,

bubble_y var(–bubble_time) linear 1 forwards;

}

.bl7 {

animation: bubble_7 var(–bubble_time) linear 1 forwards,

bubble_big_1 var(–bubble_scale) linear 1 forwards,

bubble_y var(–bubble_time) linear 1 forwards;

}

.bl8 {

animation: bubble_8 var(–bubble_time) linear 1 forwards,

bubble_big_3 var(–bubble_scale) linear 1 forwards,

bubble_y var(–bubble_time) linear 1 forwards;

}

.bl9 {

animation: bubble_9 var(–bubble_time) linear 1 forwards,

bubble_big_2 var(–bubble_scale) linear 1 forwards,

bubble_y var(–bubble_time) linear 1 forwards;

}

.bl10 {

animation: bubble_10 var(–bubble_time) linear 1 forwards,

bubble_big_1 var(–bubble_scale) linear 1 forwards,

bubble_y var(–bubble_time) linear 1 forwards;

}

.bl11 {

animation: bubble_11 var(–bubble_time) linear 1 forwards,

bubble_big_2 var(–bubble_scale) linear 1 forwards,

bubble_y var(–bubble_time) linear 1 forwards;

}

@keyframes bubble_11 {

0% {

}

25% {

margin-left: -10px;

}

50% {

margin-left: -10px;

}

100% {

margin-left: -18px;

}

}

@keyframes bubble_10 {

0% {

}

25% {

margin-left: -20px;

}

50% {

margin-left: -20px;

}

100% {

margin-left: -20px;

}

}

@keyframes bubble_9 {

0% {

}

25% {

margin-left: 10px;

}

50% {

margin-left: 10px;

}

100% {

margin-left: 10px;

}

}

@keyframes bubble_8 {

0% {

}

25% {

margin-left: 20px;

}

50% {

margin-left: 20px;

}

100% {

margin-left: 20px;

}

}

@keyframes bubble_7 {

0% {

}

25% {

margin-left: 3px;

}

50% {

margin-left: 1px;

}

75% {

margin-left: 2px;

}

100% {

margin-left: 3px;

}

}

@keyframes bubble_6 {

0% {

}

25% {

margin-left: -3px;

}

50% {

margin-left: -1px;

}

75% {

margin-left: -2px;

}

100% {

margin-left: -3px;

}

}

@keyframes bubble_5 {

0% {

}

25% {

margin-left: 5px;

}

50% {

margin-left: -5px;

}

75% {

margin-left: -10px;

}

100% {

margin-left: -20px;

}

}

@keyframes bubble_4 {

0% {

}

25% {

margin-left: -5px;

}

50% {

margin-left: -5px;

}

75% {

margin-left: 20px;

}

100% {

margin-left: 10px;

}

}

@keyframes bubble_3 {

0% {

}

25% {

margin-left: -20px;

}

50% {

margin-left: 10px;

}

75% {

margin-left: 20px;

}

100% {

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

50% {

margin-left: -5px;

}

75% {

margin-left: 20px;

}

100% {

margin-left: 10px;

}

}

@keyframes bubble_3 {

0% {

}

25% {

margin-left: -20px;

}

50% {

margin-left: 10px;

}

75% {

margin-left: 20px;

}

100% {

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】