有一种幸福叫曾经拥有
本帖最后由 亚伦影音工作室 于 2024-1-17 15:27 编辑 <br /><br /><style type="text/css">.papa{margin: 150px -300px ; width: 1164px; height: 640px;background:#000000 ;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}#photos img{float:right;width:1164px;height:640px;position:relative;z-index: 2;mix-blend-mode: overlay;}
#photos {position: absolute;width: calc(1164px * 10);animation: animate 80s ease-out infinite alternate;}
@keyframes animate {0%{right:-10476px;}100% {right:0px; }}
#mplayer {z-index: 80;
position: absolute;
top:94%; left:50%;
bottom: 20px;
width: 30px;
height: 30px;background:#333333;
border: 0px solid #000000;
border-radius: 10%;
opacity: 1;
transition: .7s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: #ffffff;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 12px;
border-width: 6px 12px;
border-color: transparent transparent transparent #ffffff;
opacity: var(--disp1);
}
#mplayer::after {
width: 2px;
height: 14px;
border-width: 0 4px 0 4px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#musickrc{width:90%;line-height:30px;position: absolute;position: absolute;left:5%;top:62%;z-index: 11;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);-webkit-transform:translate(0%,0%)perspective(100px)scale(1) rotate(8deg);}
#musickrc span {display:block;text-align:center; }
.photo {width: 1164px; height: 640px;
position: absolute;
top:0%; left:0%;
opacity: 0;z-index: 1;
animation: round 60s linear infinite;}
@keyframes round{
0% {
opacity: 0;
-webkit-transform:translate(0%,0%)scale(1)
}
5% {
opacity: 1;
-webkit-transform:translate(0%,0%)scale(1)
}
8% {
opacity: 1;
-webkit-transform:translate(0%,0%)scale(1)
}
12% {-webkit-transform:translate(0%,0%)scale(1);
opacity: 0;
}}
.photo:nth-child(1) {animation-delay: 56s;background: url('https://img-qn.51miz.com/preview/element/00/01/33/20/P-1332073-5C9607BD.png')no-repeat center/cover}
.photo:nth-child(2) {animation-delay: 52s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ff17fabf0b4b48ae3a8e76448904914f.jpg)no-repeat center/cover}
.photo:nth-child(3) {animation-delay: 48s;background: url(https://img-qn.51miz.com/preview/element/00/01/32/90/P-1329000-B9E8FD7D.png)no-repeat center/cover}
.photo:nth-child(4) {animation-delay: 44s;background: url(https://img-qn.51miz.com/preview/element/00/01/32/90/P-1329015-66BF428A.png)no-repeat center/cover}
.photo:nth-child(5) {animation-delay: 40s;background: url(https://img-qn.51miz.com/preview/element/00/01/33/20/P-1332073-5C9607BD.png)no-repeat center/cover}
.photo:nth-child(6) {animation-delay: 36s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/78/P-1317845-23054D9C.png)no-repeat center/cover}
.photo:nth-child(7) {animation-delay: 32s;background: url(https://img-qn.51miz.com/preview/element/00/01/32/90/P-1329020-7388AB62.png)no-repeat center/cover}
.photo:nth-child(8) {animation-delay: 28s;background: url(https://img-qn.51miz.com/preview/element/00/01/32/90/P-1329030-B961A9FF.png)no-repeat center/cover}
.photo:nth-child(9) {animation-delay: 24s;background: url(https://img-qn.51miz.com/preview/element/00/01/32/90/P-1329026-4EAB4D61.png)no-repeat center/cover}
.photo:nth-child(10){animation-delay: 20s;background: url(https://img-qn.51miz.com/preview/element/00/01/32/90/P-1329014-22F9A74F.png)no-repeat center/cover}
.photo:nth-child(11){animation-delay: 16s;background: url(https://img-qn.51miz.com/preview/element/00/01/32/90/P-1329002-E841EA87.png)no-repeat center/cover}
.photo:nth-child(12){animation-delay: 12s;background: url(https://img-qn.51miz.com/preview/photo/00/01/56/52/new-P-1565288-5E742AB8O.jpg)no-repeat center/cover}
.photo:nth-child(13){animation-delay: 8s;background: url(https://img-qn.51miz.com/preview/photo/00/01/54/88/new-P-1548843-BBB567D3O.jpg)no-repeat center/cover}
.photo:nth-child(14) {animation-delay: 4s;background: url('https://img-qn.51miz.com/preview/element/00/01/32/89/P-1328990-D0D502B9.png')no-repeat center/cover}
.photo:nth-child(15) {animation-delay: 0s;background: url('https://img-qn.51miz.com/preview/element/00/01/33/21/P-1332105-54D5398C.png')no-repeat center/cover}
.stop .photo:nth-child(1),
.stop .photo:nth-child(2),
.stop .photo:nth-child(3),
.stop .photo:nth-child(4),
.stop .photo:nth-child(5),
.stop .photo:nth-child(6),
.stop .photo:nth-child(7),
.stop .photo:nth-child(8),
.stop .photo:nth-child(9),
.stop .photo:nth-child(10),
.stop .photo:nth-child(11),
.stop .photo:nth-child(12),
.stop .photo:nth-child(13),
.stop .photo:nth-child(14),
.stop .photo:nth-child(15){animation-play-state: paused;}
</style>
<div class="papa" title="亚伦影音">
<div id="photos" title="亚伦影音">
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/aef9fe478672bf6154e573547953fd30.jpg" style="transform: rotateY(0deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/aef9fe478672bf6154e573547953fd30.jpg" style="transform: rotateY(180deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/aef9fe478672bf6154e573547953fd30.jpg" style="transform: rotateY(0deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/aef9fe478672bf6154e573547953fd30.jpg" style="transform: rotateY(180deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/aef9fe478672bf6154e573547953fd30.jpg" style="transform: rotateY(0deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/aef9fe478672bf6154e573547953fd30.jpg" style="transform: rotateY(180deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/aef9fe478672bf6154e573547953fd30.jpg" style="transform: rotateY(0deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/aef9fe478672bf6154e573547953fd30.jpg" style="transform: rotateY(180deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/aef9fe478672bf6154e573547953fd30.jpg" style="transform: rotateY(0deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/aef9fe478672bf6154e573547953fd30.jpg" style="transform: rotateY(180deg);" />
</div>
<div id="testImg" >
<pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p>
</div>
<div id="mplayer" title="暂停/播放"> </div>
<div id="musickrc">
<p id="musickrc01" style="color:#880000; text-align:center;font-weight: ;font-family:华文隶书;font-size: 45px;"> </p>
<p id="musickrc02" style="color:#000080;text-align:center;font-weight: ;font-family:华文隶书;font-size: 0px;"> </p>
</div>
<audio autoplay="" id="aud" loop="" src="https://www.qqmc.com/up/kwlink.php?id=330594240"> </audio>
</div>
<script >
var songkrc =`作词：任夏
作曲：曲多美
演唱：L（桃籽）
编曲：Jen 周周
吉他：赵翔
有一种幸福叫曾经拥有
人声编辑：迟色
混音师：何文宇
统筹：富贵
宣发策划：王腾飞/曾海平/畅戈/陈洪婷/杨训欢
制作人：亚伦
监制：熊磊、王腾飞
发行人：韦琪
发行公司：万象星云
有一种回忆
谁也不能说
就像我的真心只对你有过
有一种思念
谁也不能说
就像我的梦里只和你见过
有一种心痛
谁也不能说
就像我的眼泪只为你流过
有一种遗憾
谁也不能说
好可惜我们只能错过
我们爱过就足够
不在乎天长地久
有一种幸福叫曾经拥有
至少牵过你的手
感受过你的温柔
此生我也算别无所求
虽然失去会心痛
我会学着往前走
世上有一种爱叫做放手
也是真的希望你
以后幸福到泪流
至少我会笑着为你回头
再挥挥手
有一种心痛
谁也不能说
就像我的眼泪只为你流过
有一种遗憾
谁也不能说
好可惜我们只能错过
我们爱过就足够
不在乎天长地久
有一种幸福叫曾经拥有
至少牵过你的手
感受过你的温柔
此生我也算别无所求
虽然失去会心痛
我会学着往前走
世上有一种爱叫做放手
也是真的希望你
以后幸福到泪流
至少我会笑着为你回头
再挥挥手
我们爱过就足够
不在乎天长地久
有一种幸福叫曾经拥有
至少牵过你的手
感受过你的温柔
此生我也算别无所求
虽然失去会心痛
我会学着往前走
世上有一种爱叫做放手
也是真的希望你
以后幸福到泪流
至少我会笑着为你回头
再挥挥手
`;
function parseLyric(text) { var lines = text.split(/\r|\n|\r\n/),pattern = /\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,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;}
var my_audio =document.getElementById("aud");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();
/*暂停 播放按钮*/
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*/
photos.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>photos.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>photos.style.animationPlayState = 'paused');
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
</script>
欣赏音画，问候亚伦。 漂亮的背景滚动效果和图片轮播，还能一键全控。欣赏亚伦老师好帖{:4_199:} 欣赏亚伦老师精彩好帖，点赞学习了！{:4_180:} 本帖最后由 亚伦影音工作室 于 2024-4-16 12:07 编辑 <br /><br /><div style="width: 100%;height: 1000px;position: absolute;MARGIN-LEFT:-300px;MARGIN-top:20px;">
<div style="position: relative;width:1240px;height:600px;display: grid;place-items: center;overflow:hidden;margin-top:10px;margin-left: 20px;background:#000000 url(https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/ht/u.gif)no-repeat center/cover;border:#800000 solid 4px"><iframe frameborder="0" marginheight="0" marginwidth="0" name="k" scrolling="no" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/c7119d4ef3dab7da885585b3d41628fd_preview.mp4" style="position:absolute;width:1200px; height:680px;left: -100px;top:-30px;transform:scale(.82);opacity:1;"></iframe>
<div style="position:absolute;width:250px;height:500px;right:-18px;top:50px;overflow-x:hidden; font:normal 1.5em/2em 仿宋;cursor: pointer;">
<p><a href="https://bzgz.club/view.php/963560237daf381e952ad36d2cda662b.mp3" target="k" style="color:#ffffff">1.粒子</a></p>
<p><a href="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/ee8c1d9183ac4b86384a762834130a71_preview.mp4" target="k"style="color:#ffffff">2.粒子</a></p>
<p><a href="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/ccbab42fb6ceb3ea43924b91141bfc70_preview.mp4" target="k"style="color:#ffffff">3.粒子</a></p>
<p><a href="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/dc0c7908d0a39ea1757ef4cfc4b01c98_preview.mp4" target="k"style="color:#ffffff">4.粒子</a></p>
<p><a href="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/168f893186d16bf3404c008ef947b821_preview.mp4" target="k"style="color:#ffffff">5.粒子</a></p>
<p><a href="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/2ada111cdfd5ec1621a8a56de4861b57_preview.mp4" target="k"style="color:#ffffff">6.粒子</a></p>
<p><a href="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/ddd59619b3ada751400731db8cce5368_preview.mp4"target="k"style="color:#ffffff">7.粒子</a></li>
<p><a href="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/272d86772c9916e521c020a9f92b77a8_preview.mp4" target="k"style="color:#ffffff">8.粒子</a></p>
<p><a href="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/59b67e14828e8938c56247ae7dbd6984_preview.mp4" target="k"style="color:#ffffff">9.粒子</a></p>
<p><a href="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/59b67e14828e8938c56247ae7dbd6984_preview.mp4" target="k"style="color:#ffffff">10.粒子</a></p>
<p><a href="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/2dc87ac64db1be4791d8cec551db081b_preview.mp4" target="k"style="color:#ffffff">11.粒子</a></p>
</span>
</div>
</div>
</div>
<div style="width: 100%;height: 980px;"> </div>
<p> </p>
<p> </p>
<p> </p>
<p><span style="color:#f39c12;"><span style="font-family:方正姚体;"><span style="font-size:32px;">首屏音画不断更新中......</span></span></span></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
页:
[1]