论坛 › 『欢庆双节·情满东篱』 › 【画笔似有马良功】祝活动圆满成功

非常开心 发表于 2023-9-30 12:37

【画笔似有马良功】祝活动圆满成功

本帖最后由 非常开心 于 2023-9-30 14:16 编辑 <br /><br /><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% - 593px);
        width: 1100px;
        height: 640px;
        border: 1px solid tan;
        background: url('http://bohann.net/data/attachment/forum/202309/18/195008djfxxxwfddtwwjph.gif') center/cover no-repeat;
        box-shadow: 0 0 8px #000;
        position: relative;
        overflow: hidden;
        --state: paused;
}
.circle {
        width: 100px;
        height: 100px;
        top: 0;left: 0;
        border-radius: 50%;
        border: 3px solid tan;
        border-color: red tan pink purple;
        box-sizing: border-box;
        background: url('http://bohann.net/data/attachment/forum/202309/18/194806eiyeydntne62yeuy.png') 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: 1000px;
      height: 900px;
      line-height: 900px;
      text-align: center;
      background-image: linear-gradient(90deg, green, olive, transparent, tomato, green);
      background-size: 500px 100px;
      background-position: 500px 0;
      border: 1px solid;
      background-clip: text;
      -webkit-background-clip: text;
      animation: chgc 2s linear infinite;
}
@keyframes chgc {
      from { background-position: -500px 0; }
      to { background-position: 0 0; }}
@keyframes rot { to { transform: rotate(360deg); } }
#textClock {
        position: absolute;
      right: 130px; bottom: 64px;
      font-size: 20px;
        color: Sienna;
        font-family:黑体;
        text-shadow:2px 2px 4px #DC143C;
}
.vid { position: absolute; width: 1100px; height: 655px; top: -100px; right:0px; object-fit: cover; opacity: .35; clip-path: circle(78% at bottom) ;mix-blend-mode: screen;}
</style>

<div id="mydiv">
<div class="txtBg">祝东篱雅苑两节活动圆满成功</div>

</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2075857454.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>

瞳萤 发表于 2023-9-30 14:16

喜庆的音画，双节快乐~

蜻蜓 发表于 2023-9-30 16:56

挺欢快的！{:10_402:}

楚心兰 发表于 2023-9-30 17:22

O(∩_∩)O哈哈~喜气洋洋

查看完整版本: 【画笔似有马良功】祝活动圆满成功