醉美水芙蓉 发表于 2023-6-13 22:16

花成语-李小贝

本帖最后由 醉美水芙蓉 于 2023-6-13 22:47 编辑 <br /><br /><style>
#lrc { --motion: cover1; --tt: 1s; --state: paused; position: absolute; bottom: 100px; left:30%; font: bold 2.6em sans-serif; color:
#FAEFC0; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); width:80%;}
#lrc::before { position: absolute; content: attr(data-lrc); width:100%; 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); }

@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); } }

@keyframes yao {
      from{transform: perspective(800px) rotatex(35deg); }
      to { transform: perspective(800px) rotatex(-35deg); }
}

.tit {
        position:absolute;width:800px;height: 30px;top:50px;LEFT: 50px;z-index: 100;text-align:left;
        filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff);
        animation: yao 1.0s linear infinite alternate; font-family:微软简中圆;font-weight: bold;color: #f46ff6;transform-origin: top;margin: auto;}
#tit:hover { color: green; }

#papa {
      margin: auto;
      top: 0px;
      left:-50px;
      width: 1120px;
      height:752px;
      background: tan url('https://pic.imgdb.cn/item/648874c91ddac507cc904086.jpg');
      box-shadow: 0 0 8px #000;
      display: grid;
      place-items: center;
      position: relative;margin:100px 0 32px -200px;
                box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;
                overflow:hidden;border-radius:1%;
}
</style>


<div id="papa">
<css-doodle id="mplayer">
:doodle {
      @grid: 2 / 550px 100px;
      position: absolute;
      color: var(--color);
      bottom: 0;
      --prog: 0%;
      --size: 60px;
      --ttmsg1: '00:00';
      --ttmsg2: '00:00';
      --color: #33ff99;
      --state: paused;
                z-index:99;
}
@nth(1) {@place: 35% 100%;:after { content: var(--ttmsg1); }}
@nth(2) {@size: var(--size);@shape: windmill;@place: 50% 35%;background: var(--color);animation: rot 6s infinite linear var(--state);}
@nth(3) {@place: 65% 100%;:after { content: var(--ttmsg2); }}
@nth(4) {@place: 50% 80%;@size: 100% 2px;background: #bbb;display: grid;place-items: center start;:before {content: '';width: var(--prog);height: 100%;background: var(--color);}}
@keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>
<css-doodle grid="16" id="fFloat">
        :doodle {
                @size: 1120px 752px;
                }
                position: absolute;
                left: @r(100)%;
                top: -20%;
                :after {
                        position: absolute;
                       content: '@p(&#127800;,❀,&#127989;️,&#127802;,❄️,&#128174;,&#127811;)';
                        color: snow;
                        font-size: @r(12, 25)px;
                }
                animation: fall @r(8,20)s @r(-6, 6)s infinite var(--state);
                @keyframes fall {
                        0% { top: -20%; transform: rotate(0deg); }
                        100% {top: 120%; transform: rotate(360deg); }
                }
</css-doodle>


<img src="https://z3.ax1x.com/2021/08/26/hujGMd.gif" style="z-index:88;position:absolute; top: 400px;right:50px;">





<!-- div id="hu" -->
<!--div id="baiBox"-->
<div class="tit">
<span style="color:#fb52f9;font-size:32px;">《 花成语》</span>
<span style="color:#3d46f7;font-size:20px;">   - 李小贝</span></div>




       <!--div id="mama"><span id="box"></span></div-->

      <span id="btnplay"></span> <!--播放按钮代码-->
      <span id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</span>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music279614827.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;
      };
})();
(function() {
        let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
        let script = document.createElement('script');
        script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
        document.head.appendChild(script);
        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'), lrc.style.setProperty('--state', 'paused'), fFloat.style.setProperty('--state', 'paused') ) :
                                                                        (mplayer.style.setProperty('--state', 'running'), lrc.style.setProperty('--state', 'running'),fFloat.style.setProperty('--state', 'running'));
                                                                       
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
        aud.addEventListener('timeupdate', () => {
                mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
                mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration-aud.currentTime)}'`);
                mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
   });

        mplayer.onclick = () => {if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();if(clickIdx === 2) aud.currentTime = progChg;}
        mplayer.onmousemove = (e) => {let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mplayer.offsetWidth, hh = mplayer.offsetHeight;clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);mplayer.style.cursor = cursors;if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;}

})();

</script>

红影 发表于 2023-6-13 22:43

这个好，把摇摆字和最新花瓣都用上了，欣赏水芙蓉美女好帖{:4_199:}

醉美水芙蓉 发表于 2023-6-13 22:47

红影 发表于 2023-6-13 22:43
这个好，把摇摆字和最新花瓣都用上了，欣赏水芙蓉美女好帖

谢谢红影美女支持！

红影 发表于 2023-6-13 23:11

醉美水芙蓉 发表于 2023-6-13 22:47
谢谢红影美女支持！

问好水芙蓉美女，晚上好{:4_187:}

樵歌 发表于 2023-6-14 11:02

漂亮！{:4_174:}又是把黑师的各种法术运用炉火纯青！

醉美水芙蓉 发表于 2023-6-14 11:19

樵歌 发表于 2023-6-14 11:02
漂亮！又是把黑师的各种法术运用炉火纯青！

樵歌中午好！

小辣椒 发表于 2023-6-14 17:33

欣赏水芙蓉的精彩制作

梦缘 发表于 2023-6-14 20:22

问好老师，欣赏精彩视频佳作，谢谢分享，点赞！{:4_187:}

醉美水芙蓉 发表于 2023-6-15 06:15

小辣椒 发表于 2023-6-14 17:33
欣赏水芙蓉的精彩制作

谢谢辣椒美女支持！

醉美水芙蓉 发表于 2023-6-15 06:15

梦缘 发表于 2023-6-14 20:22
问好老师，欣赏精彩视频佳作，谢谢分享，点赞！

谢谢老师支持！

南无月 发表于 2023-6-15 18:22

这漫天的花和蝴蝶相得益彰，欣赏水芙蓉美贴{:4_187:}

千羽 发表于 2023-6-15 19:45

满眼的的靓丽，芙蓉的图有内容，棒棒哒{:4_187:}

醉美水芙蓉 发表于 2023-6-16 07:01

南无月 发表于 2023-6-15 18:22
这漫天的花和蝴蝶相得益彰，欣赏水芙蓉美贴

谢谢月儿光临支持！

醉美水芙蓉 发表于 2023-6-16 07:01

千羽 发表于 2023-6-15 19:45
满眼的的靓丽，芙蓉的图有内容，棒棒哒

谢谢千羽美女光临！
页: [1]
查看完整版本: 花成语-李小贝