红枫 发表于 2021-8-17 17:42

《琵琶行》----音画朗诵

<DIV style="POSITION: relative; WIDTH: 900px; TOP: 0px; LEFT: 50px"><style type="text/css" charset="utf-8">


/**        中间垂直展开        0        **/
.dyn_pic0        {
        width:0px;
        height:100%;
        position:absolute;
        left:50%;top:0px;
}
.turn_pic0        {
        animation:turn_pic_0 4s 1 linear forwards;
}
@keyframes turn_pic_0 {
        from {
                width:0px;height:100%;
                left:50%;top:0px;
                opacity:0.6;
        }
        to        {
                width:100%;height:100%;
                left:0px;top:0px;
                opacity:1;
        }
}
/**        中间水平展开        1        **/
.dyn_pic1        {
        width:100%;
        height:0;
        position:absolute;
        left:0px;top:50%;
}
.turn_pic1        {
        animation:turn_pic_1 4s 1 linear forwards;
}

@keyframes turn_pic_1 {
        from {
                width:100%;height:0px;
                left:0px;top:50%;opacity:0.6;
        }
        to        {
                width:100%;height:100%;
                left:0px;top:0px;opacity:1;
        }
}
/**        中心展开        2        **/
.dyn_pic2        {
        width:0;
        height:0;
        position:absolute;
        left:50%;top:50%;
}
.turn_pic2        {
        animation:turn_pic_2 4s 1 linear forwards;
}

@keyframes turn_pic_2 {
        from {
                height:0px;width:0px;top:50%;left:50%;opacity:0.6;
        }
        to        {
                height:100%;width:100%;top:0px;left:0px; opacity:1;
        }
}
/**        水平由上向下展开        3        **/
.dyn_pic3        {
        width:100%;
        height:0;
        position:absolute;
        left:0px;top:0px;
}
.turn_pic3        {
        animation:turn_pic_3 4s 1 linear forwards;
}

@keyframes turn_pic_3 {
        from {
                width:100%;height:0px;
                left:0px;top:0px;
                opacity:0.6;
        }
        to        {
                width:100%;height:100%;
                left:0px;top:0px;opacity:1;
        }
}
/**        水平由下向上展开        4        **/
.dyn_pic4        {
        width:100%;
        height:0;
        position:absolute;
        left:0px;bottom:0px;
}
.turn_pic4        {
        animation:turn_pic_4 4s 1 linear forwards;
}

@keyframes turn_pic_4 {
        from {
                width:100%;height:0px;
                opacity:0.6;
        }
        to        {
                width:100%;height:100%;
                opacity:1;
        }
}
/**        垂直从左向右展开        5        **/
.dyn_pic5        {
        width:0;
        height:100%;
        position:absolute;
        left:0px;        top:0px;
}
.turn_pic5        {
        animation:turn_pic_5 4s 1 linear forwards;
}

@keyframes turn_pic_5 {
        from {
                width:0px; height:100%;opacity:0.6;
        }
        to        {
                width:100%;height:100%;opacity:1;
        }
}
/**        垂直从右向左展开        6        **/
.dyn_pic6        {
        width:0;
        height:100%;
        position:absolute;
        right:0px;        top:0px;
}
.turn_pic6        {
        animation:turn_pic_6 4s 1 linear forwards;
}

@keyframes turn_pic_6 {
        from {
                width:0px;height:100%; opacity:0.6;
        }
        to        {
                width:100%;height:100%; opacity:1;
        }
}
/**        从左上角展开        7        **/
.dyn_pic7        {
        width:0;
        height:0;
        position:absolute;
        left:0;top:0;
}
.turn_pic7        {
        animation:turn_pic_7 4s 1 linear forwards;
}

@keyframes turn_pic_7 {
        from {
                height:0px;width:0px;opacity:0.6;
        }
        to        {
                height:100%;width:100%; opacity:1;
        }
}
/**        从右上角展开        8        **/
.dyn_pic8        {
        width:0;
        height:0;
        position:absolute;
        right:0;top:0;
}
.turn_pic8        {
        animation:turn_pic_8 4s 1 linear forwards;
}

