醉美水芙蓉 发表于 2023-6-10 22:37

学习贴《萨仁 - 草原的甘露》

本帖最后由 醉美水芙蓉 于 2023-6-10 22:40 编辑 <br /><br /><style>

outer-box {
      margin: 0 0 0 calc(50% - 591px);
      position: relative;
      display: block;
      width: 1024px;
      height: 640px;
      background: url('https://pic.imgdb.cn/item/648489981ddac507cc50ff14.jpg');
      z-index: 1;
      --state: paused;
}

css-doodle {
      position: absolute;
}
</style>

<outer-box id="papa">
      <css-doodle grid="1x6" id="mplayer">
                :doodle {
                        @size: 100%;
                        box-shadow: 20px auto;
                        --ww: 300px;
                        --prog: 0;
                        --tt1: '00:00';
                        --tt2: '00:00';
                        --xplace: 50%;
                        --yplace: 98%;
                        --color: snow;
                }
                position: absolute;
                @nth(1) {
                        @size: var(--ww) 2px;
                        @place: var(--xplace) var(--yplace);
                        background: silver;
                        :before, :after { content: ''; }
                        :before {
                              position: absolute;
                              left: 0;
                              width: var(--prog);
                              height: 100%;
                              background: var(--color);
                        }
                        :after {
                              width: 100%;
                              height: 10px;
                              cursor: pointer;
                        }
                }
                @nth(2) {
                        @size: var(--ww) 20px;
                        @place: var(--xplace) calc(var(--yplace) - 20px);
                        :before, :after{
                              position: absolute;
                              width: 100%;
                              height: 100%;
                              color: var(--color);
                        }
                        :before { content: var(--tt1); }
                        :after { content: var(--tt2); text-align: right; }
                }
                @nth(3) {
                        @size: 60px;
                        @place: var(--xplace) calc(var(--yplace) - 36px);
                        cursor: pointer;
                        animation: rot 6s infinite linear var(--state);
                        :after {
                              content: '';
                              @size: inherit;
                              @shape: clover 4;
                              background: var(--color);
                        }
                }
                @match(i ≥ 4) {
                        @size: 100px 88px;
                        @place: 50px 44px;
                        background: url('https://638183.freep.cn/638183/t22/gif/ying1.gif');
                        offset-path: path('M50 44 Q500 300 900 44');
                        offset-distance: 0%;
                        animation: fly 10s calc((@size - @i) * -2.5s) infinite linear var(--state);
                }
                @keyframes rot { to { transform: rotate(360deg); } }
                @keyframes fly { to { offset-distance: 100%; }}
      </css-doodle>
      <css-doodle grid="1" id="lrc">
                :doodle {
                        @size: auto 3em;
                        left: 50%;
                        top: 5%;
                        transform: translate(-50%);
                        --geci: 'HUACHAO';
                        --motion: cover2;
                        --tt: 1s;
                }
                display: grid;
                place-items: center start;
                :before, :after {
                        content: var(--geci);
                        width: fit-content;
                        height: fit-content;
                        font: bold 2.4em Sans-serif;
                        color: #ccc;
                        text-shadow: 1px 1px 2px #000;
                        white-space: pre;
                }
                :after {
                        position: absolute;
                        white-space: pre;
                        width: 0;
                        color: green;
                        overflow: hidden;
                        animation: var(--motion) var(--tt) linear forwards var(--state);
                }
                @keyframes cover1 { from { width: 0; } to { width: 100%; } }
                @keyframes cover2 { from { width: 0; } to { width: 100%; } }
      </css-doodle>

</div>   
<audio id="aud" src="https://www.qqmc.com/mp3/music85267459.mp3" autoplay="autoplay" loop="loop"></audio>

</outer-box>

<script>
(function(){
      let script = document.createElement('script');
      script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
      document.head.appendChild(script);
      let mKey = 0, mFlag = true, slip = 0;
      let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
      let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
      let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
      let calcKey = () => {for (j = 0;j < lrcAr.length;j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
      aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}mplayer.style.setProperty('--prog', 100*aud.currentTime/aud.duration + '%');mplayer.style.setProperty('--tt1', `'${toMin(aud.currentTime)}'`);mplayer.style.setProperty('--tt2', `'${toMin(aud.duration)}'`);});
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      aud.addEventListener('seeked', () => calcKey());
      window.onload = () => {
                let btns = mplayer.shadowRoot.querySelectorAll('cell');
                let ww = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--ww'));
                btns.onclick = () => aud.paused ? aud.play() : aud.pause();
                btns.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / ww;
      }
})();
</script>

千羽 发表于 2023-6-10 22:43

芙蓉的背景图选的好美，精彩的学习帖{:4_187:}

马黑黑 发表于 2023-6-10 22:46

感觉不太复杂吧

红影 发表于 2023-6-10 23:00

制作很漂亮，欣赏水芙蓉美女好帖{:4_187:}

醉美水芙蓉 发表于 2023-6-11 05:31

千羽 发表于 2023-6-10 22:43
芙蓉的背景图选的好美，精彩的学习帖

谢谢千羽美女支持！

醉美水芙蓉 发表于 2023-6-11 05:34

马黑黑 发表于 2023-6-10 22:46
感觉不太复杂吧

还是有难度的，加了视频歌词跑外面做不好！研究了2天，没有发出来问老师？我的问题做多？呵呵！

醉美水芙蓉 发表于 2023-6-11 05:34

红影 发表于 2023-6-10 23:00
制作很漂亮，欣赏水芙蓉美女好帖

谢谢红影美女支持！

樵歌 发表于 2023-6-11 07:15

学得快，做得好！{:4_199:}

醉美水芙蓉 发表于 2023-6-11 08:30

樵歌 发表于 2023-6-11 07:15
学得快，做得好！

樵歌这个是抄作业呢！你也可以的！

红影 发表于 2023-6-11 09:29

醉美水芙蓉 发表于 2023-6-11 05:34
谢谢红影美女支持！

水芙蓉美女选的场景很是优美{:4_187:}

梦缘 发表于 2023-6-11 17:21

精彩分享，欣赏问好！{:4_204:}

醉美水芙蓉 发表于 2023-6-11 17:23

梦缘 发表于 2023-6-11 17:21
精彩分享，欣赏问好！

谢谢老师支持！
页: [1]
查看完整版本: 学习贴《萨仁 - 草原的甘露》