как исчезнуть фоновое изображение, как этот URL? - PullRequest
Новая
       69

как исчезнуть фоновое изображение, как этот URL?

1 голос
/ 21 июня 2020

url

как после загрузки исчезнуть фоновое изображение, как этот url?

Я помещаю круг в центр экрана и расширяю его с помощью create js на данный момент. Я записываю свой код Я ссылаюсь на справочные сайты. 

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link type="text/css" rel="stylesheet"
  href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
  <canvas id="canvas">
  </canvas>
<style> 
html, body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}
canvas {
        background-image: url('![imgae](10917b2f51f6a1288d057d46a38cd9de.jpeg)');
        background-size: cover;
        height: 100%;  
        width: 100%;
    }
 </style>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <script>
$(function(){
    setTimeout('stopload()',2000);
});
function stopload(){
   //$('#top').fadeOut(1200);

  const WIDTH = window.innerWidth;
  const HEIGHT = window.innerHeight;

  const canvas = document.getElementById('canvas');
  canvas.width = WIDTH;
  canvas.height = HEIGHT;


  const context = canvas.getContext('2d');

  
  document.body.appendChild(canvas);

  const circles = [];

  circles.push({x:WIDTH/2, y:HEIGHT/2, radius: 50});


  function loop(timestamp) {
  
    context.clearRect(0, 0, WIDTH, HEIGHT);

  
    for(const c of circles) {
      if(c.radius < 1000) { c.radius ++; } 
    }

 
    for(const c of circles) {
      context.beginPath();
      context.fillStyle = 'rgb(0, 0, 0)';
      context.arc(c.x, c.y, c.radius, 0, 2 * Math.PI);
      context.fill();
    }


    window.requestAnimationFrame((ts) => loop(ts));
  }


  window.requestAnimationFrame((ts) => loop(ts));

};  
    </script>
</body>
</html>

я не знаю, как выйти снизу. Итак, я хочу знать, как сделать это или какие-либо ключевые слова, чтобы искать информацию об этих проблемах. Надеюсь, кто-нибудь покажет мне, как это сделать.

Ответы [ 2 ]

0 голосов
/ 22 июня 2020

Я перехожу на этот код и хочу задать любые вопросы. как добавить код, что маска распространяется от центра ?? 

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="">
  <link type="text/css" rel="stylesheet"
  href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
  <canvas id="canvas"></canvas>
<style> 
html, body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

canvas {
  background-color: white;
  height: 100%;  
  width: 100%;
  overflow: hidden;
    }
</style>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <script>
(function () {
  var canvas = document.getElementById('canvas');
  canvas.width = 960;
  canvas.height = 540;
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var context = canvas.getContext('2d');

  var bgImg = new Image();
  bgImg.onload = function () {
      context.globalCompositeOperation = 'source-over';
      context.drawImage(bgImg, 0, 0, canvas.width, canvas.height);
      drawMask();
  };
  bgImg.src = 'image/background.svg';

  function drawMask() {
    var size = 50;
    context.save()
    context.globalCompositeOperation = 'destination-in';
    context.arc(centerX, centerY, size, 0, Math.PI * 2);
    context.fill();
    size++;
    context.restore();
    window.requestAnimationFrame(drawMask);
  }
})();
</script>
</body>
</html>
0 голосов
/ 21 июня 2020 
  <div class="backImg">put your image here</div>
    
    <style>
    .backImg{
    opacity:0;
    transition: opacity 2s;
    }
    .visible{
    opacity:1;
    }
    </style>

вы можете добавить видимый класс в какое-нибудь событие javascript.

...