起个网名好难 发表于 2024-10-17 18:36

黄山是一幅画

本帖最后由 起个网名好难 于 2024-10-17 18:36 编辑 <br /><br /><meta charset="utf-8">
<style type="text/css">
/*        lrcPlayerSI.css 通用的        */
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
                /**        不满意一般设置也可以调整下                */
        .lrcShow {
                        font:normal 30px 微软雅黑;
                        pointer-events:none;
                        left:20%;
        }
        .lrcShow::before {
                        color:blue;
        }
       
        #outCircle        {
                width:600px;
                height:600px;
                overflow:hidden;
                border-radius:50%;
                box-shadow:4px 4px 8px black;
                position:relative;
                margin:12px auto;
                animation: picRotate 120s linear infinite;
                animation-play-state:paused;
        }
        #innerCircle        {
                width:50px;
                height:50px;
                overflow:hidden;
                border-radius:50%;
                outline:thin red solid;
                position:absolute;
                top:275px;left:275px;
                cursor:pointer;
        }
       
        @keyframes picRotate        {                                                                                                       
                from        {transform:rotate(0deg);}                                                                                                       
                to                {transform:rotate(360deg);}                                                                                                                 
        }
        #outBlk        {width:600px;height:700px;position:relative;margin:12px auto;padding:12px;background-color:hsl(240, 10%, 90%);
                overflow:hidden; border-radius:24px; box-shadow:4px 4px 10px black;background:url(https://img2.baidu.com/it/u=967612566,779354720&fm=253&fmt=auto&app=120&f=JPEG) center/cover;}
</style>
<div id="outBlk">
<div id="outCircle">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" viewBox="0 0 600 600">
<image xlink:href="https://s1.ax1x.com/2023/03/22/ppaoygx.jpg" opacity='0'
x='-180' y="0" width="960" height="600" preserveAspectRatio="none">
<animate id="bpic0" attributename="opacity" from='0' to='1' begin="0;epic19.end-1" dur='2s' fill="freeze"></animate>
<animate id="epic0" attributename="opacity" from="1" to="0" begin="bpic0.begin+5" dur='2s' fill="freeze"></animate>
</image>
<image xlink:href="https://s1.ax1x.com/2023/03/22/ppaorCR.jpg" opacity='0'
x='-180' y="0" width="960" height="600" preserveAspectRatio="none">
<animate id="bpic1" attributename="opacity" from='0' to='1' begin="epic0.end-1" dur='2s' fill="freeze"></animate>
<animate id="epic1" attributename="opacity" from="1" to="0" begin="bpic1.begin+5" dur='2s' fill="freeze"></animate>
</image>
<image xlink:href="https://s1.ax1x.com/2023/03/22/ppaoB59.jpg" opacity='0'
x='-180' y="0" width="960" height="600" preserveAspectRatio="none">
<animate id="bpic2" attributename="opacity" from='0' to='1' begin="epic1.end-1" dur='2s' fill="freeze"></animate>
<animate id="epic2" attributename="opacity" from="1" to="0" begin="bpic2.begin+5" dur='2s' fill="freeze"></animate>
</image>
<image xlink:href="https://s1.ax1x.com/2023/03/22/ppao6v6.jpg" opacity='0'
x='-180' y="0" width="960" height="600" preserveAspectRatio="none">
<animate id="bpic3" attributename="opacity" from='0' to='1' begin="epic2.end-1" dur='2s' fill="freeze"></animate>
<animate id="epic3" attributename="opacity" from="1" to="0" begin="bpic3.begin+5" dur='2s' fill="freeze"></animate>
</image>
<image xlink:href="https://s1.ax1x.com/2023/03/22/ppaos81.jpg" opacity='0'
x='-180' y="0" width="960" height="600" preserveAspectRatio="none">
<animate id="bpic4" attributename="opacity" from='0' to='1' begin="epic3.end-1" dur='2s' fill="freeze"></animate>
<animate id="epic4" attributename="opacity" from="1" to="0" begin="bpic4.begin+5" dur='2s' fill="freeze"></animate>
</image>
<image xlink:href="https://s1.ax1x.com/2023/03/22/ppaogKK.jpg" opacity='0'
x='-180' y="0" width="960" height="600" preserveAspectRatio="none">
<animate id="bpic5" attributename="opacity" from='0' to='1' begin="epic4.end-1" dur='2s' fill="freeze"></animate>
<animate id="epic5" attributename="opacity" from="1" to="0" begin="bpic5.begin+5" dur='2s' fill="freeze"></animate>
</image>
<image xlink:href="https://s1.ax1x.com/2023/03/22/ppao2DO.jpg" opacity='0'
x='-180' y="0" width="960" height="600" preserveAspectRatio="none">
<animate id="bpic6" attributename="opacity" from='0' to='1' begin="epic5.end-1" dur='2s' fill="freeze"></animate>
<animate id="epic6" attributename="opacity" from="1" to="0" begin="bpic6.begin+5" dur='2s' fill="freeze"></animate>
</image>


<image xlink:href="https://s1.ax1x.com/2023/03/22/ppaoRbD.jpg" opacity='0'
x='-180' y="0" width="960" height="600" preserveAspectRatio="none">
<animate id="bpic7" attributename="opacity" from='0' to='1' begin="epic6.end-1" dur='2s' fill="freeze"></animate>
<animate id="epic7" attributename="opacity" from="1" to="0" begin="bpic7.begin+5" dur='2s' fill="freeze"></animate>
</image>
<image xlink:href="https://s1.ax1x.com/2023/03/22/ppaofVe.jpg" opacity='0'
x='-180' y="0" width="960" height="600" preserveAspectRatio="none">
<animate id="bpic8" attributename="opacity" from='0' to='1' begin="epic7.end-1" dur='2s' fill="freeze"></animate>
<animate id="epic8" attributename="opacity" from="1" to="0" begin="bpic8.begin+5" dur='2s' fill="freeze"></animate>
</image>
<image xlink:href="https://s1.ax1x.com/2023/03/22/ppaoo8I.jpg" opacity='0'
x='-180' y="0" width="960" height="600" preserveAspectRatio="none">
<animate id="bpic9" attributename="opacity" from='0' to='1' begin="epic8.end-1" dur='2s' fill="freeze"></animate>
<animate id="epic9" attributename="opacity" from="1" to="0" begin="bpic9.begin+5" dur='2s' fill="freeze"></animate>
</image>
<image xlink:href="https://s1.ax1x.com/2023/03/22/ppaohUH.jpg" opacity='0'
x='-180' y="0" width="960" height="600" preserveAspectRatio="none">
<animate id="bpic10" attributename="opacity" from='0' to='1' begin="epic9.end-1" dur='2s' fill="freeze"></animate>
<animate id="epic10" attributename="opacity" from="1" to="0" begin="bpic10.begin+5" dur='2s' fill="freeze"></animate>
</image>
<image xlink:href="https://s1.ax1x.com/2023/03/22/ppaoIPA.jpg" opacity='0'
x='-180' y="0" width="960" height="600" preserveAspectRatio="none">
<animate id="bpic11" attributename="opacity" from='0' to='1' begin="epic10.end-1" dur='2s' fill="freeze"></animate>
<animate id="epic11" attributename="opacity" from="1" to="0" begin="bpic11.begin+5" dur='2s' fill="freeze"></animate>
</image>
<image xlink:href="https://s1.ax1x.com/2023/03/22/ppao45d.jpg" opacity='0'
x='-180' y="0" width="960" height="600" preserveAspectRatio="none">
<animate id="bpic12" attributename="opacity" from='0' to='1' begin="epic11.end-1" dur='2s' fill="freeze"></animate>
<animate id="epic12" attributename="opacity" from="1" to="0" begin="bpic12.begin+5" dur='2s' fill="freeze"></animate>
</image>
<image xlink:href="https://s1.ax1x.com/2023/03/22/ppaoT2t.jpg" opacity='0'
x='-180' y="0" width="960" height="600" preserveAspectRatio="none">
<animate id="bpic13" attributename="opacity" from='0' to='1' begin="epic12.end-1" dur='2s' fill="freeze"></animate>
<animate id="epic13" attributename="opacity" from="1" to="0" begin="bpic13.begin+5" dur='2s' fill="freeze"></animate>
</image>
<image xlink:href="https://s1.ax1x.com/2023/03/22/ppao7xP.jpg" opacity='0'
x='-180' y="0" width="960" height="600" preserveAspectRatio="none">
<animate id="bpic14" attributename="opacity" from='0' to='1' begin="epic13.end-1" dur='2s' fill="freeze"></animate>
<animate id="epic14" attributename="opacity" from="1" to="0" begin="bpic14.begin+5" dur='2s' fill="freeze"></animate>
</image>
<image xlink:href="https://s1.ax1x.com/2023/03/23/ppwGdbQ.jpg" opacity='0'
x='-180' y="0" width="960" height="600" preserveAspectRatio="none">
<animate id="bpic15" attributename="opacity" from='0' to='1' begin="epic14.end-1" dur='2s' fill="freeze"></animate>
<animate id="epic15" attributename="opacity" from="1" to="0" begin="bpic15.begin+5" dur='2s' fill="freeze"></animate>
</image>
<image xlink:href="https://s1.ax1x.com/2023/03/23/ppwG0Ej.jpg" opacity='0'
x='-180' y="0" width="960" height="600" preserveAspectRatio="none">
<animate id="bpic16" attributename="opacity" from='0' to='1' begin="epic15.end-1" dur='2s' fill="freeze"></animate>
<animate id="epic16" attributename="opacity" from="1" to="0" begin="bpic16.begin+5" dur='2s' fill="freeze"></animate>
</image>
<image xlink:href="https://s1.ax1x.com/2023/03/23/ppwGaDg.jpg" opacity='0'
x='-180' y="0" width="960" height="600" preserveAspectRatio="none">
<animate id="bpic17" attributename="opacity" from='0' to='1' begin="epic16.end-1" dur='2s' fill="freeze"></animate>
<animate id="epic17" attributename="opacity" from="1" to="0" begin="bpic17.begin+5" dur='2s' fill="freeze"></animate>
</image>
<image xlink:href="https://s1.ax1x.com/2023/03/23/ppwGUKS.jpg" opacity='0'
x='-180' y="0" width="960" height="600" preserveAspectRatio="none">
<animate id="bpic18" attributename="opacity" from='0' to='1' begin="epic17.end-1" dur='2s' fill="freeze"></animate>
<animate id="epic18" attributename="opacity" from="1" to="0" begin="bpic18.begin+5" dur='2s' fill="freeze"></animate>
</image>
<image xlink:href="https://s1.ax1x.com/2023/03/23/ppwGBUs.jpg" opacity='0'
x='-180' y="0" width="960" height="600" preserveAspectRatio="none">
<animate id="bpic19" attributename="opacity" from='0' to='1' begin="epic18.end-1" dur='2s' fill="freeze"></animate>
<animate id="epic19" attributename="opacity" from="1" to="0" begin="bpic19.begin+5" dur='2s' fill="freeze"></animate>
</image></svg>
</div>
<img id="innerCircle" src="https://s3.bmp.ovh/imgs/2023/03/22/b5366ca706d0e957.png">
<div class="lrcShow" data-lrc="黄山是一幅画" >黄山是一幅画</div>
</div>
<!-- lrcPlayerSs.js 歌词同步代码 -->
<script type="text/javascript" src="https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js" charset="utf-8"></script -->

<script type="text/javascript">
{
        let lrctxt = `
        作词 : 朋友张晓明\n 作曲 : 戚建波\n\n黄山是一幅画\n我在梦里见过她\n她很自信很潇洒\n她的名字享誉天下\n黄山是一幅画\n好客奇松迎天下\n飞泉奇石在歌唱\n醉的游人一路夸\n黄山是一幅画\n我在梦里见过她\n她很自信很潇洒\n她的名字享誉天下\n黄山是一幅画\n好客奇松迎天下\n飞泉奇石在歌唱\n醉的游人一路夸\n黄山是一幅画\n\n奇峰云海舞彩霞\n蓝蓝的天空白云挂\n天空白云挂\n黄山是一幅画\n冬雪飞满山树花\n惊世的黄山我爱她\n黄山我爱她\n黄山是一幅画\n我在梦里见过她\n她很自信很潇洒\n她的名字享誉天下\n\n黄山是一幅画\n好客奇松迎天下\n飞泉奇石在歌唱\n醉的游人一路夸\n黄山是一幅画\n\n奇峰云海舞彩霞\n蓝蓝的天空白云挂\n天空白云挂\n黄山是一幅画\n冬雪飞满山树花\n惊世的黄山我爱她\n黄山我爱她\n黄山是一幅画\n\n\n奇峰云海舞彩霞\n蓝蓝的天空白云挂\n天空白云挂\n黄山是一幅画\n冬雪飞满山树花\n惊世的黄山我爱她\n黄山我爱她\n黄山我爱她\n
        `;
        let opts = {
                lrcTxt:lrctxt,
                audioURL:"https://music.163.com/song/media/outer/url?id=1470683155.mp3",
        }
        let player = new lrcPlayerY(opts);
       
        let rState = () =>        {
                player.mObj.paused ? (outCircle.style.animationPlayState="paused", innerCircle.src = "https://s3.bmp.ovh/imgs/2023/03/22/b5366ca706d0e957.png") :
                       (outCircle.style.animationPlayState="running", innerCircle.src = "https://s3.bmp.ovh/imgs/2023/03/22/fba7877781740547.png");
        }
       
        player.mObj.onplay = player.mObj.onpause = () => rState();

        innerCircle.onclick = () => {
                if(player.mObj.paused)        {
                                outCircle.style.animationPlayState="running",
                                innerCircle.src = "https://s3.bmp.ovh/imgs/2023/03/22/fba7877781740547.png",
                                player.mObj.play()
                }
                else        {
                                outCircle.style.animationPlayState="paused",
                                innerCircle.src = "https://s3.bmp.ovh/imgs/2023/03/22/b5366ca706d0e957.png",
                                player.mObj.pause()
                }
        }
}
</script>

红影 发表于 2024-10-17 20:03

这个有意思，但暂停后，小图旋转停止了，图片轮播还在继续。所以看到了好几幅倒着的小图{:4_173:}

红影 发表于 2024-10-17 20:03

黄山是一幅画，轮播小图是画中画，这个构思真棒{:4_199:}

起个网名好难 发表于 2024-10-17 20:20

红影 发表于 2024-10-17 20:03
这个有意思，但暂停后，小图旋转停止了，图片轮播还在继续。所以看到了好几幅倒着的小图

又一个旧帖子，当时还不会如何停止切换画面{:5_102:}

醉美水芙蓉 发表于 2024-10-17 20:20

起个网名好难 发表于 2024-10-17 20:20

红影 发表于 2024-10-17 20:03
黄山是一幅画，轮播小图是画中画，这个构思真棒

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

起个网名好难 发表于 2024-10-17 20:26

醉美水芙蓉 发表于 2024-10-17 20:20
老师画中画真漂亮！

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

红影 发表于 2024-10-17 20:41

起个网名好难 发表于 2024-10-17 20:20
又一个旧帖子，当时还不会如何停止切换画面

现在对难难来说应该不算事呢{:4_187:}

红影 发表于 2024-10-17 20:42

起个网名好难 发表于 2024-10-17 20:20


谢谢难难带来的美丽的黄山景色{:4_187:}

小辣椒 发表于 2024-10-17 21:05

难难的代码特效玩的太好了，又一个{:4_178:}

小辣椒 发表于 2024-10-17 21:08

难难这个图片特效我在手机欣赏变换我看见的，电脑欣赏我看不见，是不是浏览器问题？

起个网名好难 发表于 2024-10-17 21:22

红影 发表于 2024-10-17 20:41
现在对难难来说应该不算事呢

缺憾也是美{:5_117:}

起个网名好难 发表于 2024-10-17 21:23

红影 发表于 2024-10-17 20:42
谢谢难难带来的美丽的黄山景色

搬来的{:5_117:}

起个网名好难 发表于 2024-10-17 21:28

小辣椒 发表于 2024-10-17 21:05
难难的代码特效玩的太好了，又一个

这个应该是简单些，只是淡入淡出。

起个网名好难 发表于 2024-10-17 21:30

小辣椒 发表于 2024-10-17 21:08
难难这个图片特效我在手机欣赏变换我看见的，电脑欣赏我看不见，是不是浏览器问题？

这里面的图片是图床里的应该能看到啊，换个浏览器试试看

起个网名好难 发表于 2024-10-17 21:33

小辣椒 发表于 2024-10-17 21:08
难难这个图片特效我在手机欣赏变换我看见的，电脑欣赏我看不见，是不是浏览器问题？

怪了，正好相反手机上两个浏览器都看不到， 不知问题出在哪里

红影 发表于 2024-10-17 22:24

起个网名好难 发表于 2024-10-17 21:22
缺憾也是美

是啊，还能借机回忆一下过往，何乐而不为{:4_173:}

红影 发表于 2024-10-17 22:25

起个网名好难 发表于 2024-10-17 21:23
搬来的

很漂亮{:4_187:}

起个网名好难 发表于 2024-10-17 23:01

红影 发表于 2024-10-17 22:24
是啊，还能借机回忆一下过往，何乐而不为

偷懒的借口

起个网名好难 发表于 2024-10-17 23:02

红影 发表于 2024-10-17 22:25
很漂亮

搬运工很卖力
页: [1] 2 3 4
查看完整版本: 黄山是一幅画