醉美水芙蓉 发表于 昨天 22:03

我与春风皆过客

<meta charset="utf-8">
<style>
#papa {
      width: 650px;   
      min-height: 1150px;
      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: 160px;
      top: 650px;
      font: bold 20px/26px 'FangSong',serif;
      color: DarkOrchid;
}
#papa::before, #papa::after {
      position: absolute;
      content: '';
}
#papa::before {
      left: 10px;
      top: 10px;
      right: 10px;
      bottom: 10px;
      border: 2px dashed MediumPurple;
      border-radius: inherit;
}
#papa::after {
      content: '[我与春风皆过客';
      padding: 10px 40px 10px 10px;
      left: -10px;
      top: 20px;
      border-radius: 10px 0 0 10px;
      background: BlueViolet;
      opacity: .85;
      font: bold 16px/24px 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: 510px;
      height: 420px;
}
.mpic { position: absolute; right: 10px; bottom: 20px; width: 200px; height: 144px; }
.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://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/995d9408a1e49d5c2e851b2fe087bebd.jpg" alt="">
       <img src="https://pic.imgdb.cn/item/65f852fa9f345e8d030e42e4.gif" alt="" class="mpic">
      <div id="tit">我与春风皆过客<br>
2026-04-01文字：醉美水芙蓉/图意<br>
我与春风皆过客<br>
你携秋水揽星河<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://www.joy127.com/url/147356.mp3 ');
      player.setBtnCss(`
                width: 250px;
                left: 30%;
                bottom: 120px;
                --btnBg: url('https://638183.freep.cn/638183/small/purple.png') no-repeat center/cover;
                --trackBg: transparent;
                --progBg: rgba(138,43,226,.7);
                --btnSize: 45px;
      `);
      player.setLrcCss('bottom: 60px;color: #9c81d5;--bg: linear-gradient(180deg, #af9ad9);font-size: 1.3em;',);
      player.lrcAr = [,
];
};
</script>

klxf 发表于 6 小时前

富有新意，谢谢分享
页: [1]
查看完整版本: 我与春风皆过客