红影 发表于 2023-6-18 14:38

劝君更尽一杯酒（学习黑黑镂空效果）


<style>
#papa {
      margin: 80px 0 0 calc(50% - 593px);
      width: 1024px;
      height: 640px;
      background: lightblue url('https://pic.imgdb.cn/item/648e54d41ddac507ccff46ee.jpg') no-repeat center / cover;
      box-shadow: 3px 3px 20px #000;
      position: relative;
      z-index: 1; overflow: hidden; display: grid; place-items: center;
           --state: paused;   
}
.mybox {
        position: absolute;
        left: 580px;
        top: 40px;
        width: 260px;
        height: 260px;
        background: rebeccapurple url('https://pic.imgdb.cn/item/648e55401ddac507ccffc4f1.jpg') no-repeat center / cover;
        border-radius: 50%;
        clip-path: polygon(
                0 0, 100% 0, 100% 100%, 50% 100%, 50% 95%, 67% 67%, 95% 50%,
      67% 33%, 50% 5%, 33% 33%, 5% 50%, 33% 67%, 50% 95%, 50% 100%, 0 100%
        );
animation: move 12s infinite linear var(--state);
}
#pic {
        position: absolute;
        left: 594px;
        top: 54px;
        width: 226px;
        height: 226px;
        opacity: .85;
        border-radius: 50%;
}
@keyframes move { to { transform: rotate(360deg); } }
@keyframes rot2 { from { transform: rotate(-15deg) scale(1); } to { transform: rotate(15deg) scale(1.5); } }
.tit { position: absolute; left: 50px; top:10px; display: grid;place-items: center; font: bold 2.8em '楷体',serif; color: SandyBrown; text-shadow: 1px 1px 2px tan;writing-mode: vertical-rl; }
.vid { position: absolute; width: 1024px; height: 695px; top: -55px;object-fit: cover; opacity: .98; clip-path: circle(78% at bottom) ;mix-blend-mode: screen;}
</style>
<div id="papa">
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec495391393a_10s_big.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<img id="pic" src="https://pic.imgdb.cn/item/648e53a21ddac507ccfdf37e.gif" alt="" />
<div class="mybox"></div>
<css-doodle grid="4x1" id="mplayer">
        :doodle {
                @size: 1024px 640px;
                display: block;
                opacity: .95;
                position: absolute;
                z-index: 1;       
                --geci: 'HUACHAO';
                --motion: cover2;
                --ww: 300px;
                --prog: 0;
                --tt: 1s;
                --tt1: '00:00';
                --tt2: '00:00';
                --xplace: 69%;
                --yplace: 94%;
                --color: Gold;
                --state: paused;
        }
        position: absolute;
        @nth(1) { /* 歌词 */
                @size: auto 3em;
                @place: 69% 76%;
                transform: translate(-50%);
                display: grid;
                place-items: center start;
                :before, :after {
                        content: var(--geci);
                        width: fit-content;
                        height: fit-content;
                        font: bold 1.8em Sans-serif;
                        color: #ccc;
                        text-shadow: 1px 1px 2px #000;
                        white-space: pre;
                }
                :after {
                        position: absolute;
                        white-space: pre;
                        width: 0;
                        color: Gold;
                        overflow: hidden;
                        animation: var(--motion) var(--tt) linear forwards var(--state);
                }
        }
        @nth(2) { /* 进度条 */
                @size: var(--ww) 2px;
                @place: var(--xplace) calc(var(--yplace) - 10px);
                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(3) { /* 按钮 */
                @size: 60px;
                @place: var(--xplace) calc(var(--yplace) - 52px);
                cursor: pointer;
                animation: rot 6s infinite linear var(--state);
                :after {
                        content: '';
                        @size: inherit;
                        @shape: clover 4;
                        background-color: Navy;
                        background-image: radial-gradient(red, Yellow, green);
                }
        }
        @nth(4) { /* 播放时间 */
                @size: var(--ww) 20px;
                @place: var(--xplace) calc(var(--yplace) - 30px);
                :before, :after{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        color: var(--color);
                }
                :before { content: var(--tt1); }
                :after { content: var(--tt2); text-align: right; }
        }
        @keyframes cover1 { from { width: 0; } to { width: 100%; } }
        @keyframes cover2 { from { width: 0; } to { width: 100%; } }
        @keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
</div>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=359045.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
(function(){
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
        document.head.appendChild(script);
let vid = document.querySelector('.vid');
        let mKey = 0, mFlag = true, slip = 0.6;
        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 = () => aud.paused ? (mplayer.style.setProperty('--state', 'paused'),papa.style.setProperty('--state', 'paused'), vid.pause() ) : (mplayer.style.setProperty('--state','running'),papa.style.setProperty('--state', 'running'), vid.play());
        let showLrc = (time) => {mplayer.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');mplayer.style.setProperty('--geci', '"' + lrcAr + '"');mplayer.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 = (e) => aud.currentTime = e.offsetX * aud.duration / ww;
                btns.onclick = () => aud.paused ? aud.play() : aud.pause();
        }
        let outstr = '劝君更尽一杯酒', num = 0;
        Array.from({length: outstr.length}).forEach((item,key) => {
                item = document.createElement('span');
                item.className = 'tit';
                item.innerText = outstr.slice(key,key+1);
                item.style.cssText += `top: ${key * 70 + 50}px`;
                papa.appendChild(item);
        });
        let tits = document.querySelectorAll('.tit');
        (function chgFn() {
                tits.style.animation = 'rot2 linear 1s backwards';
                setTimeout( () => {
                        chgFn();
                        tits.style.animation = '';
                }, 1200);
                num += 1;
                if(num > outstr.length - 1) num = 0;
        })();
})();
</script>

红影 发表于 2023-6-18 14:40

把那个镂空四边形再多加4点，让它们往里面再进来点。总是复制的不好意思了，自己也学着挖个{:4_173:}

千羽 发表于 2023-6-18 14:41

这个小巧精致的播放器好漂亮，影儿好像再加工过了{:4_203:}

红影 发表于 2023-6-18 14:42

把原图截了一块，作为镂空的背景。有镂空的遮挡，可以让倒酒动作不那么突兀。{:4_173:}

千羽 发表于 2023-6-18 14:43

镂空效果上也加了冲茶的图案，好厉害啊{:4_187:}

红影 发表于 2023-6-18 14:44

又去复习了一下文字变大的效果，因为歌曲前奏太短，加歌名替换太快，索性用个变化的文字放旁边。
其他的动态都能按下暂停时停下来，就那个复习的文字，不知道怎么让它停下来{:4_189:}

红影 发表于 2023-6-18 14:45

对了，倒酒动态也没停，这个就不用停了，酒不能断，还得继续喝呢{:4_173:}

千羽 发表于 2023-6-18 14:45

红影 发表于 2023-6-18 14:42
把原图截了一块，作为镂空的背景。有镂空的遮挡，可以让倒酒动作不那么突兀。

哈哈，俺看成是冲茶了{:4_173:}

千羽 发表于 2023-6-18 14:45

好不简单啊，影儿棒棒哒{:4_187:}

小辣椒 发表于 2023-6-18 14:56

亲爱的，这个效果太漂亮了{:4_178:}

梦油 发表于 2023-6-18 16:07

你这是一个永远到不满的魔杯{:4_189:}

樵歌 发表于 2023-6-18 17:01

各种技术综合运用，有创新！和南无月学霸有得一拼！{:4_195:}

小文 发表于 2023-6-18 17:05

恩师太厉害了，真了不起！{:4_187:}{:4_191:}

岩新新 发表于 2023-6-18 17:12

欣赏精彩制作！

红影 发表于 2023-6-18 19:33

千羽 发表于 2023-6-18 14:41
这个小巧精致的播放器好漂亮，影儿好像再加工过了

羽儿回复得那么快啊，播放器没变，就是加了个径向渐变的色彩而已{:4_173:}

红影 发表于 2023-6-18 19:33

千羽 发表于 2023-6-18 14:43
镂空效果上也加了冲茶的图案，好厉害啊

在背后加了个动态图片，这样好玩点{:4_173:}

红影 发表于 2023-6-18 19:35

千羽 发表于 2023-6-18 14:45
哈哈，俺看成是冲茶了

没事啊，应该是冲茶呢，这个帖子想要个倒酒的，就把它硬当作是酒了{:4_189:}

红影 发表于 2023-6-18 19:35

千羽 发表于 2023-6-18 14:45
好不简单啊，影儿棒棒哒

这个也挺简单的。谢谢羽儿鼓励，谬赞了{:4_187:}

红影 发表于 2023-6-18 19:36

小辣椒 发表于 2023-6-18 14:56
亲爱的，这个效果太漂亮了

亲爱的，我就做了个镂空效果，挺简单的啊{:4_173:}

红影 发表于 2023-6-18 19:37

梦油 发表于 2023-6-18 16:07
你这是一个永远到不满的魔杯

哈哈，那个动图就是这样的{:4_189:}
页: [1] 2 3 4 5 6
查看完整版本: 劝君更尽一杯酒（学习黑黑镂空效果）