小辣椒 发表于 2024-4-3 23:36

清明时节雨纷纷

本帖最后由 小辣椒 于 2024-4-4 13:49 编辑 <br /><br /><style>
#papa {
      width: 680px;      
      min-height: 1650px;
      padding: 40px;
      box-sizing: border-box;
      border-radius: 12px;
      box-shadow: 0 0 8px #000;
      position: relative;
      margin: 60px auto 80px auto;
      top: 0px;
      display: grid; user-select: none;
      place-items: center;
      user-select: none;
}
#tit {
      position: absolute;
      left: 155px;
      top: 800px;
      font-size: 1.1em;color: #aeb9c0 'Microsoft YaHei',serif;
      color: SteelBlue;
}
#papa::before, #papa::after {
      position: absolute;
      content: '';
}
#papa::before {
      left: 10px;
      top: 10px;
      right: 10px;
      bottom: 10px;
      border: 1px dashed SteelBlue;
      border-radius: inherit;
}
#papa::after {
      content: '清明时节雨纷纷 ';
      padding: 10px 40px 10px 10px;
      left: -10px;
      top: 30px;
      border-radius: 10px 0 0 10px;
      background: SteelBlue;
      opacity: .85;
      font: bold 20px/26px sans-serif;
      color: white;
      clip-path: polygon(0 0,100% 0,90% 50%, 100% 100%, 0 100%);
}
#pic {
      position: absolute;
      left: 70px;
      top: 90px;
      width: 538px;
      height: 669px;
}
.mpic { position: absolute; right: 10px; bottom: 10px; width: 150px; height: 150px; }
.mpic1 { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; opacity: .35;
      background: url('https://pic.imgdb.cn/item/647c033ef024cca17313a454.gif'); }
@keyframes swing { from { transform: rotate(3deg); } to { transform: rotate(-2deg); } }
</style>

<div id="papa">
       <div class="mpic1"></div>
       <img id="pic" src="https://xlaj.cn/assets/file/zp/20240404134614.gif" alt="">
       <img src="https://xlaj.cn/assets/file/zp/20240404134927.gif" alt="" class="mpic">
      <div id="tit">清明时节雨纷纷 是缅怀先烈和祭祖的日子<br>
<br>
<strong><font color="SteelBlue">◇◆</font></strong><br><br>
清明节是中国最重要的祭祀节日<br><br>交节时间在公历4月5日前后。<br><br>

国人自古就有礼敬祖先<br>慎终追远的礼俗观念<br>因此在清明时节逐渐形成春祭的传统<br>每年一到清明节<br>很多地方都会以不同的形式<br>举行各式各样的纪念活动<br>来缅怀革命先辈<br>纪念战斗英雄<br>民间有踏青郊游<br>扫墓祭祖等风俗<br><br>
<strong><font color="SteelBlue">◇◆</font></strong><br><br>
清明节与春节、端午节、中秋节<br>并称为中国四大传统节日。<br>

</div><br>

<script>
let sf = document.createElement('script');
sf.src = 'https://xlaj.cn/assets/file/zp/20240318205859.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);

sf.onload = () => {
      let player = new ypP();
      player.setAudSrc('https://music.163.com/song/media/outer/url?id=1436144765.mp3');
      player.setBtnCss(`
                width: 250px;
                left: 30%;
                bottom: 120px;
                --btnBg: url('https://pic.imgdb.cn/item/660292cf9f345e8d031a240d.png ') no-repeat center/cover;
                --trackBg: transparent;
                --progBg: rgba(70,130,180,.67);
                --btnSize: 45px;
      `);
       player.setLrcCss('left: calc(47% - 80px); bottom: 64px; --bg: rgba(70,130,180, .85);font-size: 1.3em;color: #aeb9c0');
      player.lrcAr = [ ['0.00', ' 作词 : 李杰',0.91],
['0.96', ' 作曲 : 李杰',0.91],
['1.92', '清明扫墓歌',4.28],
['6.43', '作词 李杰',5.22],
['11.93', '作曲 李杰',3.09],
['15.18', '编曲 LJMIDI',3.56],
['18.93', '演唱 蔡广耀',2.37],
['21.43', '录音 杨 霖',8.55],
['30.43', '春雨蒙蒙春花开春花开',11.58],
['42.61', '清明时节扫墓来',11.40],
['54.61', '为你培上一把土',11.64],
['66.86', '念你音容春常在',11.63],
['79.11', '春草青青春花开春花开',11.40],
['91.11', '清明时节扫墓来',11.64],
['103.36', '鲜花插在你身旁',11.64],
['115.61', '年年岁岁永不败',11.40],
['127.61', '',26.12],
['155.11', '春风融融春花开春花开',11.40],
['167.11', '清明时节扫墓来',11.40],
['179.11', '后辈不忘前辈情',11.64],
['191.36', '佳讯频传一代代',11.57],
['203.53', '后辈不忘前辈情',11.64],
['215.78', '佳讯频传一代代',4.5]
];
};
</script>

小辣椒 发表于 2024-4-3 23:37

学习冬天的套用一个

無名 发表于 2024-4-4 00:07

这个赞一个，看得我也想套用模块来搞一个试试看:lol

小辣椒 发表于 2024-4-4 13:51

無名 发表于 2024-4-4 00:07
这个赞一个，看得我也想套用模块来搞一个试试看

这个主要是可以替换自己的音乐和图

欢迎套用;P

冬天的雨 发表于 2024-4-4 19:13

图图漂亮，第一次听到这首歌

小辣椒 发表于 2024-4-4 20:37

冬天的雨 发表于 2024-4-4 19:13
图图漂亮，第一次听到这首歌

昨天晚上临时做的，今天清明节了

liumang 发表于 2024-4-4 21:52

这个播放器也是漂亮{:5_150:}
页: [1]
查看完整版本: 清明时节雨纷纷