195400 发表于 2021-8-13 12:07

涛声依旧 --- 试验歌曲手动控制播放

<style type="text/css">
#lyricShow{
        width:45%;height:500px;position:absolute;right:100px; top:-500px;
        font-size: 30pt;/*文字字号 */
    color: #f00;/*文字颜色 */
        animation: animTrans 15s linear infinite; /*linear匀速变换 infinite无限次循环*/
}
@keyframes animTrans {
        0%         {transform: scale(0.8) translate(-100px, -100px);}
        10% {transform: scale(1.0) translate(-50px, -50px);}
        20% {transform: scale(1.3) translate(0px, 0px);}**/
        60% {transform: scale(1.0) translate(-150px, -150px);}
        80% {transform: scale(0.8) translate(-200px, -200px);}
        100% {transform: scale(0.5) translate(-300px, -300px);font-style: oblique;}**/
}
#outblk        {
        width: 960px;
        height: 650px;
        margin-top:20px;
        margin-left:10px;
        box-shadow: 0px 0px 0px 2px #1B5276, 0px 0px 10px 10px #4A9FD7;
        overflow: hidden;
        border-radius:4%;
        text-align: center;
        background-image:url(http://uploads.xuexila.com/allimg/1704/761-1F424162148.jpg);
        background-size:100% 100%;
        position: relative;
        animation: animPic 30s linear infinite;
}
@keyframes animPic {
        0%         {transform:skew(2deg);background-image:url(http://uploads.xuexila.com/allimg/1704/761-1F424162148.jpg);}
        5%        {transform:skew(-2deg);}       
        10%        {transform:skew(2deg);}       
        15%        {transform:skew(-2deg);}       
        20%        {transform:skew(2deg);}       
        23%        {transform:skew(-2deg);background-image:url(http://uploads.xuexila.com/allimg/1704/761-1F424162148.jpg);}
        25% {transform:skew(2deg);background-image:url(http://www.52foto.com/upload/xiehui89/曹瑞修/2012-11-30/20121130214024717_67657_W.jpg);}
        30%        {transform:skew(-2deg);}       
        35%        {transform:skew(2deg);}       
        40%        {transform:skew(-2deg);}       
        45%        {transform:skew(2deg);}       
        48% {transform:skew(-2deg);background-image:url(http://www.52foto.com/upload/xiehui89/曹瑞修/2012-11-30/20121130214024717_67657_W.jpg);}
        50% {transform:skew(2deg);background-image:url(http://www.52foto.com/upload/xiehui89/曹瑞修/2012-11-30/20121130214306744_45433_W.jpg);}
        55%        {transform:skew(-2deg);}       
        60%        {transform:skew(2deg);}       
        65%        {transform:skew(-2deg);}       
        70%        {transform:skew(2deg);}       
        73% {transform:skew(-2deg);background-image:url(http://www.52foto.com/upload/xiehui89/曹瑞修/2012-11-30/20121130214306744_45433_W.jpg);}
        75% {transform:skew(2deg);background-image:url(http://www.kekedj.com/uploadfiles/2019-09/20190904233741989.jpg);}
        80%        {transform:skew(-2deg);}       
        85%        {transform:skew(2deg);}       
        90%        {transform:skew(-2deg);}       
        95%        {transform:skew(2deg);}       
        98% {transform:skew(-2deg);background-image:url(http://www.kekedj.com/uploadfiles/2019-09/20190904233741989.jpg);}
}

</style>
<div id="outblk">

<div id="lyricShow" style="width:36%;height:500px;position:absolute;right:150px; top:350px;">
<img src="http://bpic.588ku.com/element_pic/17/09/12/086fa9e4799099a98eb54aab236be2b9.jpg" id="playbutton" style="width:36px; height:36px; overflow:hidden; border-radius:50%;"></div>
</div>
<script type="text/javascript" >
!window.procLRC && document.write('<script type="text/javascript" src="http://cesholl.cn3v.net/scripts/processLRC.min.js" charset="utf-8"><\/script>');
</script>

<textarea id="lrc_content" style="visibility:hidden;">
作词 : 陈小奇
作曲 : 陈小奇
LRC : 网易云音乐
带走 一盏渔火
让它温暖我的双眼
留下 一段真情
让它停泊在枫桥边
无助的我
已经疏远了那份情感
许多年以后却发觉
又回到你面前
留连的钟声
还在敲打我的无眠
尘封的日子
始终不会是一片云烟
久违的你
一定保存着那张笑脸
许多年以后能不能
接受彼此的改变
月落乌啼
总是千年的风霜
涛声依旧
不见当初的夜晚
今天的你我
怎样重复昨天的故事
这一张 旧船票
能否登上你的客船
留连的钟声
还在敲打我的无眠
尘封的日子
始终不会是一片云烟
久违的你
一定保存着那张笑脸
许多年以后能不能
接受彼此的改变
月落乌啼
总是千年的风霜
涛声依旧
不见当初的夜晚
今天的你我
怎样重复昨天的故事
这一张 旧船票
能否登上你的客船
月落乌啼
总是千年的风霜
涛声依旧
不见当初的夜晚
今天的你我
怎样重复昨天的故事
这一张 旧船票
能否登上你的客船
能否登上你的客船

</textarea>
<script type="text/javascript">
var opts = {
        //        下面3个参数是必须的！
        lrcTxtID:'lrc_content',
        lrcShowID:"lyricShow",
        audioURL:"http://music.163.com/song/media/outer/url?id=5280145.mp3",
        //audioURL:"https://webfs.yun.kugou.com/202105161713/90a115ead7aa2c9fdb7ea5bca91f5951/KGTX/CLTX001/f91f34ab3c9302e2eb7b5159eb8227f5.mp3",
        //        可选的参数
        gczh:'24px',
        gczt:'楷体,楷体_GB2312',
        gcct:true,
        dqfs:'center',
        gcys1:'#00887F',
        gcys:'red',
        //-------------------------------------------------------
        showMode:0,
        gchs:2
};

setTimeout(function(){
                procLRC(opts);
        }, 1000);
</script>

雄鹰翱翔 发表于 2021-8-13 15:37

欣赏您的精美佳作，赞一个！

195400 发表于 2021-8-13 15:50

雄鹰翱翔 发表于 2021-8-13 15:37
欣赏您的精美佳作，赞一个！

http://www.yinhuabbs.cn/data/attachment/forum/201912/20/123001hstspbnsskb1sb2s.gif

红枫 发表于 2021-8-13 20:09

其实，去掉这个播放按钮图标也行，只要在图中随意点一下就播放了！

寒冬残荷 发表于 2021-8-13 21:27

大赞！{:1_293:}谢谢分享！

195400 发表于 2021-8-13 21:29

红枫 发表于 2021-8-13 20:09
其实，去掉这个播放按钮图标也行，只要在图中随意点一下就播放了！

嗯, 只是为了有个明显的提示,否则就要另加说明了.

195400 发表于 2021-8-13 21:30

寒冬残荷 发表于 2021-8-13 21:27
大赞！谢谢分享！

http://www.yinhuabbs.cn/data/attachment/forum/201912/20/123059ffon6y9p6tnedvne.gif

寒冬残荷 发表于 2021-8-13 21:41

红枫 发表于 2021-8-13 20:09
其实，去掉这个播放按钮图标也行，只要在图中随意点一下就播放了！

我试了，没有这个按钮不行呀。

寒冬残荷 发表于 2021-8-13 21:52

红枫 发表于 2021-8-13 20:09
其实，去掉这个播放按钮图标也行，只要在图中随意点一下就播放了！

只是不一定要点击按钮，在图中随意点就可以。但我在代码中找不到有关 id="playbutton"的代码。

寒冬残荷 发表于 2021-8-13 22:00

195400 发表于 2021-8-13 21:30


老师，这句<img src="http://bpic.588ku.com/element_pic/17/09/12/086fa9e4799099a98eb54aab236be2b9.jpg" id="playbutton" style="width:36px; height:36px; overflow:hidden; border-radius:50%;">中的id="playbutton"在哪里设置了？我找不到。
页: [1] 2 3 4
查看完整版本: 涛声依旧 --- 试验歌曲手动控制播放