介绍一款开源动态壁纸软件Lively Wallpaper
这款壁纸软件也上架了微软商店Lively Wallpaper - Microsoft Apps，还获得了2023年微软商店个性化分类精选app奖项。
Announcing the Microsoft Store App Awards 2023 Winners! - Windows Developer Blog
lively wallpaper 支持添加html文件作为动态壁纸，所以基于html、css、js可以实现很炫酷的动态桌面。
那么哪里去找炫酷的html呢？
codepen.io 网站上面有很多大佬用纯html、css、js实现的炫酷效果，可以把这些效果搭配lively wallpaper用作动态桌面。
例如codepen上面有一个“动态随机emoji跳动”效果的html、css、js实现A Pen by Chokcoco (codepen.io)。
可以将效果写成一个html文件导入lively wallpaper。当然也可以自己在大佬的基础上进行定制化改造。例如为了给工作中劳累无聊的我增加一点动力，我魔改了一款“工作激励”动态壁纸。html代码贴在下方：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body, html {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden; /* 防止页面滚动 */
background-color: #000000;
display: flex;
justify-content: center;
align-items: center;
}
.element-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.element {
position: absolute;
font-size: 150px;
perspective: 2000px;
transform-style: preserve-3d;
animation: rotate 2s alternate infinite ease-in-out,
fall 6s alternate infinite cubic-bezier(.22,.16,.04,.99) forwards;
}
.emoji::before,
.emoji::after,
.text::before,
.text::after {
content: var(--content, "\1F595");
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.emoji::after,
.text::after {
transform: translate(-50%, -50%) translateZ(-4px);
}
.text-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.text {
font-size: 24px;
color: white;
animation: jump 1s infinite alternate;
}
@keyframes rotate {
0% {
transform: rotateY(-35deg);
}
100% {
transform: rotateY(35deg);
}
}
@keyframes fall {
0% {
transform: scale(1.25, 0.75) translateY(150px);
}
25% {
transform: scale(1, 1) translateY(0);
}
100% {
transform: scale(1, 1) translateY(0);
}
}
@keyframes jump {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
</style>
</head>
<body>
<div class="element-container" id="elements">
</div>
<script>
function generateRandomPosition() {
const randomTop = Math.random() * 100;
const randomLeft = Math.random() * 100;
return {top: randomTop, left: randomLeft};
}
function generateRandomEmoji() {
return String.fromCodePoint(0x1F595);
}
function createEmoji() {
const emoji = document.createElement('div');
emoji.classList.add('element', 'emoji');
const position = generateRandomPosition();
emoji.style.top = `${position.top}%`;
emoji.style.left = `${position.left}%`;
emoji.style.setProperty('--content', `"${generateRandomEmoji()}"`);
return emoji;
}
function createText() {
const text = document.createElement('div');
text.classList.add('element', 'text');
const position = generateRandomPosition();
text.style.top = `${position.top}%`;
text.style.left = `${position.left}%`;
text.innerText = "这破班不上也罢";
return text;
}
function animateElements() {
const elementsContainer = document.getElementById('elements');
function removeChildren(container) {
while (container.firstChild) {
container.removeChild(container.firstChild);
}
}
function addRandomElements() {
const numElements = Math.floor(Math.random() * 3) + 1; // 添加 1 到 3 个元素
for (let i = 0; i < numElements; i++) {
const element = Math.random() < 0.5 ? createEmoji() : createText(); // 随机创建 Emoji 或者 文本
elementsContainer.appendChild(element);
}
}
function animate(t) {
if (t - time < step) {
requestAnimationFrame(animate);
return
}
time = t
removeChildren(elementsContainer);
addRandomElements();
requestAnimationFrame(animate);
}
let time = 0
let step = 500
animate(time);
}
animateElements();
</script>
</body>
</html>
这份html会每隔0.5s在屏幕的随机位置刷新几个“友好”的手势和“包含正能量”的话语，让工作中的我充满干劲。
