基于JavaScript实现粒子流动效果
作者：爱吃糖的小明
这篇文章主要为大家详细介绍了如何通过JavaScript实现粒子流动效果,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的小伙伴可以参考一下
这是一个HTML文件，主要包含了一些CSS样式和JavaScript代码，用于创建一个动画效果。
在CSS部分，定义了一些基本的样式，包括页面的背景颜色、位置、大小等。特别的，定义了两种球形元素（.ball_A 和 .ball_B）的样式，以及它们的动画效果。
在JavaScript部分，定义了一个名为Ball的类，用于创建球形元素，并控制它们的运动。Ball类有一些方法，如random用于生成随机数，render用于渲染球形元素，update用于更新球形元素的位置。
在页面加载时，会调用creatBall函数创建一系列的球形元素，并将它们添加到页面中。然后，调用render函数，使这些球形元素按照预定的动画效果进行运动。
总的来说，这个HTML文件的主要功能是创建一个动画效果，其中包含一系列的球形元素在页面上进行运动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,html{
width: 100%;
height: 100%;
background: #222;
overflow: hidden;
position: relative;
--m-x:51px;
--m-y:51px
}
.playground{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 600px;
height: 300px;
display: flex;
justify-content: space-around;
align-items: center;
}
.ball{
width: 100px;
height: 100px;
border-radius: 50%;
/*border: 1px solid #FFFFFF;*/
position: relative;
}
.ball_A{
/*border: 1px solid #a101f6;*/
color: #FFFFFF;
background: #a101f6;
cursor: pointer;
animation: scaleBall 0.5s forwards;
}
.ball_B{
/*border: 1px solid #FFFFFF;*/
color: #FFFFFF;
}
.ball_B1{
border: none;
width: 20px;
height: 20px;
background:#0d84ff;
transform: scale(0);
left: -20px;
border-radius: 10px 30px 20px 20px / 15px 10px 25px 25px;
animation: transBall 0.8s 1.2s forwards;
}
.text{
display: inline-block;
width: 100px;
line-height: 100px;
color: white;
text-align: center;
}
@keyframes scaleBall {
0%{
transform: scale(1.0);
}
100%{
transform: scale(1.3);
background: none;
/*border: 1px solid #fff;*/
}
}
.small-ball{
width: 10px;
height: 10px;
background: #0d84ff;
border-radius: 50%;
position: absolute;
/*animation: moveBall 0.5s forwards;*/
}
@keyframes transBall {
0%{
transform: scale(0);
border-radius: 5px 10px 15px 5px / 8px 7px 6px 15px;
}
50%{
border-radius: 10px 30px 20px 20px / 15px 10px 25px 25px;
}
100%{
transform: scale(6);
border-radius: 50px
}
}
</style>
</head>
<body>
<div class="playground">
<div class="ball ball_A">
<span class="text">A</span>
</div>
<div class="ball ball_B">
<span class="text">B</span>
</div>
</div>
<div class="playground">
<div class="ball" style="opacity: 0">
<span class="text">a</span>
</div>
<div class="ball ball_B1">
<!-- <span class="text">B</span>-->
</div>
</div>
<script>
const playground = document.querySelector('.playground')
const ctx = document.querySelector('.ball_A')
const ctx_b = document.querySelector('.ball_B')
const play = playground.getBoundingClientRect()
const rect = ctx.getBoundingClientRect()
const rect_b = ctx_b.getBoundingClientRect()
const list = []
const pox = {
y: rect.height,
x: rect.width,
bx: rect_b.left - play.left,
by: rect_b.top - play.top
}
class Ball{
constructor(con,x,y) {
this.x = x;
this.y = y;
this.width = con.x;
this.height = con.y;
this.ex = this.random(-20,con.x)
this.ey = this.random(-20,con.y)
this.dx = this.random(-5, 6); // -5~5
this.dy = this.random(-5, 6); // -5~5
this.dom = ''
}
random(min,max){
return Math.random()* (max - min) + min;
}
render(index,step){
const move = `@keyframes moveBall_${index} {
0%{
top:${this.y}px;
left: ${this.x}px;
}
50%{
top:${this.ey}px;
left: ${this.ex}px;
}
100%{
top:${this.y}px;
left: ${pox.bx - 100}px;
}
}`
const sheet = document.styleSheets[0];
sheet.insertRule(move, 0)
const div = document.createElement("div")
div.className = 'small-ball'
div.style.transform = `scale(${Math.random() + 0.5})`
div.style.opacity = Math.random() + 0.5
div.style.animation = `moveBall_${index} ${step}s cubic-bezier(0.23, 1, 0.32, 1) forwards`
ctx.appendChild(div)
this.dom = div
}
}
creatBall()
function creatBall(){
let step = 2
const x = pox.x / 2
const y = pox.y / 2
for (let i = 0; i< 50; i++){
step += 0.01
const ball = new Ball(pox,x,y)
ball.render(i,step)
list.push(ball)
}
}
</script>
</body>
</html>到此这篇关于基于JavaScript实现粒子流动效果的文章就介绍到这了,更多相关JavaScript粒子流动效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！