当前位置：网站首页>Canvas random bubbling background

Canvas random bubbling background

2022-06-13 00:42:00 【KatyLight】

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    @font-face {

    }

    body{
      padding: 0;
      margin: 0;
      background-color: black;
      color: white;
    }
    .window{
      position: fixed;
      left: 0;
      width: 100vw;
      height:100vh;

      top: 0;
      z-index: 12;
    }
    .window>div{
      width: fit-content;
      height: fit-content;
      position: absolute;
      top:0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
    input{
      display: block;
      background-color: rgba(0,0,0,0.5);
      color: white;
      border: 1px solid white;
      font-size: 20px;
      margin-left: 10px;
      padding-inline-start: 30px;
line-height: 40px;
      vertical-align: middle;
      height: 40px;
      width: 600px;
      transition: all .5s ease-in ;

    }
    input:focus{
      outline: none;
      box-shadow: 0 0 7px 4px white, inset 0 0 5px 2px white;
      transition: all .2s ease-in ;
    }
    input:focus+span{
      text-shadow: 0 0 7px white;
      font-weight: bolder;
      transition: all .2s ease-in ;

    }
    input+span{
      transition: all .2s ease-in ;

    }
    .search{
      position: relative;
    }
    .search>span{
      position: absolute;
      top: 8px;
      left: 17px;
      z-index: 20;
     }

  </style>
</head>
<script>
  var c,ctx;

  window.onload=()=>{
    c=document.getElementById('c')
    c.width=window.screen.width;
     c.height=window.screen.height;
    ctx=c.getContext('2d');
    ctx.strokeStyle="#FFFFFF88";
    ctx.fillStyle="#FFFFFF88";
    ctx.lineWidth=3;
    for(let i=0;i<32;i++){
      addCircles();
    }

    setInterval(()=>{
      draw()
    },1);

  }
  var circles=[

  ]
  function addCircles(){
    circles.push({
      p:{
        x:Math.floor(c.width*Math.random()),
        y:Math.floor(c.height*Math.random())
      },
      r:1,
      e:Math.floor(50+Math.random()*100)
    })
  }
  function draw(){
    ctx.clearRect(0,0,c.width,c.height)
    for(let i=0;i<circles.length;i++){
      ctx.beginPath();
      ctx.arc(circles[i].p.x,circles[i].p.y,circles[i].r,0,Math.PI*2);
       ctx.stroke();
      ctx.closePath();
      circles[i].r++;
      if(circles[i].r>circles[i].e){
        circles.splice(i,1);
        addCircles();
      }
    }
  }
</script>
<body>
<canvas id="c"></canvas>
<div class="window">
   <div class="search">
     <input type="search"  placeholder=" Enter search content "/>
     <span>◯</span>
   </div>
</div>
</body>
</html>

原网站

版权声明
本文为[KatyLight]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202280559224411.html

边栏推荐

猜你喜欢

随机推荐