【画笔似有马良功】让世界充满爱
<div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1929826">
<style>
#mydiv {
margin: 10px 0 0 calc(50% - 521px);
width: 1100px;
height: 640px;
border: 1px solid tan;
background: url('http://bohann.net/data/attachment/forum/202308/10/214831xo7200gybb10xv7y.gif') center/cover no-repeat;
box-shadow: 0 0 8px #000;
position: relative;
overflow: hidden;
--state: paused;
}
.circle {
width: 90px;
height: 90px;
top: 0;left: 0;
border-radius: 60%;
border: 3px solid tan;
border-color: red tan pink purple;
box-sizing: border-box;
background: url('https://img.soogif.com/OElYYjRCK566nWEl6uMTVsvxDHSAWZV9.gif') no-repeat center/cover;
display: block;
position: absolute;
offset-path: path('M120 320 Q512 -200, 980 320');
cursor: pointer;
opacity: .95;
animation: rot 6s var(--delay) infinite linear var(--state);
}
.txtBg {
position: absolute;
left: -10px; top: 10px;
font-size: 2.0rem;
color: transparent;
width: 400px;
height: 100px;
line-height: 100px;
text-align: center;
background-image: linear-gradient(90deg, green, olive, transparent, tomato, green);
background-size: 400px 100px;
background-position: 500px 0;
border: 1px solid;
background-clip: text;
-webkit-background-clip: text;
animation: chgc 4s linear infinite;
}
@keyframes chgc {
from { background-position: -500px 0; }
to { background-position: 0 0; }}
@keyframes rot { to { transform: rotate(360deg); } }
#textClock {
position: absolute;
right: 115px; bottom: 264px;
font-size: 20px;
color: Sienna;
font-family:仿宋;
text-shadow:1px 1px 2px #222222;
}
.vid { position: absolute; width: 1100px; height: 655px; top: -100px; right:0px; object-fit: cover; opacity: .45; clip-path: circle(78% at bottom) ;mix-blend-mode: screen;}
</style>
<div id="mydiv">
<div class="txtBg">让世界充满爱</div>
<video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/52/5ec746f5eec22.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div id="textClock"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1298516053.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
(function() {
let spans = [];
let setRgb = () => {
let ar = [];
for(i = 0; i < 3; i ++) {
ar.push(Math.floor(Math.random() * 256));
}
return ar.join(',');
};
let mkEles = (papa,n) => {
Array.from({length: n}).forEach( (item,key) => {
item = document.createElement('span');
item.className = 'circle';
item.style.cssText += `
border-color: rgb(${setRgb()}) rgb(${setRgb()}) rgb(${setRgb()}) rgb(${setRgb()});
offset-distance: ${100 / n * (key + .5)}%;
--delay: ${Math.random() * -6}s;
`;
spans.push(item);
papa.appendChild(item);
});
};
mkEles(mydiv,8);
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
spans.forEach((item) => item.onclick = () => aud.paused ? aud.play() : aud.pause());
showTime();
setInterval(showTime, 1000);
function showTime(){
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var day = now.getDay();
var hour = now.getHours();
if(hour < 10) hour = "0" + hour;
var minute = now.getMinutes();
if(minute < 10) minute = "0" + minute;
var second = now.getSeconds();
if(second < 10) second = "0" + second;
document.getElementById("textClock").innerHTML = year + "年" + month + "月" + date + "日 星期" + toHz(day) + "" + hour + ":" + minute + ":" + second;
}
function toHz(num) {
var hz = "日一二三四五六";
return(hz.charAt(num));
}
})();
</script></td></tr></table> 射灯效果不错{:10_402:}
页:
[1]