遗失地

马黑黑 发表于 2024-2-27 08:25

马黑黑 发表于 2024-2-27 08:25

本帖最后由马黑黑于 2024-2-27 08:42 编辑 <h2>代码</h2>
<style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thin solid gray; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<div class='mum'>
<cl-cd data-idx="1"><style></cl-cd>
<cl-cd data-idx="2">#papa { margin: 30px 0 30px calc(50% - 681px); width: 1200px; height: 575px; background: url('https://638183.freep.cn/638183/t24/1/14u.jpg') no-repeat center/cover, url('https://638183.freep.cn/638183/Pic/81/leaf2.png') no-repeat 760px 100%, url('https://638183.freep.cn/638183/small/rose.jpg') no-repeat 0 110%; background-blend-mode: darken; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }</cl-cd>
<cl-cd data-idx="3">#lrc { position: absolute; left: 20px; top: 10px; font: bold 2.4em sans-serif; color: gray; text-shadow: 1px 1px 1px rgba(0,0,0,.45); --ani: lrcGo1; --duration: 1s; }</cl-cd>
<cl-cd data-idx="4">#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; background: repeating-radial-gradient(orange, gray 6px); background-clip: text; -webkit-background-clip: text; clip-path: inset(0 100% 0 0); animation: var(--ani) var(--duration) linear forwards var(--state); border-bottom: 2px dashed gray; }</cl-cd>
<cl-cd data-idx="5">#btnplay { position: absolute; top: 90px; left: 100px; width: 200px; height: 200px; opacity: .7; animation: rotating 6s linear infinite var(--state); cursor: pointer; }</cl-cd>
<cl-cd data-idx="6">ye-zi { position: absolute; left: calc(50% - 0.5 * var(--ww)); top: 0; width: var(--ww); height: 100px; border-radius: 60%; background: repeating-radial-gradient(gray, tan 20%); transform-origin: 50% 100%; transform: rotate(var(--deg)); }</cl-cd>
<cl-cd data-idx="7">@keyframes rotating { to { transform: rotate(360deg); } }</cl-cd>
<cl-cd data-idx="8">@keyframes lrcGo0 { to { clip-path: inset(0 0 0 0); } }</cl-cd>
<cl-cd data-idx="9">@keyframes lrcGo1 { to { clip-path: inset(0 0 0 0); } }</cl-cd>
<cl-cd data-idx="10"></style></cl-cd>
<cl-cd data-idx="11"> </cl-cd>
<cl-cd data-idx="12"><div id="papa"></cl-cd>
<cl-cd data-idx="13">    <audio src="https://file.uhsea.com/2402/97ec26614183d020eb768b93f297df5bES.mp3" autoplay loop></audio></cl-cd>
<cl-cd data-idx="14">    <div id="lrc" data-lrc="HUACHAO LRC">HUACHAO LRC</div></cl-cd>
<cl-cd data-idx="15">    <div id="btnplay"></div></cl-cd>
<cl-cd data-idx="16"></div></cl-cd>
<cl-cd data-idx="17"> </cl-cd>
<cl-cd data-idx="18"><script></cl-cd>
<cl-cd data-idx="19">var geci = [ , , , , , , , , , , , , ];</cl-cd>
<cl-cd data-idx="20">var sF = document.createElement('script');</cl-cd>
<cl-cd data-idx="21">sF.charset = 'utf-8';</cl-cd>
<cl-cd data-idx="22">sF.src = 'https://638183.freep.cn/638183/web/js/btnlrc-01.js';</cl-cd>
<cl-cd data-idx="23">document.querySelector('body').appendChild(sF);</cl-cd>
<cl-cd data-idx="24"> </cl-cd>
<cl-cd data-idx="25">Array.from({length: all = 5}).forEach((item,key) => {</cl-cd>
<cl-cd data-idx="26">    item = document.createElement('ye-zi');</cl-cd>
<cl-cd data-idx="27">    item.style.cssText += `--ww: 60px; --deg: ${360 / all * key}deg;`;</cl-cd>
<cl-cd data-idx="28">    btnplay.prepend(item);</cl-cd>
<cl-cd data-idx="29">});</cl-cd>
<cl-cd data-idx="30"></script></cl-cd>
</div>

