先上源码
背景颜色很不好看,如需修改请#lovesBgc{}更改这个里边的就好
<template>
<div>
<div id="lovesBgc"></div>
<!-- 点击biubiubiu小心心 start-->
<div v-for="(item,index) in loves" v-bind:key="index" v-bind:ref="loves[index].count" class="img"
v-bind:style="item.top+item.left+item.scale+item.opacity" style=" float: left;">
<div class="left" v-bind:style="item.childBgc"></div>
<div class="right" v-bind:style="item.childBgc"></div>
<div class="under" v-bind:style="item.childBgc"></div>
<div class="text"> {{text[loves[index].textIndex]}}</div>
</div>
<!-- 点击biubiubiu小心心 stop-->
<!-- 上升气泡 start-->
<div class="bubbels">
<div v-for="(item,index) in bubbles" v-bind:key="index" class="bubble"
v-bind:style="item.color+item.width+item.height+item.left+
item.delay+item.duration">
</div>
</div>
<!-- 上升气泡 stop-->
</div>
</template>
<script>
export default {
data(){
const text = ["佘雪楠~", "我喜欢你~", "我爱你~", "哎呀呀~", "mua~", "大美女", "想你", "咦~"];
const loves = [];
const bubbles = [];
// count:1,top:'200px',left:'200px',translateY:'-40px',transform:0.5,opacity:0.5
return {
text : text, //小心心上边显示的文字
textIndex : 0, //小心心数组下标
loves : loves, //小心心样式
count : 0, //创建元素个数
bubbles : bubbles
}
},
methods: {
// 创建小心心
createLoves(event) {
let x = 0;
let y = 0;
let index = 0;//text文本下标
let color = "background-color:rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ");";
index = Math.floor(Math.random()* this.text.length) ;
console.log(this.text[index]);
// alert(this.$el);
x = event.clientX - 10;
y = event.clientY - 17;
// alert(event.clientX);
console.log('x:'+x+' y:'+y+' color:'+color);
let style = {
count : 'img' + ++this.count,//
top : 'top:' + y + 'px;',
left : 'left:' + x + 'px;',
opacity : 'opacity:' + 0.5 + ';',
childBgc : color,
textIndex : index,
scale : 'transform: scale(' + 1 + ');',
// scale : 'left:' + 1
};
this.loves.push(style);
//在点击鼠标时更新一次泡泡的位置
this.updateBubble();
},
removeSmallHert(){
this.loves[this.count-1].opacity = 'opacity:' + 0 + ';',
this.loves[this.count-1].scale = 'transform:translateY(' + -80 + 'px) scale(' + 0.5 + ');'
},
createBubble(){
let left = [10, 20, 35, 50, 55, 65, 75, 80, 70, 85,77];
let wh = [40, 20, 50, 80, 35, 45, 25, 80, 15, 50, 77];
let duration = [8, 5, 10, 7, 6, 8, 7, 6, 9, 5, 8];
let delay = [0, 1, 1, 0, 0, 0, 2, 1, 0, 3, 2];
let color = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")";
let bubble={}
for (var i = 0; i < 11; i++) {
console.log(wh[i]);
bubble = {
left : 'left:' + Math.floor((Math.random() * 80) + 10) +'%;',
width : 'width:' + wh[i]+'px;',
color : 'background-color:' + color + ';',
height : 'height:' + wh[i]+'px;',
delay : 'animation-delay:' + delay[i] + 's;',
duration : 'animation-duration:' + duration[i] + 's;',
}
console.log('bubble'+bubble.color);
this.bubbles.push(bubble);
//使用随机生成位置,但是显然具有不可控性
// wh = Math.floor((Math.random()) * 65 + 15);
// left = Math.floor((Math.random()) * 75 + 15) ;
// duration = Math.floor(Math.random() * 11) % 6 + 5;
// delay = Math.floor((Math.random() * 6) % 3 + 1) * Math.floor(Math.random() * 2) % 2;
color = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")";
// this.sleep(1000);
console.log(i+'size:'+this.bubbles.length)
}
},
updateBubble(){
//更新泡泡的位置
let a=Math.floor(Math.random() * 80) + 10;
this.bubbles[Math.floor(Math.random() * 11)].left = 'left:' + a +'%';
}
},
beforeMount() {
this.createBubble()
}
}
</script>
<style>
#lovesBgc{
position: absolute;
/* background-color: bisque; */
background-image: radial-gradient(red, yellow 10%, green 15%);
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
top:0;
left: 0;
z-index: -1;
}
/* biubiubiu小心心 start */
.img {width: 20px;height: 20px;opacity: 1;position: absolute;z-index: 1000;transition: 2.5s;}
.left,.right {width: 10px;height: 10px;border-radius: 100%;position: absolute;}
.right {right: 0;}
.under {width: 10px;height: 10px;position: absolute;top: 5px;left: 5px;transform: rotate(45deg)}
.text {width: 50px;font-size: 10px;line-height: 1;position: absolute;top: -1em;left: -15px;text-align: center;}
/* biubiubiu小心心 stop */
/* 下边都是泡泡 start */
.bubble{
position: absolute;
bottom:0;
border-radius:50%;
/*
opacity 属性设置元素的不透明级别。
默认值: 1 继承性: no 版本: CSS3
JavaScript 语法: object.style.opacity=0.5
*/
opacity: 0.2;
z-index: 999;
animation: flying 10s infinite ease-in;
}
.bubble:nth-child(odd){
animation: flyingOdd 10s infinite ease-in;
}
.bubble:nth-child(even){
animation: flyingEven 10s infinite ease-in;
}
@keyframes flyingEven{
0%{
bottom: 0px;
transform: translateX(0);
}
25%{
transform: translateX(-200px);
}
50%{
transform: translateX(0);
}
100%{
bottom: 1080px;
/* transform: rotateX(0); */
transform: translateX(150px);
}
}
@keyframes flyingOdd{
0%{
bottom: 0px;
transform: translateX(0);
}
25%{
transform: translateX(50px);
}
50%{
transform: translateX(-50px);
}
75%{
transform: translateX(-80px);
}
100%{
bottom: 1080px;
/* transform: rotateX(0); */
transform: translateX(180px);
}
}
</style>
使用方法:
在要使用的页面引用这个页面,如上边的名字为background.vue
<script>
import background from './background.vue'
export default {
components: {background},
methods: {
createLoves(){
this.$refs.background.createLoves(event)
},
removeSmallHert(){
this.$refs.background.removeSmallHert()
}
}
}
</script>
在页面使用
<div id="login" v-on:mousedown.left="createLoves($event)" v-on:mouseup="removeSmallHert">
<background ref="background"></background>
</div>
css样式
#login{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
ok大功告成,作者也是初学,如果有什么不对的可以提出来我们一起探讨,如果运行不出来可以留言,一般情况来说完成以上几步就可以了