心许百年

朵拉发表于 2024-6-30 23:49

<section style="
width: 520px; margin: 20px auto;
border: 1px solid LightBlue;
padding: 20px 10px;
background-color: #ffffff;
box-sizing:border-box;
display: flex;
flex-direction: column;
box-shadow: 2px 2px 6px rgba(0,0,0,.36);">
<br>
<style>
   #mydiv { margin: 0px 00 100px; width: 300px; height:300px; background:#fff url('https://pic.imgdb.cn/item/66802880d9c307b7e9ec8933.jpg') no-repeat center/cover; border-radius:8px 8px; box-shadow: 2px 2px 6px rgba(0,0,0,.6); overflow: hidden; z-index: 1; position: relative; }
   txt-box { position: absolute;margin-left: 230px;margin-top: 230px;display: grid; place-items: center; top: var(--xx); bottom: 10px; width: 30px; height: 30px; font: normal 20px sans-serif; color: snow; cursor: pointer; transition: .5s; animation: move 5s var(--delay) linear infinite alternate var(--state); }
   txt-box::after { position: absolute; content: '...'; inset: -4px; border: thick outset lightblue; border-radius:50% 0%; animation: rot 5s var(--delay) linear infinite alternate var(--state); }
   txt-box:hover { filter: sepia(100%) drop-shadow(0 -80px 10px white); }
   #vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px);border-radius:50% 50%; object-fit: cover; mix-blend-mode: multiply; opacity: .75; pointer-events: none; }
   #vid2 {position: absolute;margin-top: 0px;width: 100%; height: 100%;top:0px;border-radius:50% 50%;transform: rotateY(180deg);object-fit: cover; pointer-events: none; mix-blend-mode: screen;z-index: 5;opacity: .59;}
   @keyframes move { to { bottom:0px; } }
   @keyframes rot { to { transform: rotateX(365deg); } }
</style>

<div id="mydiv">
   <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2005213526" loop autoplay></audio>
   <img id="vid2" src="https://gd-hbimg.huaban.com/4d3a42272d2760f6deed127346944bd1f12294972a40b6-W51vl4">

</div>

<script>
(function() {
   const ar = '朵'.split('');
   const total = ar.length, half = Math.floor(ar.length / 2), ww =250;
   let tbAr = [];
   ar.forEach((t,k) => {
            let tbox = document.createElement('txt-box');
            tbox.textContent = t;
            tbox.style.cssText += `
                     --xx: ${ww / total * k +1}px;
                     --delay: -${k < half ? k * 0.5 : (total - k) * 0.5}s;
            `;
            tbAr.push(tbox);
            mydiv.appendChild(tbox);
   });
   aud.onplaying = aud.onpause = () => {
            mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
            aud.paused ? vid.pause() : vid.play();
            tbAr.forEach(tb => tb.title = ['暂停','播放'][+aud.paused]);
   };
   tbAr.forEach(tb => tb.onclick = () => aud.paused ? aud.play() : aud.pause());
})();
</script>
<section style="width: 600px; margin: 50px auto; display: flex; flex-direction: column;">
<div style="margin: 0px 00 80px;position: absolute; font: bold 1.5em sans-serif;text-shadow: 1px 1px 2px #00000050; text-align: center; ">
<a style="color: LightBlue;text-decoration: none;"href="http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=dIjtDAdMaqXL4d5G" target="_blank">       心许百年
【演唱：王天戈】</a></div>

<section data-role="paragraph" class="" data-width="45%" style="width: 45%;flex: 0 0 45%; margin-left: 100px; margin-right: auto;box-sizing:border-box;max-width:45% !important; magin-bottom: 50px;"><p><strong ><span style="color: LightBlue; font-size: 14px; letter-spacing: 1.3px; text-decoration-thickness: initial; display: inline !important;font-family:Tahoma,;Microsoft Yahei", Simsun;">
<br><br><br>

如果说初遇时候太过惊艳<br>
足够铭记好几百年<br>
流转的时间刚好用来了解<br><br>

如果说要形容这莫名感觉<br>
恰当不过一眼万年<br>
春夏秋冬不算变迁<br>
只是季节<br><br>

人群拥挤穿过森林<br>
出现一个你<br>
你仿佛带着标记<br>
感觉熟悉调动记忆<br>
脑中的画笔<br>
涂改几遍更清晰<br>
害怕去靠近慌张想放弃<br>
可更害怕这样错过<br>
我真的会惋惜<br><br>

如果说初遇时候太过惊艳<br>
足够铭记好几百年<br>
流转的时间刚好用来了解<br><br>

如果说要形容这莫名感觉<br>
恰当不过一眼万年<br>
春夏秋冬不算变迁<br>
只是季节<br>

</strong></p></section>
</p>
               </section>

