wjlst1 发表于 2023-4-12 22:52:26

粉红蕾丝边框分享 极速模式浏览

本帖最后由 片片枫叶情 于 2023-4-13 07:38 编辑 <br /><br />01.粉红蕾丝

<table style="left: -0px; top: 50px; width: 878px; position: relative;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="134" background="https://wjl136.oss-cn-beijing.aliyuncs.com/23/bk/fhls/01.jpg"></td></tr>
<tr>
<td height="14" background="https://wjl136.oss-cn-beijing.aliyuncs.com/23/bk/fhls/02.png">
<br><div align="center">
<table style="width: 720px; position: relative;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="72" background="https://wjl136.oss-cn-beijing.aliyuncs.com/23/bk/fhls/03.jpg"></td></tr>
<tr>
<td height="14" background="https://wjl136.oss-cn-beijing.aliyuncs.com/23/bk/fhls/04.jpg">
<style>
#mplayer {
      --state: paused;
      position: absolute;
      bottom: 10px;
      width: 70px;
      height: 64px;
      cursor: pointer;
      border-radius: 50%;
      filter: drop-shadow(8px 4px 20px lightgreen);
      animation: flash .3s infinite alternate var(--state);
}
#mplayer:hover {
      transform: skew(5deg);
}
#mypic {
      width: 100%;
      height: 100%;
      display: none;
      position: absolute;
}

@keyframes flash {
      to { filter: drop-shadow(16px 8px 40px green); }
}
</style>
      <div id="mplayer">
                <canvas id="canv" width="70" height="64"></canvas>
                <img id="mypic" src="https://wjl136.oss-cn-beijing.aliyuncs.com/23/bk/fhls/ct.webp" alt="" />
                <audio id="aud" src="http://chuangshicdn.data.mvbox.cn/music/yc/23/04/11/23041108164387827636.mp3" autoplay loop></audio>
      </div>
</div>

<script>
(function() {
      let context = canv.getContext('2d');
      let oImg = new Image();
      oImg.src = mypic.src;
      oImg.onload = () => context.drawImage(oImg,0,0,canv.width,canv.height);
      let mState = () => aud.paused ? (canv.style.display = 'block', mypic.style.display = 'none', mplayer.style.setProperty('--state','paused')) : (canv.style.display = 'none', mypic.style.display = 'block', mplayer.style.setProperty('--state','running'));
      aud.addEventListener('play', () => mState());
      aud.addEventListener('pause', () => mState());
      mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
<br><br><br><div align="center"><font color="#000000" face="微软雅黑" size="5">安靜，其實很美！<font><br><font color="#000000"><strong>---------------------------<br><br><div align="center"><img width="312" height="207" alt="◇精美粉红蕾丝边框◇wjlst编辑自制边框" src="https://wjl136.oss-cn-beijing.aliyuncs.com/23/bk/fhls/jds.png" appendurl="1"><br><br><br><br><br><font color="#5b4b00"><font size="2">          如若可以，愿用十年韶光，不求一世情长，愿求不曾相遇。<br><br>
<font color="#5b4b00"><font size="2">      如若可以，愿擦掉一切过往，不求忘记，但求一世安稳。<br><br>
<font color="#5b4b00"><font size="2">如若可以，愿用一世笑颜，不求超度，盼春梦早醒。<br><br>
<font color="#5b4b00"><font size="2">我知道，如若可以擦过所有的从前，我依旧会选择在<br><br>
<font color="#5b4b00"><font size="2">             茫茫人海里，和你重新遇见，和你在一起，等新月变成月圆。<br><br><br><br><br><br><br><br><br><br><br><br><br><div align="center"><img width="450" height="118" alt="◇精美粉红蕾丝边框◇wjlst编辑自制边框" src="https://wjl136.oss-cn-beijing.aliyuncs.com/23/bk/fhls/jds1.png" appendurl="1"><br><br>
</td></tr><tr><td height="115" background="https://wjl136.oss-cn-beijing.aliyuncs.com/23/bk/fhls/05.jpg"></tr></tbody></table></div></tr></tbody></table><br><br><br><br>边框里这是播放器

wjlst1 发表于 2023-4-12 22:53:18


01.粉红蕾丝

<table style="left: 120px; top: 50px; width: 878px; position: relative;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="134" background="https://wjl136.oss-cn-beijing.aliyuncs.com/23/bk/fhls/01.jpg"></td></tr>
<tr>
<td height="14" background="https://wjl136.oss-cn-beijing.aliyuncs.com/23/bk/fhls/02.png">
<br><div align="center">
<table style="width: 720px; position: relative;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="72" background="https://wjl136.oss-cn-beijing.aliyuncs.com/23/bk/fhls/03.jpg"></td></tr>
<tr>
<td height="14" background="https://wjl136.oss-cn-beijing.aliyuncs.com/23/bk/fhls/04.jpg">
<style>
#mplayer {
        --state: paused;
        position: absolute;
        bottom: 10px;
        width: 70px;
        height: 64px;
        cursor: pointer;
        border-radius: 50%;
        filter: drop-shadow(8px 4px 20px lightgreen);
        animation: flash .3s infinite alternate var(--state);
}
#mplayer:hover {
        transform: skew(5deg);
}
#mypic {
        width: 100%;
        height: 100%;
        display: none;
        position: absolute;
}

