执著 发表于 2024-3-28 22:25

临摹马导倒影-心上的罗加

<style>
                #papa {
                                margin: 0 0 0 calc(50% - 681px);
                                width: 1200px;
                                height: 600px;
                                background: url('https://od.lk/s/NzBfMTY1MzA5MTBf/%E5%B8%83%E8%BE%BE%E6%8B%89%E5%AE%AB1200x600.gif') no-repeat center/cover;
                                box-shadow: 3px 3px 20px #000;
                                position: relative;
                                overflow: hidden;
                                z-index: 1;
                                display: grid;
                                place-items: center; }
                #papa::before { position: absolute; content: ''; inset: 0 0 0 0; background: radial-gradient(lightgreen, transparent,green); opacity: .35; }
                #papa video { position: absolute; top: -70px; width: 100%; height: calc(100% + 70px); object-fit: cover; mix-blend-mode: color-dodge; opacity: .4; }
                #lrc { position: absolute; top: 10px; font: bold 2.4em sans-serif; color: lightblue; text-shadow: 1px 1px 1px rgba(0,0,0,.45); user-select: none; --ani: lrcGo1; --duration: 1s; }
                #lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; background: repeating-linear-gradient(90deg, lightblue 3px, green 6px); background-clip: text; -webkit-background-clip: text; clip-path: inset(0 100% 0 0); border-bottom: 2px dashed lightblue; animation: var(--ani) var(--duration) linear forwards var(--state); }
                #mplayer { position: absolute; bottom: 10px; text-align: center; color: lightblue; }
                #mplayer::before { position: absolute; content: attr(data-tt); left: 0; bottom: 25px; width: 100%; text-align-last: justify; }
                #mprog { width: 280px; accent-color: darkgreen; outline: none; cursor: pointer; }
                #mprog:focus { accent-color: gold; }
                #btnplay { width: 80px; height: 80px; cursor: pointer; animation: rotating 6s infinite linear var(--state); }
                #btnplay:hover { filter: invert(.2); }
               
@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes lrcGo0 { to { clip-path: inset(0 0 0 0); } }
@keyframes lrcGo1 { to { clip-path: inset(0 0 0 0); } }

</style>

<div id="papa">
      <audio src="https://od.lk/s/NzBfMTY1MzA2MTZf/008-%E9%98%BF%E9%B2%81%E9%98%BF%E5%8D%93-%E5%BF%83%E4%B8%8A%E7%9A%84%E7%BD%97%E5%8A%A0.mp3" autoplay loop></audio>

      <div id="mplayer" data-tt="0:00 0:00">
      <img id="btnplay" src="https://pic.imgdb.cn/item/65f0435a9f345e8d03cb466f.png" title="播放/暂停" alt="" /><br>

                <input id="mprog" type="range" min="0" max="100" step="any" value="0" title="调节进度"    />
      </div>
      <div id="lrc" data-lrc="HuaChao LRC">HuaChao LRC</div>
</div>

<script>
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/js/rangelrc2024.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
var geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

</script>



红影 发表于 2024-3-28 22:49

非常漂亮的制作，给执著点赞{:4_199:}

红影 发表于 2024-3-28 22:56

发现这个是大的动图呢，真不容易{:4_204:}

执著 发表于 2024-3-28 23:02

红影 发表于 2024-3-28 22:49
非常漂亮的制作，给执著点赞

多谢老师鼓励！加油加油再加油！

红影 发表于 2024-3-28 23:03

执著 发表于 2024-3-28 23:02
多谢老师鼓励！加油加油再加油！

客气呢，执著的学习很认真，值得影子学习{:4_187:}

执著 发表于 2024-3-28 23:31

红影 发表于 2024-3-28 22:56
发现这个是大的动图呢，真不容易

本来是mp4，但是贴上地址，发现不行，只好又将mp4转换为gif，你们都是我的老师！

小文 发表于 2024-3-29 23:16

非常漂亮的制作{:4_190:}

执著 发表于 2024-3-29 23:39

小文 发表于 2024-3-29 23:16
非常漂亮的制作

谢谢老师的光临和鼓励！{:4_204:}

红影 发表于 2024-3-30 13:57

执著 发表于 2024-3-28 23:31
本来是mp4，但是贴上地址，发现不行，只好又将mp4转换为gif，你们都是我的老师！

哪里啊，我也是学生，也在跟着学习的呢{:4_173:}

小辣椒 发表于 2024-3-30 21:09

欣赏执著的精彩制作，效果很漂亮{:4_199:}

大猫咪 发表于 2024-3-30 21:11

制作真漂亮图美歌靓，好听好看，谢谢朋友精彩分享！赞！

{:4_204:}{:4_178:}{:4_199:}

执著 发表于 2024-3-30 23:22

大猫咪 发表于 2024-3-30 21:11
制作真漂亮图美歌靓，好听好看，谢谢朋友精彩分享！赞！

谢谢老师的鼓励，“同志还须努力”啊{:4_204:}
页: [1]
查看完整版本: 临摹马导倒影-心上的罗加