基于JavaScript粒子流动效果

这篇具有很好参考价值的文章主要介绍了基于JavaScript粒子流动效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这是一个HTML文件,主要包含了一些CSS样式和JavaScript代码,用于创建一个动画效果。

在CSS部分,定义了一些基本的样式,包括页面的背景颜色、位置、大小等。特别的,定义了两种球形元素(.ball_A 和 .ball_B)的样式,以及它们的动画效果。

在JavaScript部分,定义了一个名为Ball的类,用于创建球形元素,并控制它们的运动。Ball类有一些方法,如random用于生成随机数,render用于渲染球形元素,update用于更新球形元素的位置。

在页面加载时,会调用creatBall函数创建一系列的球形元素,并将它们添加到页面中。然后,调用render函数,使这些球形元素按照预定的动画效果进行运动。基于JavaScript粒子流动效果,动画,css,css3,html

总的来说,这个HTML文件的主要功能是创建一个动画效果,其中包含一系列的球形元素在页面上进行运动。文章来源地址https://www.toymoban.com/news/detail-697362.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粒子流动效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包