醉美水芙蓉 发表于 2022-5-29 17:18

【童心飞扬】听闻远方有你童声版

本帖最后由 小九 于 2022-5-29 20:26 编辑 <br /><br /><style type="text/css">
        .itemm {z-index: 1;width: 1000px;
height: 600px;position: relative;
box-shadow:0px 0px 0px 2px #CCCCCC, 0px 0px 10px 20px #800000;MARGIN-LEFT:20px;margin-top:30px; background-size:100% 100%;
ox-sizing: border-box;
overflow:hidden;border-radius:0%;
transform-origin: center;}


.cb-slideshow:after {
position:absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 89
}
.cb-slideshow:after {
content: ''
}
ul {
width: 1000px;
height: 600px;
text-align: center;
}

.cb-slideshow li:nth-child(1) span {
background-image: url(#)
}

.cb-slideshow li:nth-child(2) span {
background-image: url(#)
}

.cb-slideshow li:nth-child(3) span {
background-image: url(#)
}

.cb-slideshow li:nth-child(4) span {
background-image: url(#)
}

.cb-slideshow li:nth-child(5) span {
background-image: url(#)
}

.cb-slideshow li:nth-child(6) span {
background-image: url(#)
}

.cb-slideshow li:nth-child(7) span {
background-image: url(#)
}

.cb-slideshow li:nth-child(8) span {
background-image: url(#)
}

.cb-slideshow li:nth-child(9) span {
background-image: url(#)
}

.cb-slideshow li:nth-child(10) span {
background-image: url(#)
}



.cb-slideshow li span {
width: 1000px;
height: 600px;
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
z-index: 100;
-webkit-backface-visibility: hidden;

animation: imageAnimation 20s linear infinite 0s
}

.cb-slideshow li:nth-child(2) span {

animation-delay: 2s
}

.cb-slideshow li:nth-child(3) span {

animation-delay: 4s
}

.cb-slideshow li:nth-child(4) span {

animation-delay: 6s;
}

.cb-slideshow li:nth-child(5) span {

animation-delay: 8s;
}

.cb-slideshow li:nth-child(6) span {

animation-delay: 10s
}

.cb-slideshow li:nth-child(7) span {

animation-delay: 12s;
}
.cb-slideshow li:nth-child(8) span {

animation-delay: 14s;
}
.cb-slideshow li:nth-child(9) span {

animation-delay: 16s;
}
.cb-slideshow li:nth-child(10) span {

animation-delay: 18s;
}
.bfq {position:absolute ;top:350px;LEFT: 20px;z-index: 67;}
@-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-transform:scale(0);
-webkit-animation-timing-function: ease-out
}
4% {
opacity: 1;
-webkit-transform: scale(0);-webkit-mask-image: radial-gradient(black 1% ,transparent 1%);clip-path: polygon(50% 20%, 50% 50%, 20% 50%, 50% 50%, 50% 80%, 50% 50%, 80% 50%, 50% 50%);

}

20% {
opacity: 1;clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
-webkit-transform: scale(1) ;
}
32% {
opacity: 1;clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
-webkit-transform:translate(0%,0%)scale(1)
}
35% {
opacity: 1;clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
-webkit-transform:translate(0%,0%)scale(1);
}
37% {
opacity: 1;clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
-webkit-transform:translate(0%,0%)scale(1);
}
46% {
opacity: 0;-webkit-mask-image: radial-gradient(black 100% ,transparent 100%);clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
-webkit-transform:translate(0%,0%)scale(1.2);

100% {
opacity: 0;
-webkit-transform:translate(0%,0%) scale(1.2);
}}

</style>

<div class="itemm">
<video autoplay="autoplay" height="600" loop="loop" muted="true" src="http://chuangshicdn.data.mvbox.cn/music/yc/21/10/21/21102122261135836978.mp4" style="max-width: 100%; height: auto;filter:contrast(120%);opacity:1.0;transform: scale(1, 1.13)" width="1000">&nbsp;</video>

<ul class="cb-slideshow" id="after">
        <li><span><img alt="" src="http://pan.yinhuabbs.cn/view.php/fdc07c12a2e1e06632207cf2eb69884f.jpg" style="width: 100%; height: 100%;" /></span></li>
        <li><span><img alt="" src="http://pan.yinhuabbs.cn/view.php/2dff5470323a88b3aa8a60898347b4fa.jpg" style="width: 1000px; height: 100%;" /></span></li>
        <li><span><img alt="" src=" http://pan.yinhuabbs.cn/view.php/f27cafab796c5979a8e52e8f4ad5282d.jpg" style="width: 1000px; height: 600px;" /></span></li>
        <li><span><img alt="" src=" http://pan.yinhuabbs.cn/view.php/612f4cd407e009fab17a583a07386aac.jpg" style="width: 1000px; height: 600px;" /></span></li>
        <li><span><img alt="" src="http://pan.yinhuabbs.cn/view.php/b6b13d770420d0e3b462207ce4120a6e.jpg" style="width: 1000px; height: 600px;" /></span></li>
        <li><span><img alt="" src=" http://pan.yinhuabbs.cn/view.php/a3538b71fd1a239cea62583a7859440f.jpg" style="width: 1000px; height: 600px;" /></span></li>
        <li><span><img alt="" src="http://pan.yinhuabbs.cn/view.php/8d653660a0fed65d4a6416248f66cd63.jpg" style="width: 1000px; height: 600px;" /></span></li>
        <li><span><img alt="" src="http://pan.yinhuabbs.cn/view.php/309a97d7a0c45997c4e25b5d4e3d4899.jpg" style="width: 1000px; height: 600px;" /></span></li>
        <li><span><img alt="" src="http://pan.yinhuabbs.cn/view.php/7029e6ff58819e0b2f8771a29afbf7d7.jpg" style="width: 1000px; height: 600px;" /></span></li>
        <li><span><img alt="" src="http://pan.yinhuabbs.cn/view.php/d367fa76a41d33390875976b7d2def99.jpg" style="width: 1000px; height: 600px;" /></span></li>
</ul>
       
<div class="mt10"style="position:absolute;top:380px;left:0px;">
    <div class="img_border"><img src="http://image.hnol.net/c/2022-01/08/11/20220108115931931-5769293.jpg" id="aplay"style="width: 100%; height: 100%;" ></div>
</div>
<div class="items"style="position:absolute;top:360px;left:0px;">
<divid="musickrc" >
<span id="musickrc01" style="color:#ff0000;transform: translate(-20%,0%);"></span><span id="musickrc02"style="color:#000079;transform: translate(20%,0%);"></span>
</div></div>
<span style="color:#fff090;position:absolute;top:180px;left:20px;width:200px;height:42px;z-index: 1600;"><span style="font-family:华文行楷;"><span style="font-size:20px;">点击唱盘暂停/播放</span></span></span>
<audio src="https://www.qqmc.com/up/kwlink.php?id=150602055&.mp3" oncontextmenu="return false;" controls loop autoplay id="audio"></audio>

<img src="http://image.hnol.net/c/2022-01/31/18/202201311848428871-5769293.png" id="playpause" style="position:absolute;top:0px;left:20px;width:200px;height:212px;z-index: 1500;"/></div>

<div style="height: 100px;">&nbsp;</div>
<script type="text/javascript">
var aud = document.getElementById("audio");
var img = document.getElementById("playpause");
img.onclick = function() {
        if (aud.paused) {
                aud.play();
        } else {
                aud.pause();
        }
}
aud.addEventListener("play", function (e) {
        img.src="http://image.hnol.net/c/2022-01/31/18/20220131184733961-5769293.gif";
}, false);
aud.addEventListener("pause", function (e) {
        img.src="http://image.hnol.net/c/2022-01/31/18/202201311848428871-5769293.png";
}, false);
</script>


<style type="text/css">
*{margin:0px;border:0;}select{font-size:100%;}.fr{float:right;}.lr{float:left;}.mt10{max-width:640px;min-width:320px;margin:0px auto;text-align:center;}
.img_border{display:inline-block;width:140px;height:140px;margin:0px ;position: absolute;top:0px; left:750px;z-index: 1500;transform: scale(1.2, .5)}
.img_border #aplay{border:6px solid #cccccc;border-radius:50%; z-index: 1500;}
.z360z{-webkit-animation:rotating 10s linear infinite;animation:rotating 10s linear infinite}@-webkit-keyframes rotating{from{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotating{from{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
#musickrc{width:960px;line-height:60px;margin:70px auto;padding:0px;;position: absolute;left:0px;z-index: 1550;}
#musickrc span {display:block;text-align:center;font-size: 40px; font-family:汉标精工粗犷体;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);}

<style type="text/css">.items{z-index: z-index: 1540;;animation: slider 16s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>
<script type="text/javascript">var songkrc = " 刘艺雯 - 听闻远方有你\r\n作词：刘钧\r\n作曲：刘钧\r\n编曲：刘钧\r\nOP：昌禾文化\r\n演唱：刘艺雯\r\n LRC编辑：醉美水芙蓉\r\n 听闻远方有你\r\n动身跋涉千里\r\n追逐沿途的风景\r\n还带着你的呼吸\r\n真的难以忘记\r\n 关于你的消息\r\n陪你走过南北东西\r\n相随永无别离\r\n可不可以爱你\r\n我从来不曾歇息\r\n像风走了万里\r\n不问归期\r\n我吹过你吹过的风\r\n这算不算相拥\r\n我走过你走过的路\r\n这算不算相逢\r\n我还是那么喜欢你\r\n想与你到白头\r\n我还是一样喜欢你\r\n只为你的温柔\r\n听闻远方有你\r\n 动身跋涉千里\r\n追逐沿途的风景\r\n还带着你的呼吸\r\n真的难以忘记\r\n关于你的消息\r\n陪你走过南北东西\r\n相随永无别离\r\n可不可以爱你\r\n我从来不曾歇息\r\n像风走了万里不问归期\r\n我吹过你吹过的风\r\n这算不算相拥\r\n我走过你走过的路\r\n这算不算相逢\r\n我还是那么喜欢你\r\n 想与你到白头\r\n我还是一样喜欢你\r\n只为你的温柔\r\n我吹过你吹过的风\r\n这算不算相拥\r\n我走过你走过的路\r\n这算不算相逢\r\n我还是那么喜欢你\r\n想与你到白头\r\n我还是一样喜欢你\r\n只为你的温柔\r\n谢谢欣赏！\r\n";function parseLyric(text) { var lines = text.split('\r\n'),pattern = /\[\d{2}:\d{2}.\d{2}\]/g,result = []; while (!pattern.test(lines)) {lines = lines.slice(1); }; lines.length === 0 && lines.pop(); lines.forEach(function(v,i,a) { var time = v.match(pattern), value = v.replace(pattern,''); time.forEach(function(v1,i1,a1){ var t = v1.slice(1, -1).split(':'); result.push(,10) * 60 + parseFloat(t), value]); }); }); result.sort(function(a, b){ return a - b;}); return result;}</script>
<script type="text/javascript">
var my_audio =document.getElementById("audio");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function(){document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("musickrc01").innerHTML = lyric; if(i+1==lyric.length){ document.getElementById("musickrc01").innerHTML = ""; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};}; my_audio.play();</script>




来看你 发表于 2022-5-29 17:22

沙发啦啦啦

来看你 发表于 2022-5-29 17:23

美女 ，好看的帖

醉美水芙蓉 发表于 2022-5-29 17:28

来看你 发表于 2022-5-29 17:23
美女 ，好看的帖

谢谢来看你加分支持！

红芍药 发表于 2022-5-29 17:31

好听好听。

醉美水芙蓉 发表于 2022-5-29 17:32

红芍药 发表于 2022-5-29 17:31
好听好听。

谢谢美女支持！

顾-念 发表于 2022-5-29 18:42

这图是听闻远方有美女，好听

小九 发表于 2022-5-29 19:08

声音很好听

小九 发表于 2022-5-29 19:09

是自己翻唱的吗？

醉美水芙蓉 发表于 2022-5-29 19:19

小九 发表于 2022-5-29 19:09
是自己翻唱的吗？

一定要自己翻唱的吗？我不懂？

小九 发表于 2022-5-29 19:23

醉美水芙蓉 发表于 2022-5-29 19:19
一定要自己翻唱的吗？我不懂？

翻唱，一定是原创，也就是自己唱的哈

小九 发表于 2022-5-29 19:26

没关系哈，慢慢玩，先看看活动内容，慢慢就好了哈。

醉美水芙蓉 发表于 2022-5-29 19:29

小九 发表于 2022-5-29 19:26
没关系哈，慢慢玩，先看看活动内容，慢慢就好了哈。

喔，没有看明白！

小九 发表于 2022-5-29 19:31

醉美水芙蓉 发表于 2022-5-29 19:29
喔，没有看明白！

帖子不分题材，也不限制数字，但需要原创， 比如： 音画也可以的， 自己翻唱的， 写字，写诗的等等

小九 发表于 2022-5-29 20:14

醉美水芙蓉 发表于 2022-5-29 19:29
喔，没有看明白！

我明白了，你这个帖子是自己制作的原创音画贴子吧，如果这样，是符合活动主题的

红影 发表于 2022-5-29 20:41

很喜欢的歌儿，漂亮的制作{:4_187:}

醉美水芙蓉 发表于 2022-5-29 20:43

小九 发表于 2022-5-29 20:14
我明白了，你这个帖子是自己制作的原创音画贴子吧，如果这样，是符合活动主题的

谢谢小九美女支持！

醉美水芙蓉 发表于 2022-5-29 20:44

红影 发表于 2022-5-29 20:41
很喜欢的歌儿，漂亮的制作

谢谢红影美女支持！

冬天的雨 发表于 2022-5-29 21:43

这个代码有错误。页面上面出来一大片。。。。。

冬天的雨 发表于 2022-5-29 21:47


页: [1] 2
查看完整版本: 【童心飞扬】听闻远方有你童声版