请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
[i=s] 本帖最后由 小九 于 2022-5-29 20:26 编辑 [/i]<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"> </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;">
<div id="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;"> </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 -1px 0);}
<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 = " [00:00.31]刘艺雯 - 听闻远方有你\r\n[00:01.98]作词：刘钧\r\n[00:03.04]作曲：刘钧\r\n[00:06.18]编曲：刘钧\r\n[00:09.18]OP：昌禾文化\r\n[00:12.58]演唱：刘艺雯\r\n [00:15.39]LRC编辑：醉美水芙蓉\r\n [00:17.67]听闻远方有你\r\n[00:21.55]动身跋涉千里\r\n[00:25.49]追逐沿途的风景\r\n[00:29.13]还带着你的呼吸\r\n[00:33.30]真的难以忘记\r\n [00:37.17]关于你的消息\r\n[00:41.11]陪你走过南北东西\r\n[00:44.83]相随永无别离\r\n[00:49.00]可不可以爱你\r\n[00:52.71]我从来不曾歇息\r\n[00:56.65]像风走了万里\r\n[00:59.60]不问归期\r\n[01:04.37]我吹过你吹过的风\r\n[01:08.17]这算不算相拥\r\n[01:12.18]我走过你走过的路\r\n[01:15.97]这算不算相逢\r\n[01:19.91]我还是那么喜欢你\r\n[01:23.85]想与你到白头\r\n[01:27.72]我还是一样喜欢你\r\n[01:31.66]只为你的温柔\r\n[02:07.40]听闻远方有你\r\n [02:11.20]动身跋涉千里\r\n[02:14.99]追逐沿途的风景\r\n[02:18.70]还带着你的呼吸\r\n[02:22.88]真的难以忘记\r\n[02:26.82]关于你的消息\r\n[02:30.77]陪你走过南北东西\r\n[02:34.33]相随永无别离\r\n[02:38.50]可不可以爱你\r\n[02:42.37]我从来不曾歇息\r\n[02:46.16]像风走了万里不问归期\r\n[02:53.83]我吹过你吹过的风\r\n[02:57.77]这算不算相拥\r\n[03:01.71]我走过你走过的路\r\n[03:05.57]这算不算相逢\r\n[03:09.44]我还是那么喜欢你\r\n [03:13.38]想与你到白头\r\n[03:17.40]我还是一样喜欢你\r\n[03:21.27]只为你的温柔\r\n[03:25.30]我吹过你吹过的风\r\n[03:29.01]这算不算相拥\r\n[03:32.96]我走过你走过的路\r\n[03:36.90]这算不算相逢\r\n[03:40.76]我还是那么喜欢你\r\n[03:44.70]想与你到白头\r\n[03:48.49]我还是一样喜欢你\r\n[03:52.52]只为你的温柔\r\n[03:52.52]谢谢欣赏！\r\n";function parseLyric(text) { var lines = text.split('\r\n'),pattern = /\[\d{2}:\d{2}.\d{2}\]/g,result = []; while (!pattern.test(lines[0])) {lines = lines.slice(1); }; lines[lines.length - 1].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([parseInt(t[0],10) * 60 + parseFloat(t[1]), value]); }); }); result.sort(function(a, b){ return a[0] - b[0];}); 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[i][0]){ document.getElementById("musickrc01").innerHTML = lyric[i][1]; if(i+1==lyric.length){ document.getElementById("musickrc01").innerHTML = ""; }else{ document.getElementById("musickrc02").innerHTML = lyric[i + 1][1];};};};}; my_audio.play();</script>
|
发表于 2022-5-29 17:18
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2022-5-29 17:22
楼主
发表于 2022-5-29 19:08
发表于 2022-5-29 21:43