【采桑子】TO冬天的雨&小辣椒
<style>#papa { margin: 150px 0 0 calc(50% - 881px); width: 1600px; height: 566px; background: navy; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
#papa::before , #papa::after { position: absolute; content: ''; left: var(--begin1); top: 0px; width: 100%; height: 100%; background: url('https://xlaj.cn/assets/file/zp/20240408220128.jpg') no-repeat center/cover; z-index: -1; }
#papa::after { left: var(--begin2); transform: scale(-1,1); }
#play { position: absolute; right: 275px; top: 90px; width: 50px; mix-blend-mode: multiply; cursor: pointer; animation: rotating 5s linear infinite var(--state); }
#vid { position: absolute; width: calc(100% + 200px); height: 100%; object-fit: cover; mix-blend-mode: screen;opacity: .25; }
@keyframes rotating { to { transform: rotate(360deg); } }
#dt1{ position: absolute; width:90px; height: 80px; top: 80px; left: 184px; }
#dt2{ position: absolute; width:240px; height: 144px; top: 350px; left: 284px; }
</style>
<div id="papa">
<img id="dt1" src="https://xlaj.cn/assets/file/zp/20240408220202.gif " alt="" />
<img id="dt2" src="https://xlaj.cn/assets/file/zp/20240408220229.gif" alt="" />
<audio id="aud" src="https://s138.ananas.chaoxing.com/sv-w8/audio/0a/1f/dc/3e7d4dff28be7008ce86dc731edb4d98/audio.mp3" autoplay></audio>
<video id="vid" src="https://chuangshicdn.file.m.mvbox.cn/upload/bceab60d012a3b3b89d4193105e51073.mp4" autoplay muted loop></video>
<img id="play" src="https://xlaj.cn/assets/file/zp/20240408220249.png" alt="" />
</div>
<script>
var ww = papa.offsetWidth;
var step = 0.3, begin1 = 0, begin2 = ww, raf;
aud.loop = false;
aud.onpause = aud.onplaying = () =>moving();
aud.onseeked = () => cancelAnimationFrame(raf);
aud.onended = () => { cancelAnimationFrame(raf); aud.play(); };
play.onclick = () => { aud.paused ? aud.play() : aud.pause(); };
var moving = () => {
begin1 += step;
begin2 += step;
if(begin1 >= ww) begin1 = -ww;
if(begin2 >= ww) begin2 = -ww;
let b2 = begin2 + (begin1 >= 0 ? 1 : -1);
papa.style.setProperty('--begin1', begin1 + 'px');
papa.style.setProperty('--begin2', b2 + 'px');
aud.paused
? (cancelAnimationFrame(raf), papa.style.setProperty('--state', 'paused'), vid.pause())
: (raf = requestAnimationFrame(moving), papa.style.setProperty('--state', 'running'),vid.play());
};
</script>
</style><br><br><br><br><br>
【采桑子】TO冬天的雨&小辣椒<br><br>
其一<br><br>
杨花柳絮飞琼宇。晓浴东阳，春水含香，漫浪兰舟醉野航。<br><br>
西施故里多才女，独善宫商。韵味悠长，一曲清歌入梦乡。<br><br>
其二<br><br>
添香冬雨飞红袖。携手摇芳，携手摇芳，月下双双夜未央。<br><br>
世间烦恼抛尘外，杜绝栖遑，美目何伤，对酒当歌乐且康。<br><br>
</script>
@小辣椒 @冬天的雨 小辣椒把你的动图图都用上，能加字了，但边框弄不上也将就了，只是字弄不大，字的颜色改不来。{:4_173:} 樵哥哥又一大进步了，这个帖会移动了而且还改了尺寸{:4_199:} 樵歌 发表于 2024-5-3 21:01
@小辣椒 @冬天的雨
谢谢樵哥哥，上来就看见礼物了，立马进来收礼{:4_170:} @冬天的雨
冬雨休息天还在赚钱啊{:4_170:} 小辣椒 发表于 2024-5-3 21:20
樵哥哥又一大进步了，这个帖会移动了而且还改了尺寸
栖遑~是忙乱的意思哈。
我进去看看，怎么把标题定改大的 小辣椒 发表于 2024-5-3 21:23
谢谢樵哥哥，上来就看见礼物了，立马进来收礼
就知道你这两天好些了，心情不错就给你写的。 小辣椒 发表于 2024-5-3 21:24
@冬天的雨
冬雨休息天还在赚钱啊
他不来陪你，打他PP{:4_170:} 鹰也能同步飞那就更厉害了 这两首词还是根据画面含义写的呢。词句精美，制作也好。这个帖子漂亮。给师兄点赞{:4_199:} 小辣椒和冬小雨收礼开心{:4_187:} 好一幅江南美景，小船在水中优哉游哉，樵歌朋友的作品真是精雕细琢的精品。 马黑黑 发表于 2024-5-3 21:54
鹰也能同步飞那就更厉害了
切问问小辣椒吧{:4_189:} 红影 发表于 2024-5-3 22:57
这两首词还是根据画面含义写的呢。词句精美，制作也好。这个帖子漂亮。给师兄点赞
看到小辣椒这个音画漂亮，就套来写字了。{:4_189:} 红影 发表于 2024-5-3 22:58
小辣椒和冬小雨收礼开心
冬小雨到钱眼里切了{:4_189:} 梦油 发表于 2024-5-4 08:41
好一幅江南美景，小船在水中优哉游哉，樵歌朋友的作品真是精雕细琢的精品。
除了字是我凑的，其余全部套的小辣椒的呵{:4_189:} 樵歌 发表于 2024-5-4 11:17
切问问小辣椒吧
鹰的飞行我们有过示例的，之前队长做了不少 樵歌 发表于 2024-5-4 11:18
看到小辣椒这个音画漂亮，就套来写字了。
这样浪漫柔美的氛围，送他们俩是最好的呢。师兄的两首词句都很好呢{:4_187:} 樵歌 发表于 2024-5-4 11:20
冬小雨到钱眼里切了
小青年更需要事业上的成功呢{:4_173:}
页:
[1]
2