有风无风皆自由,单图音画,纳兰音画网,音画设计分享诗词朗诵音乐欣赏播放器设计论坛 - Bbs.CnzV.cC - Powered by Discuz! Archiver

论坛首页 › 单图音画 › 有风无风皆自由

醉美水芙蓉 发表于前天 21:48

有风无风皆自由

<style type="text/css">
#papa { margin: 10px 0 20px calc(50% - 780px); width: 1400px; height: 720px; background:#000url(https://pic.imgdb.cn/item/671af491d29ded1a8c8e7c58.jpg)no-repeat center/cover;box-shadow:0px 0px 0px 2px #fff,0px 0px 0px 4px #880000; overflow: hidden; z-index: 123465; position: relative; display: grid; place-items: center; }
#dtbj{width: 100%; height: 150%; position: absolute;top:0px; left:0px;z-index: 1;}
#dtbj img{height: 100%;width: 100%;}
#pbpb{width:25%;
height: 100%;
position: absolute;
top:0px; left:0px;z-index: 2;}
.photo {width:100%;
height: 100%;box-shadow:0px 0px 0px 1px #fff;
position: absolute;
top:0px; left:0px;
opacity: 0;
animation: round 48s linear infinite;
}
@keyframes round {
0% { transform: translate(0%,0%)scale(0)rotateX(0deg)rotate(360deg);opacity: 0;}
4% { transform: translate(0%,0%)scale(1)rotateX(0deg)rotateY(0deg);opacity: 1;}
6% { transform: translate(0%,0%)scale(.6)rotateX(0deg)rotateY(0deg)rotateY(180deg);opacity: 1;}
8% { transform: translate(0%,0%)scale(1,1)rotateX(-80deg)rotateY(40deg)rotate(0deg);opacity: 1;}
10% { transform: translate(0%,0%)scale(1,1)rotateX(60deg)rotateY(10deg);opacity: 1;}
12% { transform: translate(0%,0%)scale(1,1)rotateX(-60deg)rotateY(10deg);opacity: 1;}
14% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);opacity: 1;}
15% { transform: translate(0%,0%)scale(1)rotateX(0deg)rotateY(0deg);opacity: 0;}
}
.photo:nth-child(1) {background:url(https://pic.imgdb.cn/item/67091935d29ded1a8cce7620.jpg)no-repeat center/cover;
animation-delay: 0s;
}
.photo:nth-child(2) {background:url(https://pic.imgdb.cn/item/6440cbff0d2dde57773ead84.jpg)no-repeat center/cover;
animation-delay: 6s;
}
.photo:nth-child(3) {background:url(https://pic.imgdb.cn/item/6440ce8c0d2dde577742c6df.jpg)no-repeat center/cover;
animation-delay: 12s;
}
.photo:nth-child(4) {background:url(https://pic.imgdb.cn/item/6440cbd70d2dde57773e7877.png)no-repeat center/cover;
animation-delay: 18s;
}
.photo:nth-child(5) {background:url(https://pic.imgdb.cn/item/6440b7c60d2dde5777247178.jpg)no-repeat center/cover;
animation-delay: 24s;
}
.photo:nth-child(6) {background:url(https://pic.imgdb.cn/item/65093817204c2e34d3def680.jpg)no-repeat center/cover;
animation-delay: 30s;
}
.photo:nth-child(7) {background:url(https://pic.imgdb.cn/item/65093816204c2e34d3def64a.jpg)no-repeat center/cover;
animation-delay: 36s;
}
.photo:nth-child(8) {background:url(https://pic.imgdb.cn/item/65093817204c2e34d3def66a.jpg)center/cover no-repeat;
animation-delay: 42s;
}
.stop .photo:nth-child(8),
.stop .photo:nth-child(7),
.stop .photo:nth-child(6),
.stop .photo:nth-child(5),
.stop .photo:nth-child(4),
.stop .photo:nth-child(3),
.stop .photo:nth-child(2),
.stop .photo:nth-child(1){animation-play-state: paused;}
#player {
position: absolute;z-index: 40;
left: calc(50% - 15px);
bottom: 5px;background:#600000;
width: 30px;
height: 30px;
border: 3px solid #cccccc;
border-radius: 50%;
opacity: 1;
transition: .7s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#player::before, #player::after {
position: absolute;
content: '';
border-style: solid;
border-color: #cccccc;
cursor: pointer;
transition: .4s;
}
#player::before {
width: 0;
height: 0;
left: 10px;
border-width: 10px 14px;
border-color: transparent transparent transparent #cccccc;
opacity: var(--disp1);
}
#player::after {
width: 2px;
height: 18px;
border-width: 0 5px 0 5px;
opacity: var(--disp2);
}
.lrc{
width: 100%;
height: 120px;
overflow: hidden;
display: block;position: absolute;top:85%; left:0%;z-index: 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: 40px;
color: #ff0000;
text-align: center;text-align: center;color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);
}

</style>
<div id="papa" >
<div id="dtbj" ><img id="Img" src="https://pic.imgdb.cn/item/65d6e2059f345e8d032e3cef.gif" alt="" /></div>
<div id="testImg">

<div id="pbpb" style="position:absolute;LEFT:0%;">
<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>
<div id="pbpb" style="position: absolute;LEFT:25%;transform: translate(0%,0%)scale(1,1)rotateY(-180deg)">
<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>

<div id="pbpb" style="position: absolute;LEFT:50%;">
<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>

<div id="pbpb" style="position: absolute;LEFT:75%;transform: translate(0%,0%)scale(1,1)rotateY(-180deg)">
<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>
</div>
<div id="player"></div>
<div class="lrc">
   <ul id="ullrc">
      </ul>
   </div>

<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/9f/1d/f7/0e6c75c518a056ab45b8cce780fa171e/audio.mp3" loop autoplay></audio>
</div>
<script>
let mState = () => aud.paused ? (player.style.setProperty('--disp1','1'),player.style.setProperty('--disp2','0')) : (player.style.setProperty('--disp1','0'),player.style.setProperty('--disp2','1'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
var image= document.getElementById("testImg");
player.onclick = () => aud.paused ? (aud.play(),image.classList.remove('stop'),image0.play()): (aud.pause(),image.classList.add('stop'),image0.stop());
</script>

<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
   if (this.storeCanvas) {
         // 移除存储的canvas
         this.storeCanvas.parentElement.removeChild(this.storeCanvas);
         this.storeCanvas = null;
         // 透明度还原
         image0.style.opacity = '';
   }
   if (this.storeUrl) {
         this.src = this.storeUrl;
   }
};
HTMLImageElement.prototype.stop = function() {
   var canvas = document.createElement('canvas');
   // 尺寸
   var width = this.width, height = this.height;
   if (width && height) {
         // 存储之前的地址
         if (!this.storeUrl) {
            this.storeUrl = this.src;
         }
         // canvas大小
         canvas.width = width;
         canvas.height = height;
         // 绘制图片帧（第一帧）
         canvas.getContext('2d').drawImage(this, 0, 0, width, height);
         // 重置当前图片
         try {
            this.src = canvas.toDataURL("image/gif");
         } catch(e) {
            // 跨域
            this.removeAttribute('src');
            // 载入canvas元素
            canvas.style.position = 'absolute';
            // 前面插入图片
            this.parentElement.insertBefore(canvas, this);
            // 隐藏原图
            this.style.opacity = '0';
            // 存储canvas
            this.storeCanvas = canvas;
         }
   }
};
}

var image0= document.getElementById("Img");
</script>
<script >
var lrc = `有风无风皆自由
心若无所求有风无风皆自由
向往着远方寻找理想的温柔
平凡日子中不争不夺不忧愁
行走人海中做个某某某
溪流会转弯麦子会低头
大雁来了走又一个春秋
岁月有褶皱故事在生锈
头顶的星空永不朽
脚下的风霜融化在白昼
李白的月光照耀着九州
童年的纸船中年的渡口
人海里漂流不回头
心若无所求有风无风皆自由
向往着远方寻找理想的温柔
平凡日子中不争不夺不忧愁
行走人海中做个某某某
心若无所求有风无风皆自由
把晚风做酒陪我越生活荒丘
等一场大雨洗礼浑浊的眼眸
雨过天晴后一路花开一路走
脚下的风霜融化在白昼
李白的月光照耀着九州
童年的纸船中年的渡口
人海里漂流不回头
心若无所求有风无风皆自由
向往着远方寻找理想的温柔
平凡日子中不争不夺不忧愁
行走人海中做个某某某
心若无所求有风无风皆自由
把晚风做酒陪我越生活荒丘
等一场大雨洗礼浑浊的眼眸
雨过天晴后一路花开一路走
`;
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;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
var top = index * lrc_li_height + lrc_li_height / 3 - lrc_ul_height / 3;
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 >

klxf 发表于昨天 00:10

动感十足，活力无限，曲曲悦耳，谢谢醉美管理员精彩分享:)

醉美水芙蓉 发表于昨天 07:04

klxf 发表于 2024-11-23 00:10
动感十足，活力无限，曲曲悦耳，谢谢醉美管理员精彩分享

谢谢友友光临！

页: [1]

查看完整版本: 有风无风皆自由