我想創建此影像中描繪的 css（或 JS）加載影片：
應該有一個具有類的容器矩形。然后應該將一些 css 應用于該矩形，以便有一些覆寫。首先它是全黑的，透明度為 50%。然后隨著時間的推移，黑色隨著順時針旋轉而減少，直到不再有黑色。如果我給它一個值100，它應該是全黑的，如果我給它0，它應該沒有黑色，并且完全顯示底層影像。
任何人都知道任何教程或如何創建它？
uj5u.com熱心網友回復：
無疑是困難的，但也是可能的。經過大約一個小時的打磨，我想出了很多 div 和一些作業代碼：
const inner = document.getElementById('inner');
const black = document.getElementById('black');
const cover = document.getElementById('cover');
const overlay = document.getElementById('overlay');
const block = document.getElementById('block');
inner.addEventListener('animationend', e => {
inner.style.display = 'none';
block.style.display = 'block';
});
cover.addEventListener('animationend', e => {
alert('done!');
});#wrapper {
height: 100px;
width: 100px;
border: 5px solid black;
position: relative;
overflow: hidden;
}
#wrapper > div {
position: absolute;
height: 300%;
width: 300%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#cover {
background-color: white;
animation: spin 5s linear 5s forwards;
}
#overlay {
background-color: black;
width: 50%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#inner {
animation: spin 5s linear forwards;
}
#black {
background-color: black;
width: 50%;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
@keyframes spin {
from {
transform: translate(-50%, -50%) rotate(0);
}
to {
transform: translate(-50%, -50%) rotate(180deg);
}
}
#block {
display: none;
background-color: white;
height: 100%!important;
width: 50%!important;
transform: translate(0, 0)!important;
position: absolute;
top: 0!important;
right: 0!important;
z-index: 10
}
/*Just for the demo*/
body, html {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}<div id="wrapper">
<div id="cover">
<div id="overlay"></div>
</div>
<div id="inner">
<div id="black"></div>
</div>
<div id="block"></div>
</div>這到底是如何作業的？考慮這張圖片（對不起，糟糕的圖形）：
中間的小方塊代表#wrapper。它周圍較大的正方形是它的孩子#inner。在#inner（帶有條紋）的右側是#black，它占據了其父級的一半。#inner旋轉 180 度，消失，然后#cover在對面做同樣的事情。#block防止黑色部分#cover顯示在另一側。*哇*，這很有趣！
uj5u.com熱心網友回復：
我用畫布想通了。
var canvas = document.getElementById('loading_animation');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#00000088';
var final = [];
var list1 = [
[Math.floor(canvas.width / 2), 0],
[Math.floor(canvas.width / 2), Math.floor(canvas.height / 2)]
];
var list2 = [
[canvas.width - 1, 0],
[canvas.width - 1, canvas.height - 1],
[0, canvas.height - 1],
[0, 0]
];
var last = [Math.floor(canvas.width / 2), 0];
for (var x = Math.floor(canvas.width / 2); x < canvas.width; x = 1) {
var path = list1.concat([[x, 0]]).concat(list2).concat([last]);
final.push(path);
}
list2.shift();
for (var y = 1; y < canvas.height; y = 1) {
var path = list1.concat([[canvas.width - 1, y]]).concat(list2).concat([last]);
final.push(path);
}
list2.shift();
for (var x = canvas.width - 2; x >= 0; x -= 1) {
var path = list1.concat([[x, canvas.height - 1]]).concat(list2).concat([last]);
final.push(path);
}
list2.shift();
for (var y = canvas.height - 2; y >= 0; y -= 1) {
var path = list1.concat([[0, y]]).concat(list2).concat([last]);
final.push(path);
}
list2.shift();
for (var x = 1; x < Math.floor(canvas.width / 2); x = 1) {
var path = list1.concat([[x, 0]]).concat(list2).concat([last]);
final.push(path);
}
function RenderAnimation() {
var path = final.shift();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(path[0][0], path[0][1]);
for (let i = 1; i < path.length; i ) {
ctx.lineTo(path[i][0], path[i][1]);
}
ctx.closePath();
ctx.fill();
if (final.length > 0) {
window.requestAnimationFrame(RenderAnimation);
} else {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
}
RenderAnimation(); <!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
canvas {
background-image: url('https://media.wired.com/photos/5d09594a62bcb0c9752779d9/125:94/w_1994,h_1500,c_limit/Transpo_G70_TA-518126.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<canvas id="loading_animation" width="300px" height="200px"></canvas>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/405777.html
標籤：