论坛 › 欢乐水吧 › 《绘画作品》TO小文

红影 发表于 2023-6-2 11:11

《绘画作品》TO小文

<style>
#papa {      
      margin: 80px 0 0 calc(50% - 593px);
      width: 1024px;
      height: 640px;      
      background: #3C3A50 url('https://pic.imgdb.cn/item/64775699f024cca1732d268b.jpg') center/cover no-repeat;
      box-shadow: 0px 0px 20px gray;
      overflow: hidden;      
      position: relative;
}
#myplay {
        position: absolute;
        width: 100px;
        height: 100px;
        left: 90px; top: 80px;
        display: grid;
        place-items: center;
        --state: paused; }
.circle {
      position: absolute;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 2px solid var(--bdcolor);
      cursor: pointer;
}
@keyframes rotZ {
      0% { transform: perspective(2000px) translateZ(-1000px) rotateX(var(--degX)) rotateY(var(--degY)) rotateZ(0deg); }
      50% { transform: perspective(2000px) translateZ(10px) rotateX(calc(var(--degX) + 180deg)) rotateY(calc(var(--degY) + 180deg)) rotateZ(0deg); }
      100%{ transform: perspective(2000px) translateZ(-1000px) rotateX(calc(var(--degX) + 360deg)) rotateY(calc(var(--degY) + 360deg)) rotateZ(360deg); }
}
.vid { position: absolute; top: -70px; left: -100px; width: 1224px; height: 800px;object-fit: cover; opacity: .2; mix-blend-mode: screen; }
.txtBg {
        position: absolute;
      left: 220px; top: 70px;
      font-size: 2.5rem;
      color: transparent;
      width: 500px;
      height: 100px;
      line-height: 100px;
      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; }
}
#textClock {
        position: absolute;
      left: 340px; top: 170px;
      font-size: 20px;
        color: LightSteelBlue;
        font-family:微软雅黑;
        text-shadow:1px 1px 2px #222222;
}
</style>

<div id="papa">
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/98/5b4f6be5616e1_10s_big.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div id="myplay"></div>
<div class="txtBg">《绘画作品》_经典钢琴曲</div>
<div id="textClock"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1850988217" loop="loop" autoplay="autoplay"></audio>

<script>
let total = 60, spans = [];
let mState = () => myplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');
Array.from({length: total}).forEach( (item) => {
      let sp = document.createElement('span');
      sp.className = 'circle';
      let aX = Math.random() * 360, aY = Math.random() * 360, ww = Math.random() * 150 + 50, hh = Math.random() * 100 + 50;
      sp.style.cssText += `
                --bdcolor: #${Math.random().toString(16).substr(-6)};
                --degX: ${aX}deg;
                --degY: ${aY}deg;
                width: ${ww}px;
                height: ${ww}px;
                transform: perspective(2000px) rotateY(${aY}deg) rotateX(${aX}deg);
                animation: rotZ 16s infinite linear var(--state);
      `;
      myplay.appendChild(sp);
      spans.push(sp);
});
spans.forEach((item) => item.onclick = () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
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>

红影 发表于 2023-6-2 11:13

@小文那两个半圆的里面的画作熟悉吧{:4_173:}
说过送你个带时钟的的帖子，感觉这个里面放时钟不太好，就放了文字的当前时间。

红影 发表于 2023-6-2 11:14

正好前面就想练习黑黑的《leap》里的效果一直没做帖，这个里面就试试使用。
感谢黑黑的代码{:4_187:}

小文 发表于 2023-6-2 11:59

感激恩师，太喜欢了，简直太喜欢了。美极了！收到了最开心的礼物！{:4_187:}{:4_191:}{:4_190:}{:4_180:}

小文 发表于 2023-6-2 12:01

红影 发表于 2023-6-2 11:13
@小文那两个半圆的里面的画作熟悉吧
说过送你个带时钟的的帖子，感觉这个里面放时钟不太好，就 ...

一眼入眼，谢谢恩师！跪拜！{:4_176:}

红影 发表于 2023-6-2 12:03

小文 发表于 2023-6-2 11:59
感激恩师，太喜欢了，简直太喜欢了。美极了！收到了最开心的礼物！

想给小文弄个画室的，没搜到好的图图，这个有点像展室了{:4_173:}

小文 发表于 2023-6-2 12:04

好酷玄，移动的灯光，哇，真厉害！小文太开心了！

红影 发表于 2023-6-2 12:05

小文 发表于 2023-6-2 12:01
一眼入眼，谢谢恩师！跪拜！

那是小文的大作呢，受背景限制，画面弄得有点小，不好意思{:4_173:}

小文 发表于 2023-6-2 12:08

红影 发表于 2023-6-2 12:03
想给小文弄个画室的，没搜到好的图图，这个有点像展室了

这个很美的，效果很棒很棒了！{:4_187:}

小文 发表于 2023-6-2 12:08

红影 发表于 2023-6-2 12:05
那是小文的大作呢，受背景限制，画面弄得有点小，不好意思

铭感于心，深谢恩师！再拜！{:4_180:}

红影 发表于 2023-6-2 13:13

小文 发表于 2023-6-2 12:08
这个很美的，效果很棒很棒了！

小文喜欢就好，毕竟看喜欢的东西会让人开心{:4_173:}

红影 发表于 2023-6-2 13:13

小文 发表于 2023-6-2 12:04
好酷玄，移动的灯光，哇，真厉害！小文太开心了！

灯光很简单啊，是加了个视频效果{:4_173:}

小文 发表于 2023-6-2 13:15

红影 发表于 2023-6-2 13:13
小文喜欢就好，毕竟看喜欢的东西会让人开心

谢谢恩师，真的开心极了。{:4_204:}{:4_204:}{:4_204:}{:4_191:}

红影 发表于 2023-6-2 13:17

小文 发表于 2023-6-2 12:08
铭感于心，深谢恩师！再拜！

小文没必要这么客气的呢{:4_173:}

樵歌 发表于 2023-6-2 13:17

各种马术的综合运用！小文收礼开心！

红影 发表于 2023-6-2 13:18

小文 发表于 2023-6-2 13:15
谢谢恩师，真的开心极了。

正好有这样一首钢琴曲，送小文正好。都没想到有这样的曲名呢{:4_173:}

红影 发表于 2023-6-2 13:19

樵歌 发表于 2023-6-2 13:17
各种马术的综合运用！小文收礼开心！

谢谢师兄鼓励{:4_204:}

樵歌 发表于 2023-6-2 13:19

这是要办画展的节奏了，布置得真是精彩！

红影 发表于 2023-6-2 13:40

樵歌 发表于 2023-6-2 13:19
这是要办画展的节奏了，布置得真是精彩！

就是啊，画展很适合小文{:4_173:}

梦油 发表于 2023-6-2 15:03

那个时钟可真好，分秒不差。

查看完整版本: 《绘画作品》TO小文