@keyframes turn_pic_8 {
        from {
                height:0px;width:0px;opacity:0.6;
        }
        to        {
                height:100%;width:100%; opacity:1;
        }
}
/**        从左下角展开        9        **/
.dyn_pic9        {
        width:0;
        height:0;
        position:absolute;
        left:0;bottom:0;
}
.turn_pic9        {
        animation:turn_pic_9 4s 1 linear forwards;
}

@keyframes turn_pic_9 {
        from {
                height:0px;width:0px;opacity:0.6;
        }
        to        {
                height:100%;width:100%; opacity:1;
        }
}
/**        从右下角展开        10        **/
.dyn_pica        {
        width:0;
        height:0;
        position:absolute;
        right:0;bottom:0;
}
.turn_pica        {
        animation:turn_pic_a 4s 1 linear forwards;
}

@keyframes turn_pic_a {
        from {
                height:0px;width:0px;opacity:0.6;
        }
        to        {
                height:100%;width:100%; opacity:1;
        }
}
/**        中心旋转展开        11        **/
.dyn_picb        {
        width:0;
        height:0;
        position:absolute;
        left:50%;top:50%;
}
.turn_picb        {
        animation:turn_pic_b 4s 1 linear forwards;
}

@keyframes turn_pic_b {
        from {
                height:0px;width:0px;top:50%;left:50%;opacity:0.6;transform:rotate(0deg);
        }
        to        {
                height:100%;width:100%;top:0px;left:0px; opacity:1;transform:rotate(360deg);
        }
}
/**        从左上角旋转展开        12        **/
.dyn_picc        {
        width:0;
        height:0;
        position:absolute;
        left:0;top:0;
}
.turn_picc        {
        animation:turn_pic_c 4s 1 linear forwards;
}

@keyframes turn_pic_c {
        from {
                height:0px;width:0px;opacity:0.6;transform:rotate(0deg);
        }
        to        {
                height:100%;width:100%; opacity:1;transform:rotate(360deg);
        }
}
/**        从右上角旋转展开        13        **/
.dyn_picd        {
        width:0;
        height:0;
        position:absolute;
        right:0;top:0;
}
.turn_picd        {
        animation:turn_pic_d 4s 1 linear forwards;
}

@keyframes turn_pic_d {
        from {
                height:0px;width:0px;opacity:0.6;transform:rotate(0deg);
        }
        to        {
                height:100%;width:100%; opacity:1;transform:rotate(360deg);
        }
}
/**        从左下角旋转展开        14        **/
.dyn_pice        {
        width:0;
        height:0;
        position:absolute;
        left:0;bottom:0;
}
.turn_pice        {
        animation:turn_pic_e 4s 1 linear forwards;
}

@keyframes turn_pic_e {
        from {
                height:0px;width:0px;opacity:0.6;transform:rotate(0deg);
        }
        to        {
                height:100%;width:100%; opacity:1;transform:rotate(360deg);
        }
}
/**        从右下角旋转展开        15        **/
.dyn_picf        {
        width:0;
        height:0;
        position:absolute;
        right:0;bottom:0;
}
.turn_picf        {
        animation:turn_pic_f 4s 1 linear forwards;
}

@keyframes turn_pic_f {
        from {
                height:0px;width:0px;opacity:0.6;transform:rotate(0deg);
        }
        to        {
                height:100%;width:100%; opacity:1;transform:rotate(360deg);
        }
}

</style>


<script type="text/javascript" >

!window.addClass && document.write('<script type="text/javascript" src="http://pan.yinhuabbs.cn/view.php/0cb9974bfa000b7ba6d8cc45d6a9d754.txt" charset="utf-8"> <\/script>');

!window.dynPicInit && document.write('<script type="text/javascript" src="http://pan.yinhuabbs.cn/view.php/e3b0d6aebe469649a7a72532adfb63d1.txt" charset="utf-8"><\/script>');





</script>



<div id="图片框" style="width:812px; height:500px;
        position:relative;
        background: skyblue;
        border:thick ridge brown;
        overflow:hidden;"></div>


