论坛 › 欢乐水吧 › 巫娜·春城孤鹤

马黑黑 发表于 2022-8-2 12:34

巫娜·春城孤鹤

<style>
#papa { left: -214px; width: 1024px; height: 600px; display: grid; place-items: center; background: gray url('https://638183.freep.cn/638183/Pic/81/781.jpg') no-repeat center/cover; box-shadow: 3px 3px 26px #000; position: relative; }
#papa div, #papa img, #papa span { position: absolute; }
#mama { width: 400px; height: 400px; left: calc(50% - 200px); top: calc(50% - 200px); background: radial-gradient(at 40% 30%, snow, transparent); border-radius: 50%; display: grid; place-items: center; }
#disc { right: calc(50% - 30px); top: calc(50% - 30px); width: 60px; height: 60px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; opacity: 0; cursor: pointer; animation: rot 2s linear infinite; }
#mpic { width: 300px; height: 211px; right: calc(50% - 150px); bottom: calc(50% - 105px); opacity: 0; }
#tit { font: bold 2em/2.4em sans-serif; color: #6795ac; text-shadow: 1px 1px 2px rgba(0,0,0,.75); opacity: 0; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <div id="disc"></div>
        <img id="mpic" src="https://638183.freep.cn/638183/Pic/81/he.png" alt="" />
        <div id="mama"><span id="tit">巫娜 : 春城孤鹤</span></div>
</div>

<script>

let idx = 0, aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=27965176.mp3';
aud.loop = true;
aud.autoplay = true;

disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
let TT = setTimeout(change,3000);

disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');

function change() {
        let aniAr = [
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
        ];
        let ele = aniAr;
        ele.style.transition = 'all 3s';
        ele.style.cssText += aniAr;
        idx ++;
        idx <= aniAr.length - 1 ? TT = setTimeout(change, 3000) : clearTimeout(TT);
}
</script>

红影 发表于 2022-8-2 13:49

当中的小图像是百宝箱，里面可以出来好多东西呢。黑黑的制作真漂{:4_187:}

加林森 发表于 2022-8-2 13:56

好厉害。制作得真有意思的。{:4_199:}

梦油 发表于 2022-8-2 16:35

黑黑朋友不断地推陈出新，制作出一个又一个令人拍案叫绝的惊人作品。

马黑黑 发表于 2022-8-2 17:09

梦油 发表于 2022-8-2 16:35
黑黑朋友不断地推陈出新，制作出一个又一个令人拍案叫绝的惊人作品。

这支曲子非常不错

马黑黑 发表于 2022-8-2 17:14

红影 发表于 2022-8-2 13:49
当中的小图像是百宝箱，里面可以出来好多东西呢。黑黑的制作真漂

设计的时候就是放一个箱子的，后来赶时间，就用个面板代替了{:5_117:}

马黑黑 发表于 2022-8-2 17:15

加林森 发表于 2022-8-2 13:56
好厉害。制作得真有意思的。

元素不算多，动画也就在布局好之后没了

梦油 发表于 2022-8-2 17:42

马黑黑 发表于 2022-8-2 17:09
这支曲子非常不错

是的，是的，我感觉到了。

加林森 发表于 2022-8-2 17:43

马黑黑 发表于 2022-8-2 17:15
元素不算多，动画也就在布局好之后没了

挺好看的。

马黑黑 发表于 2022-8-2 17:55

加林森 发表于 2022-8-2 17:43
挺好看的。

还行的吧

马黑黑 发表于 2022-8-2 17:55

梦油 发表于 2022-8-2 17:42
是的，是的，我感觉到了。

巫娜的古琴弹的好

加林森 发表于 2022-8-2 18:01

马黑黑 发表于 2022-8-2 17:55
还行的吧

你想长胖吗？这么谦虚。{:4_203:}

马黑黑 发表于 2022-8-2 18:36

加林森 发表于 2022-8-2 18:01
你想长胖吗？这么谦虚。

本来就胖，想不想都一样

加林森 发表于 2022-8-2 18:47

马黑黑 发表于 2022-8-2 18:36
本来就胖，想不想都一样

厉害。我是瘦子。

马黑黑 发表于 2022-8-2 18:49

加林森 发表于 2022-8-2 18:47
厉害。我是瘦子。

瘦人性子急

加林森 发表于 2022-8-2 18:58

马黑黑 发表于 2022-8-2 18:49
瘦人性子急

对头。

梦油 发表于 2022-8-2 19:45

马黑黑 发表于 2022-8-2 17:55
巫娜的古琴弹的好

是啊，也是一位很有名气的演员啊。

马黑黑 发表于 2022-8-2 19:47

梦油 发表于 2022-8-2 19:45
是啊，也是一位很有名气的演员啊。

技艺好

马黑黑 发表于 2022-8-2 19:56

加林森 发表于 2022-8-2 18:58
对头。

容易的胃病

梦油 发表于 2022-8-2 20:14

马黑黑 发表于 2022-8-2 19:47
技艺好

是的，巫娜的演奏水平是一流的。

查看完整版本: 巫娜·春城孤鹤