论坛 › 欢乐水吧 › 泪 桥（马黑黑原创）

朵拉 发表于 2024-2-18 22:26

泪 桥（马黑黑原创）

本帖最后由 朵拉 于 2024-2-19 10:49 编辑 <br /><br /><style>
#mydiv {
   margin: 0 0 0 calc(50% - 593px);
   position: relative;
   width: 1024px;
   height: 640px;
   background: url('https://pic.imgdb.cn/item/65d22ba29f345e8d036d890f.jpg') no-repeat center/cover;
   box-shadow: 3px 3px 8px gray;
   overflow: hidden;
}
#mydiv::before {
   position: absolute;
   content: '';
   inset: 0;
   background: repeating-linear-gradient(transparent, green 2px) repeat;
   opacity: .45;
   animation: up 10s ease-in-out infinite alternate var(--state);
}
#lrc {
   position: absolute;
   left: 20px;
   top: 10px;
   font: bold 2.4em sans-serif;
   color: white;
   text-shadow: 1px 1px 1px rgba(0,0,0,.45);
   --ani: lrcGo1;
   --duration: 1s;
}
#lrc::before {
   position: absolute;
   content: attr(data-lrc);
   width: 100%;
   height: 100%;
   color: transparent;
   background: repeating-linear-gradient(60deg, transparent, orange 20px);
   background-clip: text;
   -webkit-background-clip: text;
   clip-path: inset(0 100% 0 0);
   animation: var(--ani) var(--duration) linear forwards var(--state);
}
#btnplay {
   position: absolute;
   right: 20px;
   bottom: 10px;
   width: 200px;
   height: 200px;
   animation: rotating 6s linear infinite var(--state);
   cursor: pointer;
}
ye-zi {
   position: absolute;
   left: calc(50% - 0.5 * var(--ww));
   top: 0;
   width: var(--ww);
   height: 100px;
   border-radius: 0% 100%;
   background: linear-gradient(snow, orange, green);
   transform-origin: 50% 100%;
   transform: rotate(var(--deg));
}
@keyframes up {
   0% { inset: 0; }
   25% { inset: 50% 0 50% 0; }
   50% { inset: 0; }
   75% { inset: 0 50% 0 50%; }
   100% { inset: 0; }
}
@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="mydiv">
   <audio src="https://music.163.com/song/media/outer/url?id=2098571152" autoplay loop></audio>
   <div id="lrc" data-lrc="HUACHAO LRC">HUACHAO LRC</div>
   <div id="btnplay"></div>
</div>
<script>
var geci = [ ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ];
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/btnlrc.js';
document.querySelector('body').appendChild(sF);
Array.from({length: all = 5}).forEach((item,key) => {
   item = document.createElement('ye-zi');
   item.style.cssText += `--ww: 30px; --deg: ${360 / all * key}deg;`;
   btnplay.prepend(item);
});
</script>

朵拉 发表于 2024-2-18 22:46

@马黑黑
马师 晚上好，学生交作业，请指正哈{:4_190:}

马黑黑 发表于 2024-2-18 22:50

挺好挺好

红影 发表于 2024-2-18 23:03

漂亮，欣赏朵宝好帖{:4_199:}

朵拉 发表于 2024-2-19 10:52

红影 发表于 2024-2-18 23:03
漂亮，欣赏朵宝好帖

谢谢影宝的临帖，祝正月愉快{:4_204:}

朵拉 发表于 2024-2-19 10:53

马黑黑 发表于 2024-2-18 22:50
挺好挺好

马师好，我编辑了歌词 您再看一看哈{:4_190:}

红影 发表于 2024-2-19 12:40

朵拉 发表于 2024-2-19 10:52
谢谢影宝的临帖，祝正月愉快

谢谢朵宝的美好祝福，也同样祝福你{:4_187:}

马黑黑 发表于 2024-2-19 15:31

朵拉 发表于 2024-2-19 10:53
马师好，我编辑了歌词 您再看一看哈

辛苦辛苦。顺便说一下，俺不姓马

查看完整版本: 泪 桥（马黑黑原创）