梦江南 发表于 2025-7-10 14:27

红蔷薇-与你共赏牡丹花开

本帖最后由 梦江南 于 2025-7-13 08:01 编辑 <br /><br /><style type="text/css">
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
.cb-slideshow      {overflow:hidden;width:100%;height:100%;}
.cb-slideshow img {
         width:100%;
         height:100%;
         position: absolute;
         top:0px; left:0px;
         opacity: 0;display: block;
         z-index: 100;filter:contrast(130%)brightness(100%);
         animation: imageAnimation 120s linear infinite;
}

.cb-slideshow img:nth-child(2)                {animation-delay: 10s;}
.cb-slideshow img:nth-child(3)                {animation-delay: 20s;}
.cb-slideshow img:nth-child(4)                {animation-delay: 30s;}
.cb-slideshow img:nth-child(5)                {animation-delay: 40s;}
.cb-slideshow img:nth-child(6)                {animation-delay: 50s;}
.cb-slideshow img:nth-child(7)                {animation-delay: 60s;}
.cb-slideshow img:nth-child(8)                {animation-delay: 70s;}
.cb-slideshow img:nth-child(9)                {animation-delay: 80s;}
.cb-slideshow img:nth-child(10)   {animation-delay: 90s;}
.cb-slideshow img:nth-child(11)          {animation-delay: 100s;}
.cb-slideshow img:nth-child(12)   {animation-delay: 110s;}

