URL
如何淡化在这个背景的图像像这个url加载后？
我在屏幕中央放了一个圆圈，现在用createjs展开它。 我写下我的代码我参考的参考站点。
null
<!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('');
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>null
我不知道怎么从下面出来。 所以我想知道的是如何使它或任何关键字，以寻找一些有关这个问题的信息。 我希望有人教我怎么做。
<div class="backImg">put your image here</div>
<style>
.backImg{
opacity:0;
transition: opacity 2s;
}
.visible{
opacity:1;
}
</style>
您可以在某个javascript事件上添加visible类。
