论坛 › 欢乐水吧 › 最后的枫叶（学习黑黑文本符号按钮）

红影 发表于 2022-10-11 21:51

最后的枫叶（学习黑黑文本符号按钮）

<style>
#papa { left: -302px; width: 1200px; height: 640px; background: teal url('https://pic1.imgdb.cn/item/6345212616f2c2beb11e72c3.jpg') no-repeat center/cover; display: grid; place-items: center; overflow: hidden; position: relative; z-index: 1; }
#btnplay { --dur: 8s; position: absolute; top: 16%; width: 100px; height: 100px; font: bold 100px/100px serif; text-align: center; color: #E87529; cursor: pointer; animation: rot linear var(--dur) infinite; }
#lrc { --motion: cover1; --tt: 1s; --state: paused; position: absolute; top: 15px; font: bold 2.6em sans-serif; color:
#FAEFC0; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(0,100%,50%,.75),hsla(60,100%,50%,.65)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
.vid { position: absolute;LEFT: 0px;top:0px; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; clip-path: circle(80% at bottom) ;mix-blend-mode: lighten;}
#mama { position: absolute; width: 300px; height: 300px; left: calc(50% - 150px); top: calc(50% - 150px); display: grid; place-items: center; }
#box { position: absolute; width: 80px; height: 80px; border-radius: 50%; box-shadow: inset -8px -8px 160px -8px tan; animation: circle 4s linear infinite alternate; }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes circle { from { transform: rotate(0) translate(50px); } to { transform: rotate(360deg) translate(50px); } }
</style>
<div id="papa">
      <div id="mama"><span id="box"></span></div>
<video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/02/20/5b51fe1e7500c.mp4" muted="muted" autoplay="autoplay" loop="loop"></video>
      <span id="btnplay">&#10059</span>
      <span id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</span>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1975777609.mp3" autoplay= "autoplay"></audio>

<script>
let stepX = 1, stepY = 1, moveX= 0, moveY = 0;
(function() {
      let mKey = 0, mFlag = true, slip = 0.1;
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
      aud.loop = false;
      btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
      aud.addEventListener('pause', () => mState());
      aud.addEventListener('play', () => mState());
      aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
      aud.addEventListener('timeupdate', () => {
                for (j = 0; j < lrcAr.length; j++) {
                        if (aud.currentTime - slip >= lrcAr) {
                              if (mKey === j) showLrc(lrcAr);
                              else continue;
                        }
                }
      });
      let mState = () => aud.paused ? (btnplay.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.animationPlayState = 'running', lrc.style.setProperty('--state', 'running'));
      let showLrc = (time) => {
                let name = mFlag ? 'cover1' : 'cover2';
                lrc.innerHTML = lrc.dataset.lrc = lrcAr;
                lrc.style.setProperty('--motion', name);
                lrc.style.setProperty('--tt', time + 's');
                lrc.style.setProperty('--state', 'running');
                mKey += 1;
                mFlag = !mFlag;
      };
})();
motion();
function motion() {
      moveX += stepX;
      moveY += stepY;
      mama.style.left = moveX + 'px';
      mama.style.top = moveY + 'px';
      requestAnimationFrame(motion);
      if(moveX < 0 || moveX >= papa.offsetWidth - mama.offsetWidth) stepX = -stepX;
      if(moveY < 0 || moveY >= papa.offsetHeight - mama.offsetHeight) stepY = -stepY;
}
</script>

红影 发表于 2022-10-11 21:53

顺便再学习一下小球随机飘拂{:4_173:}

红影 发表于 2022-10-11 21:55

去找特殊符号编码，发现有很多好玩的，比如现在用的是&#10059，类似的还很多。
如果想轮番替换这些符号该怎么换呢@马黑黑{:4_204:}

红影 发表于 2022-10-11 21:57

比如，一次换上&#10035、&#10036、&#10037、。。。。&#10043，都是连续的数字。
记得以前黑黑这样替换过图片，也是只变化图片地址的尾数，因为那些图片的序号是相连的。

