为实现每行四个图片的布局，并且在页面加载时每个图片依次进行360°旋转，可以使用以下HTML和CSS代码，并且添加一些JavaScript来控制动画的顺序。
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Rotation</title>
<style>
.flex {
display: flex;
flex-wrap: wrap;
}
.flex img {
width: 25%; /* 每行四个图片，即宽度为 25% */
opacity: 0; /* 初始透明度 */
visibility: hidden; /* 初始隐藏 */
transition: transform 1s ease-in-out, opacity 1s ease-in-out, visibility 1s; /* 过渡效果 */
}
.flex img.visible {
visibility: visible; /* 显示图片 */
opacity: 1; /* 完全不透明 */
}
.flex img.rotated {
transform: rotate(360deg); /* 旋转360度 */
}
</style>
</head>
<body>
<div class="flex flex-wrap">
<img src="/static/images/icon/website_icon_1.png" loading="lazy">
<img src="/static/images/icon/website_icon_2.png" loading="lazy">
<img src="/static/images/icon/website_icon_3.png" loading="lazy">
<img src="/static/images/icon/website_icon_4.png" loading="lazy">
<img src="/static/images/icon/website_icon_5.png" loading="lazy">
<img src="/static/images/icon/website_icon_6.png" loading="lazy">
<img src="/static/images/icon/website_icon_7.png" loading="lazy">
<img src="/static/images/icon/website_icon_8.png" loading="lazy">
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const images = document.querySelectorAll(".flex img");
let delay = 0;
images.forEach((img, index) => {
setTimeout(() => {
img.classList.add("visible"); // 显示图片
setTimeout(() => {
img.classList.add("rotated"); // 添加旋转效果
}, 50); // 在显示图片后稍微延迟添加旋转效果
}, delay);
delay += 1000; // 每个图片延迟1秒开始旋转
});
});
</script>
</body>
</html>