<script type="text/javascript">
        var        picArr = [
"https://z3.ax1x.com/2021/08/17/f4XT0O.png",
"https://z3.ax1x.com/2021/08/17/f4X5X6.png",
"https://z3.ax1x.com/2021/08/17/f4XbAe.png",
"https://z3.ax1x.com/2021/08/17/f4XonK.png",
"https://z3.ax1x.com/2021/08/17/f4jiNQ.png",
"https://z3.ax1x.com/2021/08/17/f4j9HS.png",
"https://z3.ax1x.com/2021/08/17/f4jE3n.png",
"https://z3.ax1x.com/2021/08/17/f4jFhj.png",
"https://z3.ax1x.com/2021/08/17/f4juHU.png",
"https://z3.ax1x.com/2021/08/17/f4jMEF.png",
"https://z3.ax1x.com/2021/08/17/f4jnBT.png",
];
        var opts = {
                picFrameID:'图片框',
                picturesData:picArr,
                ccccchgType:7
        };
       
        dynPicInit(opts);
</script>







<AUDIO src="http://music.163.com/song/media/outer/url?id=5273246.mp3" loop="loop"autoplay="autoplay" type="audio/mp3/mpeg;"></AUDIO>




</DIV>

195400 发表于 2021-8-17 18:51

http://www.yinhuabbs.cn/data/attachment/forum/201804/25/163743hjehxwy3feyxfuuq.gif

195400 发表于 2021-8-17 18:53

有音乐声吗？最末一句
<AUDIO src="http://music.163.com/song/media/outer/url?id=5273246.mp3" loop="loop"autoplay="autoplay" type="audio/mp3/mpeg;"></AUDIO>
似应为<audio src="http://music.163.com/song/media/outer/url?id=5273246.mp3" loop="loop"autoplay="autoplay" type="audio/mp3"></audio>
大小写倒无所谓，类型要写出就要正确。

红枫 发表于 2021-8-17 20:08

195400 发表于 2021-8-17 18:53
有音乐声吗？

有配音，是该诗的配乐朗诵。

刚发现手机的QQ浏览器和小米浏览器都不作声，而手机百度浏贤器声乐正常。

红枫 发表于 2021-8-17 20:19

195400 发表于 2021-8-17 18:53
有音乐声吗？最末一句

似应为

是忘了去掉Mpeg样式。明天去改写，再有得把换页速度慢下来，现在速度是4000，改到16000正好（试过了）。html文件得重新上传。JS文件也得改为TXT文件上传。

195400 发表于 2021-8-17 20:32

红枫 发表于 2021-8-17 20:19
是忘了去掉Mpeg样式。明天去改写，再有得把换页速度慢下来，现在速度是4000，改到16000正好（试过了）。h ...

直接把代码贴在论坛里不好吗，没必要去转一道。

195400 发表于 2021-8-17 20:42

红枫 发表于 2021-8-17 20:08
有配音，是该诗的配乐朗诵。

刚发现手机的QQ浏览器和小米浏览器都不作声，而手机百度浏贤器声乐正常。 ...

IE 和 Edge 会响， Google和firefox都不响。手机上safari'不响。

不是代码的毛病， 有的浏览器关闭了自动播放。

红枫 发表于 2021-8-17 21:22

195400 发表于 2021-8-17 20:42
IE 和 Edge 会响， Google和firefox都不响。手机上safari'不响。

不是代码的毛病， 有的浏览器关闭了 ...
怪事，还不曾改，手机QQ浏览器和小米手机浏览器又正常有音频了。

195400 发表于 2021-8-17 21:45

红枫 发表于 2021-8-17 21:22
怪事，还不曾改，手机QQ浏览器和小米手机浏览器又正常有音频了。

估计是国产浏览器都没禁止自动播放

红枫 发表于 2021-8-17 22:41

195400 发表于 2021-8-17 21:45
估计是国产浏览器都没禁止自动播放

我知道了，是手机的浏览器在非WIFI状态下默认关闭了自动播放（省流量设置）。
页: [1] 2
查看完整版本: 《琵琶行》----音画朗诵