亚伦影音工作室 发表于 2024-7-17 13:44

紫荆花盛开

本帖最后由 亚伦影音工作室 于 2024-7-17 13:57 编辑 <br /><br /><style>
#tz { left: 50%; transform: translateX(calc(-50% - 51px)); background:url('')no-repeat center/cover;width: 1400px; height: 720px; overflow: hidden; box-shadow: 2px 2px 6px #000; z-index: 1; position: relative; }

#bjbs{animation: rotating 1s linear infinite;width: 1400px; height:720px;position:absolute;z-index: 1;}
#bjbs img{ width: 100%; height: 100%;}
@keyframes rotating{50%{filter:hue-rotate(360deg)contrast(110%)brightness(100%);}}
#player { position: absolute; width: 100px;   left: 920px; bottom: 30px; cursor: pointer; animation: rot 6s linear infinite; opacity: 1; z-index: 5;}
@keyframes rot { to { transform: rotate(1turn); } }

#txtbox { position: absolute; left:10%;top: 200px; width: 980px; min-height: 120px; padding: 10px 20px; box-sizing: border-box; overflow: hidden;writing-mode:vertical-lr; letter-spacing: 5px;z-index: 6;}
      #txtbox p { position: relative; margin: 4px 0; padding: 0; font: normal 13px/24px sans-serif; color: #fff; txtAr-shadow: 1px 1px 1px gray; animation: 2s forwards; }
      .tMid, .tRight { display: inline-block; width: 100%; }
      .tMid { text-align: center; }
      .tRight { text-align: right; font-size: 18px; }
@keyframes move { 100% { transform: translate(0); } }

.photo {width: 30%; height: 29%;
position:absolute;z-index: 7;
top:47%; left:56%;
opacity: 0;
animation: round 60s linear infinite;}
@keyframes round {0%   {transform: rotateZ(0deg); opacity: 0;}
2% {transform: rotateZ(0deg); opacity: 1; }

10% {transform: rotateZ(0deg); opacity: 1; }

12% {transform: rotateZ(0deg); opacity: 0; }
}
.photo:nth-child(15) {animation-delay: 56s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/c6213f9ef6b5f03c8de7e3278e33cb3f.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_3840%2ch_2160)no-repeat center/cover}
.photo:nth-child(14) {animation-delay: 52s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/642bafb9e234bc22d616bd21a238f9b0.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_3840%2ch_2160)no-repeat center/cover}
.photo:nth-child(13) {animation-delay: 48s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7cbed82ea3136cd6e15960c78a29bb90.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_3840%2ch_2160)no-repeat center/cover}
.photo:nth-child(12) {animation-delay: 44s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e8fc63640b5a0950acb2faeb7fe02c44.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_3840%2ch_2160)no-repeat center/cover}
.photo:nth-child(11) {animation-delay: 40s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7ff638a9580a3cd929d1770071c7fd31.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_2560%2ch_1440)no-repeat center/cover}
.photo:nth-child(10) {animation-delay: 36s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b140b7290ad2b7c9cb63b4cd84de6450.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_2560%2ch_1440)no-repeat center/cover}
.photo:nth-child(9) {animation-delay: 32s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/147e8df2f70278714fc1395805e84b43.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080)no-repeat center/cover}
.photo:nth-child(8) {animation-delay: 28s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7126f81c005c46cd75d75b781e8f0778.png?x-oss-process=image%2fresize%2cm_lfit%2cw_2560%2ch_1440)no-repeat center/cover}
.photo:nth-child(7) {animation-delay: 24s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/532cf7b502d3a9c763d2ce960056181e.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080)no-repeat center/cover}
.photo:nth-child(6){animation-delay: 20s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/3f0a25619dfa777145e2c93db8886fb6.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080)no-repeat center/cover}
.photo:nth-child(5){animation-delay: 16s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9002fa44546c87a7492bad97f873dc87.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080)no-repeat center/cover}
.photo:nth-child(4){animation-delay: 12s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/43390a53825452854c4dfd9e854b827f.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_2560%2ch_1440)no-repeat center/cover}
.photo:nth-child(3){animation-delay: 8s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b6ffec852f0422ae8fe1083affc33ad4.png?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080)no-repeat center/cover}
.photo:nth-child(2) {animation-delay: 4s;background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9565172a03c86556ca5bac58075513cd.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_3840%2ch_2160')no-repeat center/cover}
.photo:nth-child(1) {animation-delay: 0s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/3551524c3948fbbdf29e7ee68fc39f3f.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080)no-repeat center/cover}
.stop .photo:nth-child(1),
.stop .photo:nth-child(2),
.stop .photo:nth-child(3),
.stop .photo:nth-child(4),
.stop .photo:nth-child(5),
.stop .photo:nth-child(6),
.stop .photo:nth-child(7),
.stop .photo:nth-child(8),
.stop .photo:nth-child(9),
.stop .photo:nth-child(10),
.stop .photo:nth-child(11),
.stop .photo:nth-child(12),
.stop .photo:nth-child(13),
.stop .photo:nth-child(14),
.stop .photo:nth-child(15){animation-play-state: paused;}

</style>

<div id="tz">
<div id="bjbs"><imgsrc="https://pic.imgdb.cn/item/669712a2d9c307b7e937bdf2.jpg" alt="" /></div>