<section style="margin: 10px auto; display: flex; align-items: flex-end;">
            <section style="width: 350px;max-width: 100% !important;box-sizing:border-box;" data-width="100%">
                     <section class="">
                           <section class="assistant" style="width: 43px;box-sizing:border-box;" data-width="43px">
                                    <section class="_" data-role="title" data-tools="" data-id="">
                                             <section style="margin: 10px auto;">
                                                   <section class="assistant" style="width: 35px;margin: 0 auto;box-sizing:border-box;">
                                                            <img class="assistant" style="vertical-align:inherit;width: 100%; display: block;box-sizing:border-box;max-width:100% !important;" src="https://bcn.135editor.com/files/images/editor_styles/82269e8183dce300f73ca6a3e691230f.gif" data-width="100%" draggable="false" data-ratio="0.8618421052631579" data-w="304"/>
                                                   </section>
                                             </section>
                                    </section>
                           </section>
                           <section style="font-size: 14px;color: LightBlue;text-align: right;padding: 0 10px;box-sizing:border-box;">
                                    <span class="" data-brushtype="text">2024.6.29</span>
                           </section>
                     </section>

                     <section style="width: 100%;margin-top: -23px;max-width: 100% !important;box-sizing:border-box;" data-width="100%" class="">
                           <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 321.5 35.97" style="display: block;" xml:space="default">
                                    <g id="图层_2" data-name="图层 2">
                                             <g id="图层_1-2" data-name="图层 1">
                                                   <path d="M.42,5.31c9.48,15.18,71.9,43,117.73,22.25s-14.79-42.9,9.34-11.12,194,14.15,194,14.15" style="fill:none;stroke:LightBlue;stroke-dasharray:4,2"/>
                                             </g>
                                    </g>
                           </svg>
                     </section>
            </section>

            <section style="flex-shrink: 0;display: flex;align-items: center;">
<section class="box-edit" style="font-size: 16px;letter-spacing: 1.5px;color: LightBlue;width: 34px;height: 34px;border: 1px solid #ffd3d9;display: flex;justify-content: center;align-items: center;margin: 0 2px;box-sizing:border-box;">
                           <strong class="135brush" data-brushtype="text">朵</strong>
                     </section>

                     <section class="box-edit" style="font-size: 16px;letter-spacing: 1.5px;color: LightBlue;width: 34px;height: 34px;border: 1px solid #ffd3d9;display: flex;justify-content: center;align-items: center;margin: 0 2px;box-sizing:border-box;">
                           <strong class="135brush" data-brushtype="text">拉</strong>
                     </section>
                     <section class="box-edit" style="font-size: 16px;letter-spacing: 1.5px;color:LightBlue;width: 34px;height: 34px;border: 1px solid #ffd3d9;display: flex;justify-content: center;align-items: center;margin: 0 2px;box-sizing:border-box;">
                           <strong class="135brush" data-brushtype="text">制</strong>
                     </section>
                     <section class="box-edit" style="font-size: 16px;letter-spacing: 1.5px;color:LightBlue;width: 34px;height: 34px;border: 1px solid #ffd3d9;display: flex;justify-content: center;align-items: center;margin: 0 2px;box-sizing:border-box;">
                           <strong class="135brush" data-brushtype="text">作</strong>
                     </section>
            </section>
   </section>
</section>
<section class="" data-role="title" data-tools="" data-id="">
   <section style="margin: 10px auto; display: flex; justify-content: center;" class="">
            <section class="assistant" style="width: 264px;box-sizing:border-box;" data-width="264px" ></section>

朵拉发表于 2024-6-30 23:50

@马黑黑
老师好，学生学习整合了一款音乐帖，请指正哈{:4_190:}

朵拉发表于 2024-6-30 23:52

@小辣椒
小辣椒管理好，学生学习整合了一款音乐帖，请指正哈{:4_190:}

马黑黑 发表于 2024-7-1 07:57

{:4_199:}

马黑黑 发表于 2024-7-1 07:58

周一好

红影发表于 2024-7-1 08:44

漂亮，欣赏朵儿好帖{:4_187:}

朵拉发表于 2024-7-1 09:01

马黑黑发表于 2024-7-1 07:58
周一好

老师好，祝新周愉快{:4_190:}

朵拉发表于 2024-7-1 09:02

红影发表于 2024-7-1 08:44
漂亮，欣赏朵儿好帖
影宝好，祝新周愉快{:4_204:}

红影发表于 2024-7-1 10:50

朵拉发表于 2024-7-1 09:02
影宝好，祝新周愉快

问好朵宝，新周快乐{:4_187:}

马黑黑 发表于 2024-7-1 15:43

朵拉发表于 2024-7-1 09:01
老师好，祝新周愉快

都乐都乐

绿叶清舟 发表于 2024-7-1 20:23

朵拉这个太漂亮了，颜色好雅致

小辣椒 发表于 2024-7-1 21:02

欣赏朵拉精彩的制作{:4_171:}

页: [1]

花潮论坛's Archiver

心 许 百 年

心许百年