红影发表于 2024-2-27 11:09

一圈圈的颜色做叶瓣的叶面，这个叶子播放器真漂亮{:4_199:}

红影发表于 2024-2-27 11:11

歌词很漂亮，含义很深的诗句。制作也很漂亮，加了多张图图。
播放器叶瓣按钮放在一根支杆上也很有趣{:4_199:}

樵歌发表于 2024-2-27 11:45

这菇凉可千万别想不开吖{:4_189:}

小辣椒 发表于 2024-2-27 17:36

这个套用应该比较简单吧，自己修改就另当别论了，欣赏黑黑的新产品~{:4_178:}

南无月 发表于 2024-2-27 18:03

小播的叶子呈年轮形状。。组合起来像朵花。。。这个创意太绝了。。。。
背景延伸到远方，近景中火红的花瓣十分抢眼。。
美女时尚，好看~~
歌曲好听。。

南无月 发表于 2024-2-27 18:03

十分喜欢这个贴子的色调。。

马黑黑 发表于 2024-2-27 18:05

南无月发表于 2024-2-27 18:03
十分喜欢这个贴子的色调。。

这个与海子多少有点关系

马黑黑 发表于 2024-2-27 18:06

南无月发表于 2024-2-27 18:03
小播的叶子呈年轮形状。。组合起来像朵花。。。这个创意太绝了。。。。
背景延伸到远方，近景中火红的花瓣 ...

这是一个主题深邃的帖子

马黑黑 发表于 2024-2-27 18:06

红影发表于 2024-2-27 11:09
一圈圈的颜色做叶瓣的叶面，这个叶子播放器真漂亮

{:4_190:}

马黑黑 发表于 2024-2-27 18:06

红影发表于 2024-2-27 11:11
歌词很漂亮，含义很深的诗句。制作也很漂亮，加了多张图图。
播放器叶瓣按钮放在一根支杆上也很有趣{:4_19 ...

这个，大约是纪念海子的

马黑黑 发表于 2024-2-27 18:07

樵歌发表于 2024-2-27 11:45
这菇凉可千万别想不开吖

快快将瓜皮送去{:4_170:}

马黑黑 发表于 2024-2-27 18:07

小辣椒发表于 2024-2-27 17:36
这个套用应该比较简单吧，自己修改就另当别论了，欣赏黑黑的新产品~

{:4_190:}

南无月 发表于 2024-2-27 18:10

马黑黑发表于 2024-2-27 18:05
这个与海子多少有点关系

写出面朝大海，春暖花开的忧郁的诗人。。作品和个性反差有点大。。

南无月 发表于 2024-2-27 18:11

马黑黑发表于 2024-2-27 18:06
这是一个主题深邃的帖子

这会又匆忙，回头仔仔细细品味一下。。{:4_173:}

马黑黑 发表于 2024-2-27 18:11

南无月发表于 2024-2-27 18:11
这会又匆忙，回头仔仔细细品味一下。。

主要是内容呀，不是诗与远方那么简单

冬天的雨 发表于 2024-2-27 19:04

小辣椒发表于 2024-2-27 17:36
这个套用应该比较简单吧，自己修改就另当别论了，欣赏黑黑的新产品~

小辣椒套用完成，冬雨继续二次套用{:4_170:}

冬天的雨 发表于 2024-2-27 19:05

播放器感觉是纯代码的{:4_178:}

冬天的雨 发表于 2024-2-27 19:06

俺手机是粗看代码。。。

页: [1] 2 3 4 5

花潮论坛's Archiver

遗失地