@keyframes flash {
        to { filter: drop-shadow(16px 8px 40px green); }
}
</style>
        <div id="mplayer">
                <canvas id="canv" width="70" height="64"></canvas>
                <img id="mypic" src="https://wjl136.oss-cn-beijing.aliyuncs.com/23/bk/fhls/ct.webp" alt="" />
                <audio id="aud" src="http://chuangshicdn.data.mvbox.cn/music/yc/23/04/11/23041108164387827636.mp3" autoplay loop></audio>
        </div>
</div>

<script>
(function() {
        let context = canv.getContext('2d');
        let oImg = new Image();
        oImg.src = mypic.src;
        oImg.onload = () => context.drawImage(oImg,0,0,canv.width,canv.height);
        let mState = () => aud.paused ? (canv.style.display = 'block', mypic.style.display = 'none', mplayer.style.setProperty('--state','paused')) : (canv.style.display = 'none', mypic.style.display = 'block', mplayer.style.setProperty('--state','running'));
        aud.addEventListener('play', () => mState());
        aud.addEventListener('pause', () => mState());
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
<br><br><br><div align="center"><font color="#000000" face="微软雅黑" size="5">安靜，其實很美！<font><br><font color="#000000"><strong>---------------------------<br><br><div align="center"><img width="312" height="207" alt="◇精美粉红蕾丝边框◇wjlst编辑自制边框" src="https://wjl136.oss-cn-beijing.aliyuncs.com/23/bk/fhls/jds.png" appendurl="1"><br><br><br><br><br><font color="#5b4b00"><font size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 如若可以，愿用十年韶光，不求一世情长，愿求不曾相遇。<br><br>
<font color="#5b4b00"><font size="2">&nbsp; &nbsp; &nbsp; 如若可以，愿擦掉一切过往，不求忘记，但求一世安稳。<br><br>
<font color="#5b4b00"><font size="2">如若可以，愿用一世笑颜，不求超度，盼春梦早醒。<br><br>
<font color="#5b4b00"><font size="2">我知道，如若可以擦过所有的从前，我依旧会选择在<br><br>
<font color="#5b4b00"><font size="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;茫茫人海里，和你重新遇见，和你在一起，等新月变成月圆。<br><br><br><br><br><br><br><br><br><br><br><br><br><div align="center"><img width="450" height="118" alt="◇精美粉红蕾丝边框◇wjlst编辑自制边框" src="https://wjl136.oss-cn-beijing.aliyuncs.com/23/bk/fhls/jds1.png" appendurl="1"><br><br>
</td></tr><tr><td height="115" background="https://wjl136.oss-cn-beijing.aliyuncs.com/23/bk/fhls/05.jpg"></tr></tbody></table></div></tr></tbody></table><br><br><br><br>

wjlst1 发表于 2023-4-12 22:54:24


边框里这是播放器代码：
<style>
#mplayer {
--state: paused;
position: absolute;
bottom: 10px;
width: 70px;
height: 64px;
cursor: pointer;
border-radius: 50%;
filter: drop-shadow(8px 4px 20px lightgreen);
animation: flash .3s infinite alternate var(--state);
}
#mplayer:hover {
transform: skew(5deg);
}
#mypic {
width: 100%;
height: 100%;
display: none;
position: absolute;
}
@keyframes flash {
to { filter: drop-shadow(16px 8px 40px green); }
}
</style>
<div id="mplayer">
<canvas id="canv" width="70" height="64"></canvas>
<img id="mypic" src="https://wjl136.oss-cn-beijing.aliyuncs.com/23/bk/fhls/ct.webp" alt="" />
<audio id="aud" src="http://chuangshicdn.data.mvbox.cn/music/yc/23/04/11/23041108164387827636.mp3" autoplay loop></audio>
</div>
</div>
<script>
(function() {
let context = canv.getContext('2d');
let oImg = new Image();
oImg.src = mypic.src;
oImg.onload = () => context.drawImage(oImg,0,0,canv.width,canv.height);
let mState = () => aud.paused ? (canv.style.display = 'block', mypic.style.display = 'none', mplayer.style.setProperty('--state','paused')) : (canv.style.display = 'none', mypic.style.display = 'block', mplayer.style.setProperty('--state','running'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

片片枫叶情 发表于 2023-4-13 07:39:43

女生应该很喜欢这颜色。
页: [1]
查看完整版本: 粉红蕾丝边框分享 极速模式浏览