换成gif了，有点小大，放到墨墨的图床上了，视频预览 https://file.uhsea.com/2501/261e7258ce9c9bccacd781305b650f341S.mp4
好吧，录视频忘了调，将就下
本来想着过年再发的，还是先发出来吧，万一能用上呢~
原效果出自油管上一位大佬的，但是他的效果在后面浏览器移除了对其中一个属性的支持后，效果也就不对了，因此我在基础上进行了一些改动。
如果是静态的贴合，那倒是容易许多。动态之后，想要贴合就稍显麻烦，这里我主要就是使用到精灵图的思路，将一整张图作为一个大的精灵图，然后切块定位每个小格子的图片位置，最终进行一个拼合！可以说是一种取巧了~
由于我是在固定的屏幕上使用，因此我的效果相当于是定制的。
主要就是一个图片，按照你分辨率来替换就行，至于使用脚本判断，各位可以自己操作下。
使用精灵图的思路就是使用百分比定位每个格子的位置以及大小，进行计算。
不多哔哔了，直接放代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Block Split Background</title>
<link rel="stylesheet" href="style.min.css">
</head>
<body>
<section id="wrapper">
<h1 class="mainText">
二零二五 乙巳蛇年 <br> 新春吉祥
</h1>
<div class="cover">
</div>
</section>
</body>
<script>
const cover = document.querySelector('.cover');
const posP = cover.getBoundingClientRect();
for (let i = 0; i < 400; i++) {
const t = Math.random() * 5;
let block = document.createElement('div');
block.classList.add('block');
block.style.animationDuration = `${2 + t}s`;
block.style.animationDelay = `${1 + t * 0.5}s`;
cover.appendChild(block);
const pos = block.getBoundingClientRect();
block.style.backgroundPosition =
`${pos.left / posP.width * 100}% ${pos.top / posP.height * 100}%`;
}
setTimeout(()=>{
cover.classList.add('loaded')
document.getElementsByClassName('mainText')[0].innerHTML =
'凛冬散尽 星河长明<br>
愿佬友们新的一年里<br>
平安喜乐 万事顺遂<br>
0 ERROR 0 BUG'
},13000)
</script>
</html>
示例的图片是 1920*1080 的，全屏才能完美效果。
@import url('https://fonts.googleapis.com/css2?family=Long+Cang&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#wrapper {
width: 100%;
height: 100vh;
background:
url(chun.png) center no-repeat,
#ee312d;
position: relative;
overflow: hidden;
.mainText {
width: inherit;
height: inherit;
line-height: 1.1em;
font-family: 'Long Cang', sans-serif;
font-size: min(18vw, 18vh);
color: #fff;
display: grid;
place-content: center;
text-align: center;
text-shadow: 2px 2px 2px #ddd;
}
.cover {
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
transform-style: preserve-3d;
perspective: 500px;
.block {
animation: ani 2s ease-in-out forwards;
}
&.loaded {
.block {
background-image: url(bg.png);
animation: rever 2s ease-in-out forwards;
}
}
}
}
@keyframes ani {
0% {
transform: translateZ(2000px);
background-image: url(bg.png);
}
100% {
transform: translateZ(0px);
background-image: url(bg.png);
border: 1px solid rgba($color: #111, $alpha: 0.05);
}
}
@keyframes rever {
0% {
transform: translateZ(0px);
}
100% {
transform: translateZ(2000px);
}
}
分辨率的坑，留给大佬们出手吧！CODEPEN