<div id="testImg" >
<divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div><divclass="photo"></div>
<divclass="photo"></div><divclass="photo"></div><divclass="photo"></div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/6e/dc/2f/c74987b5b0caa7dcc996c1224d3e289c/audio.mp3" autoplay loop></audio>
<img id="player" alt="" title="播放" src="https://pic.imgdb.cn/item/65165dfcc458853aeff44557.png" />
<div id="txtbox"></div>
</div>

<script>
var txtAr = [
      `<span class="tMid"></span>
歌曲《紫荆花盛开 》
紫荆花飘扬 飞向 避风的海港
摇曳 一湾水温柔 全是 最爱坚守
纯真 是你的微笑 一眼到永远的抱抱
爱像 亲恩般深长时时
为我鼓掌 爱和唱
永远的紫荆花 在爱之下 茁壮发芽
阳光中笑开花 是暖暖的 翩翩启航
同屋檐 之下 像一幅画
日夜 相守相望
闪闪星光 照亮你的脸庞
心中的紫荆花 凭爱开花 同处一家
多清澈这天空 晴雨相拥 同心逐梦
坚守我 信心 一路出众
无惧罡风 感恩你 热暖送
花开于 爱之中
啦啦啦......
永远的紫荆花 在爱之下 茁壮发芽
阳光中笑开花 是暖暖的 翩翩启航
同屋檐 之下 像一幅画
日夜 相守相望
闪闪星光 照亮你的脸庞
永远的紫荆花 要飞翔啊 纵有浪花
说不尽的牵挂 有我在啊 温暖的家
爱流淌 拥抱 彼此心岸
不负时光
多骄傲的枝芽
春暖后
又开花
亚伦影音出品
2024.7.17
鸣谢：
东篱闲人
`,
      `<span class="tMid"></span>
歌曲《紫荆花盛开 》
紫荆花飘扬 飞向 避风的海港
摇曳 一湾水温柔 全是 最爱坚守
纯真 是你的微笑 一眼到永远的抱抱
爱像 亲恩般深长时时
为我鼓掌 爱和唱
永远的紫荆花 在爱之下 茁壮发芽
阳光中笑开花 是暖暖的 翩翩启航
同屋檐 之下 像一幅画
日夜 相守相望
闪闪星光 照亮你的脸庞
心中的紫荆花 凭爱开花 同处一家
多清澈这天空 晴雨相拥 同心逐梦
坚守我 信心 一路出众
无惧罡风 感恩你 热暖送
花开于 爱之中
啦啦啦......
永远的紫荆花 在爱之下 茁壮发芽
阳光中笑开花 是暖暖的 翩翩启航
同屋檐 之下 像一幅画
日夜 相守相望
闪闪星光 照亮你的脸庞
永远的紫荆花 要飞翔啊 纵有浪花
说不尽的牵挂 有我在啊 温暖的家
爱流淌 拥抱 彼此心岸
不负时光
多骄傲的枝芽
春暖后
又开花
亚伦影音出品
2024.7.17
鸣谢：
东篱闲人
<span class="tRight"></span>`
];
var curIdx = 0;
var paras = [];
var ww = txtbox.offsetWidth;

var addPs = () => {
        var txtstr = txtAr;
        txtbox.innerHTML = '';
        paras.length = 0;
        var ar = txtstr.split(/\n/).filter(item => item !=='');
        ar.forEach((p,k) => {
                var para = document.createElement('p');
                para.innerHTML = p;
                para.style.cssText += `transform: translate(${ww}px);`;
                txtbox.appendChild(para);
                paras.push(para);
        });
        curIdx = (curIdx + 1) % txtAr.length;
        mkAni();
};

var parasReset = () => {
        addPs();
        paras.forEach(p => {
                p.style.animationName = '';
                p.style.transform = 'translate(${ww}px)';
                setTimeout( () => { paras.style.animationName = 'move'; }, 500);
        });
};

var mkAni = () => {
        paras.forEach((p,k) => {
                p.onanimationend = () => {
                        paras[(k+1) % paras.length].style.animationName = 'move';
                        if(k === paras.length - 1) setTimeout( () => parasReset(), 10000);
                };
        });
};
var mState = () => {
        [...paras,...].forEach(p => p.style.animationPlayState = aud.paused ? 'paused' : 'running');
       
        player.title = ['暂停', '播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? (aud.play(),image0.classList.remove('stop') ): (aud.pause(),image0.classList.add('stop'));
addPs();
paras.style.animationName = 'move';
var image0 = document.getElementById("testImg");
bjbs.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>bjbs.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>bjbs.style.animationPlayState = 'paused');
</script>

老谟深虑 发表于 2024-7-17 16:01

          欣赏老师的又一新作，点赞！

红影 发表于 2024-7-17 16:48

这个有趣，把东篱大哥的图图修改过了呢。
使用了文字的逐句进入的代码，右下的方框里还有那么多漂亮的图片轮播{:4_187:}

红影 发表于 2024-7-17 16:49

欣赏亚伦老师好帖{:4_199:}

梦油 发表于 2024-7-17 16:52

欣赏佳作，问候亚伦。

小辣椒 发表于 2024-7-17 21:50

欣赏亚伦精彩制作{:4_187:}

竹溪 发表于 2024-7-17 22:12

漂亮的变色音画。
页: [1]
查看完整版本: 紫荆花盛开