如果用你的专业送上新春祝福,会是什么样的?
html lang='en'>
head>
meta charset='UTF-8'>
meta name='viewport' content='width=device-width, initial-scale=1.0'>
title>新年快乐title>
style>
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: url('https://img.tukuppt.com/bg_grid/00/23/96/53OUI2mWyY.jpg%21/fh/350') no-repeat center center fixed;
background-size: cover;
color: white;
font-family: 'Pacifico', cursive; /* 使用Google字体 */
}
.container {
text-align: center;
padding: 20px;
border-radius: 15px;
}
h1 {
font-size: 4em;
animation: glow 1.5s ease-in-out infinite alternate, jump 1s infinite;
}
p {
font-size: 1.2em;
}
@keyframes glow {
from {
text-shadow: 0 0 8px #fff, 0 0 12px #fff, 0 0 24px #e60073, 0 0 48px #e60073;
}
to {
text-shadow: 0 0 16px #fff, 0 0 32px #ff4da6, 0 0 64px #ff4da6;
}
}
@keyframes jump {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
style>
head>
body>
div class='container'>
h1 id='greeting'>新年快乐!h1>
p>愿你的新年充满温馨,美丽,和平与喜悦。p>
p>让2024年成为你迄今为止最棒的一年!p>
div>
script>
document.addEventListener('DOMContentLoaded', () => {
const greeting = document.getElementById('greeting');
let colors = ['#FF5733', '#FFC300', '#DAF7A6', '#C70039', '#900C3F', '#581845'];
let index = 0;
setInterval(() => {
if (index >= colors.length) index = 0;
greeting.style.color = colors[index++];
}, 1000);
});
script>
body>
html>
效果如下:
赞51
踩0