马黑黑 发表于 2022-10-11 22:18

红影 发表于 2022-10-11 21:55
去找特殊符号编码，发现有很多好玩的，比如现在用的是&#10059，类似的还很多。
如果想轮番替换这些符号该 ...

没必要吧？按钮还是相对固定的好。你这个已经够动了，再对按钮下功夫换样式，就显得眼花缭乱了。这样就好。

红影 发表于 2022-10-11 22:38

马黑黑 发表于 2022-10-11 22:18
没必要吧？按钮还是相对固定的好。你这个已经够动了，再对按钮下功夫换样式，就显得眼花缭乱了。这样就好 ...

哦哦，我只是觉得那些都挺好玩，难以取舍，所以想到以前你的那些图片。
你说得对，按钮还是不换的好{:4_173:}

马黑黑 发表于 2022-10-11 22:39

红影 发表于 2022-10-11 22:38
哦哦，我只是觉得那些都挺好玩，难以取舍，所以想到以前你的那些图片。
你说得对，按钮还是不换的好{:4_ ...

下一个帖子再用其他的图案不就可以了，不要在一个帖子里用完所有的图案

红影 发表于 2022-10-11 22:49

马黑黑 发表于 2022-10-11 22:39
下一个帖子再用其他的图案不就可以了，不要在一个帖子里用完所有的图案

嗯，至少一个个看过了，玩过了，对特殊符号的也知道点了{:4_173:}

马黑黑 发表于 2022-10-11 22:50

红影 发表于 2022-10-11 22:49
嗯，至少一个个看过了，玩过了，对特殊符号的也知道点了

如果没有 Unicode，这些漂亮的符号是出不来的

红影 发表于 2022-10-11 22:59

马黑黑 发表于 2022-10-11 22:50
如果没有 Unicode，这些漂亮的符号是出不来的

又看到一个有趣的一角了，居然有那么多好玩的符号{:4_173:}

马黑黑 发表于 2022-10-11 23:07

红影 发表于 2022-10-11 22:59
又看到一个有趣的一角了，居然有那么多好玩的符号

符号很多的

大猫咪 发表于 2022-10-11 23:19

真漂亮，图音并茂， 好听好看！这段时间事情特别多，过几天就轻松一些，红影辛苦了 ！

{:4_204:}{:4_190:}{:4_179:}

上海朝阳 发表于 2022-10-12 08:45

红影 发表于 2022-10-11 21:53
顺便再学习一下小球随机飘拂

这小球就像露珠在跃动，美哇

相约爱晚亭 发表于 2022-10-12 10:15

欣赏音画佳作！对于普通浏览者来说，只认识常规播放钮。

红影 发表于 2022-10-12 10:38

马黑黑 发表于 2022-10-11 23:07
符号很多的

是的，实在是不少呢{:4_173:}

红影 发表于 2022-10-12 10:39

大猫咪 发表于 2022-10-11 23:19
真漂亮，图音并茂， 好听好看！这段时间事情特别多，过几天就轻松一些，红影辛苦了 ！

{:4_190 ...

看到猫猫了，开心，都好久没看到了呢{:4_199:}

红影 发表于 2022-10-12 10:40

上海朝阳 发表于 2022-10-12 08:45
这小球就像露珠在跃动，美哇

这个小球是黑黑之前的帖子里的，我也搬到这个帖子里来了{:4_173:}

红影 发表于 2022-10-12 10:40

相约爱晚亭 发表于 2022-10-12 10:15
欣赏音画佳作！对于普通浏览者来说，只认识常规播放钮。

你说得对，这个只是做个试验，学习一下。其实大家还是更容易接受常规播放器按钮式样呢{:4_204:}

梦油 发表于 2022-10-12 11:07

舞动的小圆球为画面增添了动感和活力。

马黑黑 发表于 2022-10-12 13:30

红影 发表于 2022-10-12 10:38
是的，实在是不少呢

符号其实也是多多益善

查看完整版本: 最后的枫叶（学习黑黑文本符号按钮）