First source code
The background color is not good-looking. If you need to change it, please change the inside one
<template> <div> <div id="lovesBgc"></div> <!-- click biubiubiu Little heart 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> <!-- click biubiubiu Little heart stop--> <!-- Rising bubble 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> <!-- Rising bubble stop--> </div> </template> <script> export default { data(){ const text = ["She Xue Nan~", "I like you~", "I love you!~", "Ah!~", "mua~", "Beauty", "miss you", "Why~"]; const loves = []; const bubbles = []; // count:1,top:'200px',left:'200px',translateY:'-40px',transform:0.5,opacity:0.5 return { text : text, //Text on top of your heart textIndex : 0, //Small heart array subscript loves : loves, //Small heart style count : 0, //Number of created elements bubbles : bubbles } }, methods: { // Create a small mind createLoves(event) { let x = 0; let y = 0; let index = 0;//text Text subscript 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); //Update the position of a bubble when clicking the mouse 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); //Using randomly generated positions, but obviously uncontrollable // 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(){ //Update bubble position 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 Little heart 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 Little heart stop */ /* Bubbles all over the bottom start */ .bubble{ position: absolute; bottom:0; border-radius:50%; /* opacity Property sets the opacity level of the element. Default value: 1 Inheritance: no Edition: CSS3 JavaScript grammar: 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>
usage method:
Refer to this page in the page to be used, for example, the top name is 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>
Use on page
<div id="login" v-on:mousedown.left="createLoves($event)" v-on:mouseup="removeSmallHert"> <background ref="background"></background> </div>
css Style
#login{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
ok is a success. The author is also a beginner. If there is something wrong, we can discuss it together. If it doesn't work, we can leave a message. Generally speaking, we can complete the above steps