@keyframes imageAnimation
{1% {opacity: 0.25;clip-path:polygon(20% 0%, 20% 0, 50% 50%, 0% 80%, 0 80%, 50% 50%, 80% 100%, 80% 100%, 50% 50%, 100% 20%, 100% 20%, 50% 50%);transform:scale(1)}
2%{
opacity: 0.5;clip-path:polygon(20% 0%, 0% 20%, 50% 50%, 0% 80%, 20% 100%, 50% 50%, 80% 100%, 100% 80%, 50% 50%, 100% 20%, 80% 0%, 50% 50%);}
4% {
opacity: 1;clip-path:polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);}
8% {
opacity: 0.8;clip-path:polygon(20% 0%, 0 0, 0 50%, 0 100%, 20% 100%, 50% 100%, 80% 100%, 100% 100%, 100% 50%, 100% 0, 80% 0%, 50% 0);transform:scale(1.2)}
12% {
opacity: 0;clip-path:polygon(20% 0%, 0 0, 0 50%, 0 100%, 20% 100%, 50% 100%, 80% 100%, 100% 100%, 100% 50%, 100% 0, 80% 0%, 50% 0);transform:scale(2.5);}
}
#outblk      {
width: 1000px; height: 600px;overflow:hidden;border-radius:24px;
box-shadow: 0px 0px 0px 2px #00ffff, 0px 0px 0px 20px #0000FF;
margin:120px 0 32px calc(50% - 581px); position:relative;font-size:12px;
background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/30%30%,linear-gradient(50deg, #00BFFF, #E6E6FA, #FFE4C4, #00fF00);
}
#mDisk      {
         width:90px;height:90px;
               position:absolute;
               right:24px;bottom:24px;
               border-radius:50%;
               animation: pRot 8s linear infinite ;
         background:url(http://pan.yinhuabbs.cn/view.php/a93202bcdcd7cc95412d1595f9ec0dba.png) 0 0/100% 100%,
         url(https://img1.oldkids.cn/upload/2025/07/10/blog_260798238_20250710100842909.jpg) 0px 0px/150% 100%;
}
@keyframes pRot      { to { transform: rotate(360deg); } }
</style>
<div id="outblk">
<div class="cb-slideshow">
         <img src="https://img1.oldkids.cn/upload/2025/07/10/blog_260798238_20250710100842159.jpg " />
         <img src="https://img3.oldkids.cn/upload/2025/07/10/blog_260798238_20250710100842992.jpg " />
         <img src="https://img1.oldkids.cn/upload/2025/07/10/blog_260798238_20250710100842909.jpg" />
         <img src="https://img1.oldkids.cn/upload/2025/07/10/blog_260798238_20250710100845767.png" />
         <img src="https://img2.oldkids.cn/upload/2025/07/10/blog_260798238_20250710100846225.png " />
         <img src="https://img2.oldkids.cn/upload/2025/07/10/blog_260798238_20250710100846762.png" />
         <img src="https://img2.oldkids.cn/upload/2025/07/10/blog_260798238_20250710100847225.png" />
         <img src="https://img2.oldkids.cn/upload/2025/07/10/blog_260798238_20250710100848140.png " />
         <img src="https://img2.oldkids.cn/upload/2025/07/10/blog_260798238_20250710100847771.png " />
         <img src="https://img1.oldkids.cn/upload/2025/07/10/blog_260798238_20250710101802546.png" />
         <img src="https://img4.oldkids.cn/upload/2025/07/10/blog_260798238_20250710100849002.png" />
         <img src="https://img4.oldkids.cn/upload/2025/07/10/blog_260798238_20250710100849002.png" />

</div>
   <divclass="lrcShow" id='sLRC' style="z-index:999;bottom:10px;" ></div>
         <divid="mDisk" class='mCtrl' style="z-index:998;"></div>
</div>

<script type="text/javascript">
//      载入歌词同步代码
var sf0 = document.createElement('script');
sf0.type = 'text/javascript';
sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
sf0.charset = "utf-8";
document.body.appendChild(sf0);

sf0.onload = () => {
var lrctxt = `
红蔷薇-与你共赏牡丹花开
作词：贺尧丰
作曲：贺尧丰
歌词由 www.45hk.com 提供
演唱：红蔷薇
编曲：尧君
音乐混音：贺尧丰
出品人：聂钟钰OP/SP：尧君文化
清晨的阳光柔和温暖
辽阔的大地百花盛开
牡丹园里人山人海
欢声笑语乐开怀
一阵阵微风吹动花海
淡淡的清香醉人心怀
宽厚花型圆润饱满
牡丹花开富贵来
与你共赏牡丹花儿开
蜂飞蝶舞花为伴
眼前景象如此浪漫
好想把你拥入我怀
与你共赏牡丹花儿开
满身美丽的花瓣
雍容华贵多姿多彩
陶醉其中流连忘返
LRC歌词编辑：静悟
一阵阵微风吹动花海
淡淡的清香醉人心怀
宽厚花型圆润饱满
牡丹花开富贵来
与你共赏牡丹花儿开
蜂飞蝶舞花为伴
眼前景象如此浪漫
好想把你拥入我怀
与你共赏牡丹花儿开
满身美丽的花瓣
雍容华贵多姿多彩
陶醉其中流连忘返
与你共赏牡丹花儿开
蜂飞蝶舞花为伴
眼前景象如此浪漫
好想把你拥入我怀
与你共赏牡丹花儿开
满身美丽的花瓣
雍容华贵多姿多彩
陶醉其中流连忘返
陶醉其中流连忘返

`;

                         let opts = {
               lrcTxt:lrctxt,
               audioURL:"https://img3.oldkids.cn/upload/2025/07/10/blog_260798238_20250710085239125.mp3",
         }
         let mPlayer = new lrcPlayerY(opts);
         let pics = document.querySelectorAll('.cb-slideshow > img');
         
         let aniPic = (sta) => {pics.forEach((pic) => {pic.style.animationPlayState = sta;})};

         //      歌曲、歌词 及 动态元素 启/停控制
      let runState = () => {
               if(mPlayer.mObj.paused )
                         {mDisk.style.animationPlayState = 'paused'; }
               else
                         {mDisk.style.animationPlayState = 'running'; }
         }

         mDisk.onclick = () => {
               mPlayer.mObj.paused ? (mPlayer.mObj.play(), aniPic('running')) : (mPlayer.mObj.pause(), aniPic('paused'));
         }
         mPlayer.mObj.addEventListener('play', () => runState());
         mPlayer.mObj.addEventListener('pause', () => runState());
         mPlayer.mObj.play().catch(_ = () => runState());
}
</script>

红影 发表于 2025-7-10 16:02

漂亮的牡丹花，漂亮的图片轮播效果。
这个真美，欣赏江南好帖{:4_199:}

红影 发表于 2025-7-10 16:02

好像暂停的时候，歌词和播放器能暂停，图片轮播无法停下来呢{:4_173:}

梦油 发表于 2025-7-10 17:13

花色泽艳丽，玉笑珠香，风流潇洒，富丽堂皇，怎一个美字了得！

梦江南 发表于 2025-7-10 18:02

红影 发表于 2025-7-10 16:02
漂亮的牡丹花，漂亮的图片轮播效果。
这个真美，欣赏江南好帖

问好影子，谢谢欣赏支持。晚上好！{:4_187:}

梦江南 发表于 2025-7-10 18:04

红影 发表于 2025-7-10 16:02
好像暂停的时候，歌词和播放器能暂停，图片轮播无法停下来呢

不知道轮播的图片怎样能一键暂停。{:4_201:}

梦江南 发表于 2025-7-10 18:08

梦油 发表于 2025-7-10 17:13
花色泽艳丽，玉笑珠香，风流潇洒，富丽堂皇，怎一个美字了得！

国色天香牡丹花，花开时节动京城。牡丹花是百花之王，怎能不美 呢！
谢谢欣赏，晚上好。

老谟深虑 发表于 2025-7-10 18:19

          欣赏老师的代码音画，点赞！

梦江南 发表于 2025-7-10 19:14

老谟深虑 发表于 2025-7-10 18:19
欣赏老师的代码音画，点赞！

晚上问好老谟老师，谢谢欣赏支持。{:4_204:}

梦油 发表于 2025-7-10 20:11

梦江南 发表于 2025-7-10 18:08
国色天香牡丹花，花开时节动京城。牡丹花是百花之王，怎能不美 呢！
谢谢欣赏，晚上好。

晚上好！北京景山公园有一个牡丹园，品种很多，可美了。

杨帆 发表于 2025-7-10 20:15

漂亮！谢谢江南精彩分享{:4_204:}

红影 发表于 2025-7-10 21:38

梦江南 发表于 2025-7-10 18:02
问好影子，谢谢欣赏支持。晚上好！

问好江南，晚上好{:4_187:}

红影 发表于 2025-7-10 21:39

梦江南 发表于 2025-7-10 18:04
不知道轮播的图片怎样能一键暂停。

好像做到不是很难，我暂时也不知道怎么做{:4_173:}

梦江南 发表于 2025-7-11 09:44

梦油 发表于 2025-7-10 20:11
晚上好！北京景山公园有一个牡丹园，品种很多，可美了。

北京景山公园有一个牡丹园，品种很多，这是做北京人的福气。毕竟是首都。

梦江南 发表于 2025-7-11 09:45

杨帆 发表于 2025-7-10 20:15
漂亮！谢谢江南精彩分享

谢谢杨帆欣赏支持，问好！

梦江南 发表于 2025-7-11 09:46

红影 发表于 2025-7-10 21:38
问好江南，晚上好

问好影子，周六快乐！{:4_204:}

梦江南 发表于 2025-7-11 09:47

红影 发表于 2025-7-10 21:39
好像做到不是很难，我暂时也不知道怎么做

哪就等您 知道了告诉我吧。{:4_173:}

红影 发表于 2025-7-11 12:19

梦江南 发表于 2025-7-11 09:46
问好影子，周六快乐！

今天还没周六啊，不过周五也是马上休息的周末了，一样很开心{:4_187:}

红影 发表于 2025-7-11 12:19

梦江南 发表于 2025-7-11 09:47
哪就等您 知道了告诉我吧。

好吧，不过我也没本事的{:4_173:}

梦油 发表于 2025-7-11 13:34

梦江南 发表于 2025-7-11 09:44
北京景山公园有一个牡丹园，品种很多，这是做北京人的福气。毕竟是首都。

是啊，这里每年的四五月份牡丹盛花季人可多了，不少“长枪短炮”一蹲就是一天。
页: [1] 2 3
查看完整版本: 红蔷薇-与你共赏牡丹花开