• 基于JavaScript粒子流动效果

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

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

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

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

    总的来说，这个HTML文件的主要功能是创建一个动画效果，其中包含一系列的球形元素在页面上进行运动。

    1. DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <style>
    7.         body,html{
    8.             width: 100%;
    9.             height: 100%;
    10.             background: #222;
    11.             overflow: hidden;
    12.             position: relative;
    13.             --m-x:51px;
    14.             --m-y:51px
    15.         }
    16.         .playground{
    17.             position: absolute;
    18.             left: 50%;
    19.             top: 50%;
    20.             transform: translate(-50%,-50%);
    21.             width: 600px;
    22.             height: 300px;
    23.             display: flex;
    24.             justify-content: space-around;
    25.             align-items: center;
    26.         }
    27.         .ball{
    28.             width: 100px;
    29.             height: 100px;
    30.             border-radius: 50%;
    31.             /*border: 1px solid #FFFFFF;*/
    32.             position: relative;
    33.         }
    34.         .ball_A{
    35.             /*border: 1px solid #a101f6;*/
    36.             color: #FFFFFF;
    37.             background: #a101f6;
    38.             cursor: pointer;
    39.             animation: scaleBall 0.5s forwards;
    40.         }
    41.         .ball_B{
    42.             /*border: 1px solid #FFFFFF;*/
    43.             color: #FFFFFF;
    44.         }
    45.         .ball_B1{
    46.             border: none;
    47.             width: 20px;
    48.             height: 20px;
    49.             background:#0d84ff;
    50.             transform: scale(0);
    51.             left: -20px;
    52.             border-radius: 10px 30px  20px  20px  / 15px  10px  25px  25px;
    53.             animation: transBall 0.8s 1.2s forwards;
    54.         }
    55.         .text{
    56.             display: inline-block;
    57.             width: 100px;
    58.             line-height: 100px;
    59.             color: white;
    60.             text-align: center;
    61.         }
    62.         @keyframes scaleBall {
    63.             0%{
    64.                 transform: scale(1.0);
    65.             }
    66.             100%{
    67.                 transform: scale(1.3);
    68.                 background: none;
    69.                 /*border: 1px solid #fff;*/
    70.             }
    71.         }
    72.         .small-ball{
    73.             width: 10px;
    74.             height: 10px;
    75.             background: #0d84ff;
    76.             border-radius: 50%;
    77.             position: absolute;
    78.             /*animation: moveBall 0.5s forwards;*/
    79.         }
    80.         @keyframes transBall {
    81.             0%{
    82.                 transform: scale(0);
    83.                 border-radius: 5px 10px  15px  5px  / 8px  7px  6px  15px;
    84.             }
    85.             50%{
    86.                 border-radius: 10px 30px  20px  20px  / 15px  10px  25px  25px;
    87.             }
    88.             100%{
    89.                 transform: scale(6);
    90.                 border-radius: 50px
    91.             }
    92.         }
    93.     style>
    94. head>
    95. <body>
    96. <div class="playground">
    97.     <div class="ball ball_A">
    98.         <span class="text">Aspan>
    99.     div>
    100.     <div class="ball ball_B">
    101.         <span class="text">Bspan>
    102.     div>
    103. div>
    104. <div class="playground">
    105.     <div class="ball" style="opacity: 0">
    106.         <span class="text">aspan>
    107.     div>
    108.     <div class="ball ball_B1">
    110.     div>
    111. div>
    112. <script>
    113.     const playground = document.querySelector('.playground')
    114.     const ctx = document.querySelector('.ball_A')
    115.     const ctx_b = document.querySelector('.ball_B')
    116.  
    117.     const play = playground.getBoundingClientRect()
    118.     const rect = ctx.getBoundingClientRect()
    119.     const rect_b = ctx_b.getBoundingClientRect()
    120.  
    121.     const list = []
    122.     const pox = {
    123.         y: rect.height,
    124.         x: rect.width,
    125.         bx: rect_b.left - play.left,
    126.         by: rect_b.top - play.top
    127.     }
    128.     class Ball{
    129.         constructor(con,x,y) {
    130.             this.x = x;
    131.             this.y = y;
    132.             this.width = con.x;
    133.             this.height = con.y;
    134.             this.ex = this.random(-20,con.x)
    135.             this.ey = this.random(-20,con.y)
    136.             this.dx = this.random(-5, 6); // -5~5
    137.             this.dy = this.random(-5, 6); // -5~5
    138.             this.dom = ''
    139.         }
    140.         random(min,max){
    141.             return Math.random()* (max - min) + min;
    142.         }
    143.         render(index,step){
    144.             const move = `@keyframes moveBall_${index} {
    145.             0%{
    146.                 top:${this.y}px;
    147.                 left: ${this.x}px;
    148.             }
    149.             50%{
    150.                 top:${this.ey}px;
    151.                 left: ${this.ex}px;
    152.             }
    153.             100%{
    154.                 top:${this.y}px;
    155.                 left: ${pox.bx - 100}px;
    156.             }
    157.         }`
    158.  
    159.             const sheet = document.styleSheets[0];
    160.             sheet.insertRule(move, 0)
    161.             const div = document.createElement("div")
    162.             div.className = 'small-ball'
    163.  
    164.             div.style.transform = `scale(${Math.random() + 0.5})`
    165.             div.style.opacity = Math.random() + 0.5
    166.             div.style.animation = `moveBall_${index} ${step}s cubic-bezier(0.23, 1, 0.32, 1) forwards`
    167.             ctx.appendChild(div)
    168.             this.dom = div
    169.         }
    170.     }
    171.  
    172.     creatBall()
    173.  
    174.     function creatBall(){
    175.         let step = 2
    176.         const x = pox.x / 2
    177.         const y = pox.y / 2
    178.         for (let i = 0; i< 50; i++){
    179.             step += 0.01
    180.             const ball = new Ball(pox,x,y)
    181.             ball.render(i,step)
    182.             list.push(ball)
    183.         }
    184.     }
    185.  
    186. script>
    187. body>
    188. html>

  • 相关阅读:
    【web前端开发】后台PHP
    NeurIPS 2022 | 中山大学&华为诺亚方舟联合提出：快速适应统一自动驾驶场景多任务学习的训练范式
    使用 Databend 加速 Hive 查询
    RabbitMQ一、RabbitMQ的介绍与安装（docker）
    jxTMS设计思想之数据查询
    软件需求工程R 第三、四章
    FTP客户端lftp
    Qwt QwtThermo绘制温度计
    软考2020高级架构师下午案例分析第4题：关于Redis数据类型、持久化、内存淘汰机制
    2.14 PE结构：地址之间的转换
  • 原文地址：https://blog.csdn.net/weixin_45785873/article/details/132657143