HTML
<div id="rain">
<h1 class="h1" data-spotlight="Hello World">Hello World</h1>
</div>
CSS
body {
font-family: "Arial", "Microsoft YaHei", "黑体", sans-serif;
margin: 0;
padding: 0;
}
#rain {
display: flex;
justify-content: center;
align-items: center;
position: relative;
font-size: 50px;
min-height: 100vh;
overflow: hidden;
background: linear-gradient(#333, #999, #1f4794, #1f4735);
}
.h1 {
position: relative;
color: #333;
font-size: 2em;
letter-spacing: 2rem;
-webkit-box-reflect: below 1px linear-gradient(transparent, #0008);
line-height: 0.7;
}
.h1::after {
content: attr(data-spotlight);
position: absolute;
left: 0;
top: 0;
color: transparent;
-webkit-clip-path: ellipse(100px 100px at 0% 50%);
clip-path: ellipse(100px 100px at 0% 50%);
-webkit-background-clip: text;
background-clip: text;
animation: feSpotLight 5s infinite;
}
.raindrop {
display: inline-block;
position: absolute;
top: 0;
width: 5px;
height: 5px;
background: radial-gradient(#8fd4fc, #52b1f2, #0599fc);
border-radius: 5000px;
transform: rotateY(45deg);
animation: raindrop .8s;
}
.ripple {
display: inline-block;
position: absolute;
border: 2px solid #8fd4fc;
border-radius: 5000px;
background: rgba(0, 0, 0, 0);
transform: rotateX(72deg);
animation: ripple .6s;
}
@keyframes raindrop {
0% {
top: 5%;
}
10% {
top: 10%;
}
20% {
top: 20%;
}
30% {
top: 30%;
}
40% {
top: 40%;
}
50% {
top: 50%;
}
60% {
top: 60%;
}
70% {
top: 70%;
}
80% {
top: 80%;
}
90% {
top: 90%;
}
100% {
top: 95%;
}
}
@keyframes ripple {
0% {
width: 2px;
height: 2px;
}
10% {
width: 4px;
height: 4px;
}
20% {
width: 6px;
height: 6px;
}
30% {
width: 8px;
height: 8px;
}
40% {
width: 10px;
height: 10px;
}
50% {
width: 12px;
height: 12px;
}
60% {
width: 14px;
height: 14px;
}
70% {
width: 16px;
height: 16px;
}
80% {
width: 18px;
height: 18px;
}
90% {
width: 20px;
height: 20px;
}
100% {
width: 22px;
height: 22px;
}
}
@keyframes feSpotLight {
0% {
-webkit-clip-path: ellipse(100px 100px at 0% 50%);
clip-path: ellipse(100px 100px at 0% 50%);
}
50% {
-webkit-clip-path: ellipse(100px 100px at 50% 50%);
clip-path: ellipse(100px 100px at 100% 50%);
}
100% {
-webkit-clip-path: ellipse(100px 100px at 50% 50%);
clip-path: ellipse(100px 100px at 0% 50%);
}
0%,
18%,
20%,
50.1%,
60%,
65.1%,
80%,
90.1%,
92% {
color: rgb(40, 131, 216);
}
15%,
23%,
48%,
58%,
75%,
82%,
96% {
color: rgb(212, 47, 47);
}
18.1%,
20.1%,
50.1%,
60%,
65.1%,
80%,
90.1%,
100% {
color: rgb(203, 219, 60);
text-shadow: 0 0 0 10px #03bcf4;
}
}
JS
window.onload = function onload() {
let rain = document.getElementById('rain');
let = clientWidth = document.body.clientWidth;
let = clientHeight = document.body.clientHeight;
function dorpRain() {
setTimeout(() => {
if (typeof clientWidth !== 'undefined' && null !== clientWidth) {
let el = document.createElement('div');
el.setAttribute('class', 'raindrop');
el.style.left = parseInt(Math.random() * clientWidth, 10) + 'px';
rain.appendChild(el);
setTimeout(() => {
rain.removeChild(el);
}, parseInt(400 + Math.random() * 350, 10))
}
dorpRain();
}, parseInt(10 + Math.random() * 10, 10))
}
function ripple() {
setTimeout(() => {
if (typeof clientWidth !== 'undefined' && null !== clientWidth && typeof clientHeight !== 'undefined' && null !== clientHeight) {
let el = document.createElement('div');
el.setAttribute('class', 'ripple');
el.style.left = parseInt(Math.random() * clientWidth, 10) + 'px';
el.style.top = parseInt(clientHeight / 100 * 50 + (Math.random() * (clientHeight / 100 * 50)), 10) + 'px';
rain.appendChild(el);
setTimeout(() => {
rain.removeChild(el);
}, 600)
}
ripple();
}, parseInt(10 + Math.random() * 10, 10))
}
dorpRain();
ripple();
}
function debounce(fn, wait, context) {
let timer = null;
return function () {
timer ? clearTimeout(timer) : '';
timer = setTimeout(() => {
fn.apply(context, arguments);
}, wait)
}
}
function onresize(event) {
clientWidth = document.body.clientWidth;
clientHeight = document.body.clientHeight;
}
window.addEventListener("resize", debounce(onresize, 200, null));
Timer()
setInterval(Timer, 1000)
function Timer() {
let h1 = document.querySelector('h1')
h1.attributes[1].value;
var date = new Date();
var h = date.getHours();
if (h < 10) {
h1.innerHTML = '上班打卡';
h1.attributes[1].value = '上班打卡';
}
else if (h < 12) {
h1.innerHTML = '上班中~';
h1.attributes[1].value = '上班中';
}
else if (h < 14) {
h1.innerHTML = '吃饭睡觉打豆豆';
h1.attributes[1].value = '吃饭睡觉打豆豆';
} else if (h < 18) {
h1.innerHTML = '持续上班中~';
h1.attributes[1].value = '持续上班中~';
} else if (h < 20) {
h1.innerHTML = '要下班了 记得打卡';
h1.attributes[1].value = '要下班了 记得打卡';
}
else {
h1.innerHTML = 'HELLO WORLD';
h1.attributes[1].value = 'HELLO WORLD';
}
}