花只是开给荒野 TO：亚伦 - 音画作品 - 微风音乐 - Powered by Discuz! Archiver

首页 › 音画作品 › 花只是开给荒野 TO：亚伦

小辣椒 发表于 2024-11-9 21:52

花只是开给荒野 TO：亚伦

<style type="text/css">
#papa { margin: 150px -220px ; width: 1280px; height: 665px; background:#000 url('') no-repeat center/cover; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 10px #880000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;transform:rotateX(0deg) scale(1)}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:4%; left:5%;color:#fff;font: normal 2em楷体; opacity: 1; cursor: pointer; z-index: 10}
#mdiv {top:80%; left:5%;cursor: pointer;width:120px;height: 120px;animation:rot 10s linear infinite;position: absolute;filter:drop-shadow(#000 0px 0 1px);z-index: 40;}
@keyframes rot { to { transform: rotate(2turn);} }
.photo {width: 100%;height: 100%;box-shadow: 0px 0px 0px 1px #000, 0px 0px 0px 4px #fff;position: absolute;z-index: -2;top:0%; left:0%;
opacity: 0;animation: round 48s linear infinite;}
@keyframes round {0% {opacity: 0;transform:translate(0%,0%)scale(1)}
8% {opacity: 1;transform:translate(0%,0%)scale(1)}
15% {opacity: 1;transform:translate(0%,0%)scale(3)}
18% {opacity: 0;transform:translate(0%,0%)rotate(0deg)scale(3)}}
.photo:nth-child(1) {background:#000 url(https://file.uhsea.com/2411/5b01a17fd6c1c6e0322155adf0c89504P4.jpg )no-repeat center/cover;
animation-delay: 42s;}
.photo:nth-child(2) {background:#000 url(https://file.uhsea.com/2411/0d7201b21a75138b32af2c68cc767819GC.jpg)no-repeat center/cover;
animation-delay: 36s;}
.photo:nth-child(3) {background:#000 url(https://file.uhsea.com/2411/7a2d701396b5dc624fab4a8318fc9e46AN.jpg)no-repeat center/cover;
animation-delay: 30s;}
.photo:nth-child(4) {background:#000 url(https://file.uhsea.com/2411/e526ccb92e72fa3a7cbf9f83c495c04cFZ.jpg)no-repeat center/cover;
animation-delay: 24s;}
.photo:nth-child(5) {background:#000 url(https://file.uhsea.com/2411/e0fed572c8362ea2adfe5833a27dd3db1Y.jpg)no-repeat center/cover;
animation-delay: 18s;}
.photo:nth-child(6) { background:#000 url(https://file.uhsea.com/2411/e98020334a507178ba5802b9fb314b1eEI.jpg )no-repeat center/cover;
animation-delay: 12s;}
.photo:nth-child(7) { background:#000 url(https://file.uhsea.com/2411/39f047fa3e33bddb3df03095e34d0ceaT9.jpg)no-repeat center/cover;
animation-delay: 6s;}
.photo:nth-child(8) { background:#000 url(https://file.uhsea.com/2411/5ae87e98a9c59b7e52c56d98f315a18cFA.jpg)no-repeat center/cover;
animation-delay: 0s;}
.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(7),
.stop .photo:nth-child(8) {animation-play-state: paused;}
</style>
<style type="text/css">.set {
position: absolute;z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;}
.set div {
position: absolute;
display: block;
user-select: none;}
.set div img {pointer-events: none;
max-width: 90px;
max-height: 120px;}
.set div:nth-child(1) {
left: 20%;
animation: animate 15s linear infinite;
animation-delay: -7s;}
.set div:nth-child(2) {
left: 50%;
animation: animate 20s linear infinite;
animation-delay: -5s;}
.set div:nth-child(2) {
left: 50%;
animation: animate 20s linear infinite;
animation-delay: -5s;}
.set div:nth-child(3) {
left: 70%;
animation: animate 25s linear infinite;}
.set div:nth-child(4) {
left: 0%;
animation: animate 15s linear infinite;
animation-delay: -5s;}
.set div:nth-child(5) {
left: 85%;
animation: animate 18s linear infinite;
animation-delay: -10s;}
.set div:nth-child(6) {
left: 15%;
animation: animate 12s linear infinite;
animation-delay: -7s;}
.set div:nth-child(7) {
left: 60%;
animation: animate 14s linear infinite;
animation-delay: -7s;}
.stop .set div:nth-child(1),.stop .set div:nth-child(2),.stop .set div:nth-child(3),.stop .set div:nth-child(4),.stop .set div:nth-child(5),.stop .set div:nth-child(6),.stop .set div:nth-child(7){animation-play-state: paused;}
@keyframes animate {
0% {opacity: 0;top: -10%;transform: translateX(20px) rotate(0deg);}
10% {opacity: 1;}
20% { transform: translateX(-20px) rotate(45deg);}
40% {transform: translateX(-20px) rotate(90deg);}
60% {transform: translateX(-20px) rotate(135deg);}
80% {transform: translateX(-20px) rotate(180deg);}
100% {top: 110%;transform: translateX(-20px) rotate(225deg);}}
.set2 { transform: scale(2) rotateY(0deg); filter: blur(4px);}
.set3 { transform: scale(0.8) rotateY(3deg);filter: blur(6px);}
.lrc{z-index: 10;width: 90%;height: 180px;overflow: hidden;filter:drop-shadow(#ccc 1px 0 0)drop-shadow(#ccc 0 1px 0)drop-shadow(#ccc -1px 0 0) drop-shadow(#ccc 0 -1px0);display: block;position: absolute;top:85%; left:5%; margin: 0 auto;}
.lrc #ullrc{width: 100%;padding: 0;list-style: none;transition: 0.3s all ease; margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{height: 70px;line-height: 60px;font-family:华文隶书; font-size: 0px; color: #000078; font-weight: normal; transition: .3s all ease;list-style-type: none; text-align: center;display: block;width: 100%;margin: 0 auto;}
/*动态歌词样式*/.lrc #ullrc li.active{ font-size: 44px;color: #800080;text-align: center;}
#wzsd1 { animation: wzsd 0.56s linear infinite ;}
@keyframes wzsd {
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>
<div id="papa">
<audio autoplay="" id="aud" loop="" src="https://wj.zp68.com/lxx/yunhua/2024/07/07/001.mp3"> </audio>
<span id="fullscreen">全屏观赏</span>
<img id="mdiv"src="https://file.uhsea.com/2411/7039980b8a0743105cc20ecbf470bfec2X.png">
<div id="testImg">
<div class="photo"></div><div class="photo"></div><div class="photo"></div><div class="photo"></div><div class="photo"></div><div class="photo"></div><div class="photo"></div><div class="photo"></div>
<div class="set">
<div><img alt="" src="https://file.uhsea.com/2411/af3c6e3c59c8131337de09f897c66ef16S.png" /></div>
<div><img alt="" src="https://file.uhsea.com/2411/0e2c72ed2c22a357de266f39cf5b68c1VC.png" /></div>
<div><img alt="" src="https://file.uhsea.com/2411/7ca7ef99088886bb2a29be427b94020dIF.png" /></div>
<div><img alt="" src="https://file.uhsea.com/2411/749c03087f2e1e82c6fbb967a5dccaa3J2.png" /></div>
<div><img alt="" src="https://file.uhsea.com/2411/452496e376c99e7cb41ccc0a0f205738NV.png" /></div>
<div><img alt="" src="https://file.uhsea.com/2411/452496e376c99e7cb41ccc0a0f205738NV.png" /></div>
<div><img alt="" src="https://file.uhsea.com/2411/dd7ec7db4a05c6f72258cc03a49416a39R.png " /></div>
</div>
<div class="set set2">
<div><img alt="" src="https://file.uhsea.com/2411/af3c6e3c59c8131337de09f897c66ef16S.png" /></div>
<div><img alt="" src="https://file.uhsea.com/2411/0e2c72ed2c22a357de266f39cf5b68c1VC.png" /></div>
<div><img alt="" src="https://file.uhsea.com/2411/7ca7ef99088886bb2a29be427b94020dIF.png" /></div>
<div><img alt="" src="https://file.uhsea.com/2411/749c03087f2e1e82c6fbb967a5dccaa3J2.png" /></div>
<div><img alt="" src="https://file.uhsea.com/2411/452496e376c99e7cb41ccc0a0f205738NV.png" /></div>
<div><img alt="" src="https://file.uhsea.com/2411/452496e376c99e7cb41ccc0a0f205738NV.png" /></div>
<div><img alt="" src="https://file.uhsea.com/2411/dd7ec7db4a05c6f72258cc03a49416a39R.png " /></div>
</div>
<div class="set set3">
<div><img alt="" src="https://file.uhsea.com/2411/af3c6e3c59c8131337de09f897c66ef16S.png" /></div>
<div><img alt="" src="https://file.uhsea.com/2411/0e2c72ed2c22a357de266f39cf5b68c1VC.png" /></div>
<div><img alt="" src="https://file.uhsea.com/2411/7ca7ef99088886bb2a29be427b94020dIF.png" /></div>
<div><img alt="" src="https://file.uhsea.com/2411/749c03087f2e1e82c6fbb967a5dccaa3J2.png" /></div>
<div><img alt="" src="https://file.uhsea.com/2411/452496e376c99e7cb41ccc0a0f205738NV.png" /></div>
<div><img alt="" src="https://file.uhsea.com/2411/452496e376c99e7cb41ccc0a0f205738NV.png" /></div>
<div><img alt="" src="https://file.uhsea.com/2411/dd7ec7db4a05c6f72258cc03a49416a39R.png " /></div>
</div>
</div>
<divclass="lrc" ><div id="wzsd1"><ul id="ullrc"></ul></div>
</div>
</div>
<script>
var image= document.getElementById("testImg");
mdiv.onclick = () => aud.paused ? (aud.play(),image.classList.remove('stop')): (aud.pause(),image.classList.add('stop'));
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
/*歌词特效*/
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => wzsd1.style.animationPlayState = 'paused');
let fs = true;
   fullscreen.onclick = () => {
            fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
            fs = !fs;
   };
</script>
<script >
var lrc = ` 花只是开给荒野\n没有你的花季\n花只是开给荒野\n没有你的雨季\n雨只是下给长街\n这个城市还像\n从前一样热闹\n而能够开心的事\n却越来越少\n记忆有很多个\n褪了色的记号\n但你的好我一直忘不掉\n落日不就是快要\n失去天空的怀抱\n你不在风景再美\n也像全部都失效\n回忆总那么糟\n美好又让人烦恼\n像一个个一触就破的气泡\n没有你的花季\n花只是开给荒野\n没有你的雨季\n雨只是下给长街\n眼前的一切像少了另一半的世界\n你带走的是填不了的空缺\n没有你的夜风\n花从不为我摇曳\n没有的你天空\n星辰再美也像熄灭\n所有浪漫在我眼前慢慢凋谢\n又落满了想念你的夜\n~Music~\n这个城市还像\n从前一样热闹\n而能够开心的事\n却越来越少\n记忆有很多个\n褪了色的记号\n但你的好我一直忘不掉\n落日不就是快要\n失去天空的怀抱\n你不在风景再美\n也像全部都失效\n回忆总那么糟\n美好又让人烦恼\n像一个个一触就破的气泡\n没有你的花季\n花只是开给荒野\n没有你的雨季\n雨只是下给长街\n眼前的一切像少了另一半的世界\n你带走的是填不了的空缺\n没有你的夜风\n花从不为我摇曳\n没有的你天空\n星辰再美也像熄灭\n所有浪漫在我眼前慢慢凋谢\n又落满了想念你的夜\n没有你的花季\n花只是开给荒野\n没有你的雨季\n雨只是下给长街\n眼前的一切像少了另一半的世界\n你带走的是填不了的空缺\n没有你的夜风\n花从不为我摇曳\n没有的你天空\n星辰再美也像熄灭\n所有浪漫在我眼前慢慢凋谢\n又落满了想念你的夜\n☆谢谢欣赏☆
`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
   parts = getLrcObj(parts);
}
return parts;

function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
   var min = +timeParts;
   seconds = min * 60 + seconds;
   var words = twoParts;
   return{
         seconds: seconds,
         words: words,
   };
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
   var li = document.createElement("li");
   li.innerText = lrcArray.words;
   $("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
   return;
}
var lrc_li_height = 70, lrc_ul_height = 60;
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
   activeLi.classList.remove("active");}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
   if (lrcArray.seconds > time) {
         return index - 1;
   }
}
}
$("aud").ontimeupdate = setPosition;
</script>

小辣椒 发表于 2024-11-9 21:53

感谢亚伦的精彩特效代码{:5_124:}

liumang 发表于 2024-11-9 22:37

这个图片转换特效漂亮，自然流畅，小辣椒好制作{:5_150:}{:5_150:}{:5_150:}

liumang 发表于 2024-11-9 22:37

{:5_124:}

感谢分享

小辣椒 发表于 2024-11-9 22:51

liumang 发表于 2024-11-9 22:37
感谢分享

liumang 晚上好，我刚下下{:6_206:}

老谟深虑 发表于 2024-11-17 16:16

https://mp3.wf/static/image/smiley/xiaobaitu/15.gif

页: [1]

查看完整版本: 花只是开给荒野 TO：亚伦