论坛 › 音乐沙龙 › 水墨兰亭

马黑黑 发表于 2022-12-3 07:50

水墨兰亭

<style>
#papa { margin: 0 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t22/webp/umlt.webp') no-repeat center/cover; box-shadow: 10px 5px 20px #000; user-select: none; overflow: hidden; position: relative; z-index: 1; }
.tit { position: absolute; right: 50px; font: bold 3em sans-serif; text-shadow: 1px 1px 2px silver, 1px 1px 2px tan; transform-origin: 0 100%; }
.tit:nth-of-type(even) { right: 30px; }
.flower { position: absolute;bottom: 0; right: 0; mix-blend-mode: multiply; transition: .45s; }
.flower:hover { transform: rotate(-15deg); }
</style>

<div id="papa">
        <img class="flower" src="https://638183.freep.cn/638183/t22/webp/umlt1.webp" alt="" />
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=30413344.mp3" loop autoplay></audio>

<script >
(function() {
        let titstr = '水墨兰亭';
        (function(mkPlayer) {let defaults = { player_css: 'bottom: 20px; left: calc(50% - var(--ww) / 2);', playerCode: `<style>#btnplay {--ww: 35px;--state: paused;position: absolute;background: conic-gradient(red,orange,yellow,green,teal,blue,purple);mask: radial-gradient(transparent 3px,red 0);-webkit-mask: radial-gradient(transparent 3px,red 0);border-radius: 50%;width: var(--ww);height: var(--ww);cursor: pointer;animation: rot linear 3s infinite;animation-play-state: var(--state);}@keyframes rot { to { transform: rotate(1turn); } }</style><span id="btnplay"></span>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;btnplay.style.cssText += data.player_css;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => aud.play());let mState = () => btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');};mkPlayer.HCPlayer = playCode;})(this);
        HCPlayer({});
        for(j=0; j<titstr.length; j++) {
                let el = document.createElement('span');
                el.className = 'tit';
                el.style.cssText += `position: absolute; top: ${60*j + 20}px; color: hsla(${Math.floor(Math.random()*360)}, 50%,50%, .9); z-index: ${titstr.length - j + 3};`;
                el.innerHTML = titstr.slice(j, j+1);
                papa.appendChild(el);
        }
        let tits = document.querySelectorAll('.tit'), num = 0;
        (function rotate() {
                tits.style.animation = 'rot 2s';
                tits.style.color = `hsla(${Math.floor(Math.random()*360)}, 50%,50%,9)`;
                setTimeout( () => {
                        rotate();
                        tits.style.animation = '';
                }, 2000);
                num += 1;
                if(num > titstr.length - 1) num = 0;
        })();
})();
</script>

红影 发表于 2022-12-3 09:42

好漂亮的旋转字体，黑黑又把标题字玩出了新花样{:4_199:}

红影 发表于 2022-12-3 09:44

荷花还能随鼠标转动呢。这个光盘按钮好，用来做纯音乐特别方便。欣赏黑黑好帖{:4_187:}

红影 发表于 2022-12-3 09:45

那几只鸟儿太黑了点，是黑黑家的鸟儿吧{:4_170:}

马黑黑 发表于 2022-12-3 10:20

红影 发表于 2022-12-3 09:42
好漂亮的旋转字体，黑黑又把标题字玩出了新花样

旋转而已，不把人转晕就好

马黑黑 发表于 2022-12-3 10:20

红影 发表于 2022-12-3 09:45
那几只鸟儿太黑了点，是黑黑家的鸟儿吧

好像是姓黑的

马黑黑 发表于 2022-12-3 10:20

红影 发表于 2022-12-3 09:44
荷花还能随鼠标转动呢。这个光盘按钮好，用来做纯音乐特别方便。欣赏黑黑好帖

感谢支持

梦油 发表于 2022-12-3 11:27

优雅的画面，优雅的音乐构成了优雅的作品。那转动着文字的标题也别出心裁。

马黑黑 发表于 2022-12-3 11:33

梦油 发表于 2022-12-3 11:27
优雅的画面，优雅的音乐构成了优雅的作品。那转动着文字的标题也别出心裁。

感谢梦油先生的支持

红影 发表于 2022-12-3 13:43

马黑黑 发表于 2022-12-3 10:20
旋转而已，不把人转晕就好

这些字体被分开后，被黑黑各种调遣，很棒{:4_187:}

红影 发表于 2022-12-3 13:44

马黑黑 发表于 2022-12-3 10:20
好像是姓黑的

哈哈，鸟儿的颜色也随主人啊，要是我做的，就要做红的了？{:4_189:}

红影 发表于 2022-12-3 13:50

马黑黑 发表于 2022-12-3 10:20
感谢支持

标题字的颜色是随机的呢，刚发现{:4_173:}

朵拉 发表于 2022-12-3 13:51

字效不错，音乐更赞{:4_178:}

马黑黑 发表于 2022-12-3 13:53

朵拉 发表于 2022-12-3 13:51
字效不错，音乐更赞

{:4_191:}

马黑黑 发表于 2022-12-3 13:54

红影 发表于 2022-12-3 13:50
标题字的颜色是随机的呢，刚发现

每一次转动都变色

马黑黑 发表于 2022-12-3 13:54

红影 发表于 2022-12-3 13:44
哈哈，鸟儿的颜色也随主人啊，要是我做的，就要做红的了？

红鸟也很常见

马黑黑 发表于 2022-12-3 13:54

红影 发表于 2022-12-3 13:43
这些字体被分开后，被黑黑各种调遣，很棒

都是对盒子的操作

梦油 发表于 2022-12-3 14:43

马黑黑 发表于 2022-12-3 11:33
感谢梦油先生的支持

黑黑先生客气啦。

梦缘 发表于 2022-12-3 16:27

旋转字，很有趣，欣赏问好！{:4_185:}

马黑黑 发表于 2022-12-3 16:56

梦缘 发表于 2022-12-3 16:27
旋转字，很有趣，欣赏问好！

下午好

查看完整版本: 水墨兰亭