游戏人物

起个网名好难 发表于 2022-10-24 19:23

本帖最后由起个网名好难于 2022-10-25 19:37 编辑 <br /><br /><style type="text/css">
.lrcShow{font:bold 3em sans-serif;position:absolute;bottom:20px;left:20%;color:white;text-shadow:1px 1px 1px #000;letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:darkred;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}.mCtrl{border:1px solid gray;border-radius:50%;display:inline-block;width:60px;height:60px;margin:0px;position:absolute;bottom:30px;right:50px;transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);background-image:conic-gradient(hsl(0,100%,50%),hsl( 18,100%,50%),hsl( 36,100%,50%),hsl( 54,100%,50%),hsl( 72,100%,50%),hsl( 90,100%,50%),hsl(108,100%,50%),hsl(126,100%,50%),hsl(144,100%,50%),hsl(162,100%,50%),hsl(180,100%,50%),hsl(198,100%,50%),hsl(216,100%,50%),hsl(234,100%,50%),hsl(252,100%,50%),hsl(270,100%,50%),hsl(288,100%,50%),hsl(306,100%,50%),hsl(324,100%,50%),hsl(342,100%,50%) );background-position:0 0;background-size:100% 100%;}.z360z{animation:rotating 10s linear infinite;}@keyframes rotating{0%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}100%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(360deg);}}

#outframe {
width:1280px;height:640px;
position:relative;overflow:hidden;
margin:10px 16px 32px -320px;
background-color:#ccf;
border-radius:32px; background-image:url(https://s3.bmp.ovh/imgs/2022/10/25/5dc11258c5c5987d.jpg); background-size:cover;
}
#picHolder    {
width:144px;height:400px;
position:absolute;top:80px;left:660px; /*?￡°????????a3D??oé?′*/ transform-style: preserve-3d;
transform: rotateX(-0.5deg);
}
#picHolder img    {
width:144px;height:200px;
position: absolute;
overflow:hidden;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.5)));
}
:root {    --turn: 360deg / 13; }
#picHolder img:nth-child(1){
transform: rotateY(0deg) translateZ(360px); animation: animateP0 30s linear infinite;
}
#picHolder img:nth-child(2){
transform: rotateY(-60deg) translateZ(360px); animation: animateP1 30s linear infinite;
}
#picHolder img:nth-child(3){ transform: rotateY(-120deg) translateZ(360px); animation: animateP2 30s linear infinite; }
#picHolder img:nth-child(4){ transform: rotateY(-180deg) translateZ(360px); animation: animateP3 30s linearinfinite; }
#picHolder img:nth-child(5){ transform: rotateY(-240deg) translateZ(360px); animation: animateP4 30s linearinfinite; }
#picHolder img:nth-child(6){ transform: rotateY(-300deg) translateZ(360px); animation: animateP5 30s linear infinite; } /*????1??????a??¨???*/
@keyframes animateP5 {
0% , 12% { transform: rotateY(-300deg) translateZ(360px) translateY(150px) scale(1.0); }
12.1% , 12.3% { transform: rotateY(60deg) translateZ(360px) scale(1.0); }
16.67% ,28.67% {transform: rotateY(0deg)translateZ(360px) translateY(240px) scale(1.5); }
33.34%, 45.34% {transform:rotateY(-60deg) translateZ(360px) translateY(150px) scale(1.0); }
50%, 62% { transform:rotateY(-120deg) translateZ(360px) scale(0.5); }
66.67% , 78.67%{transform:rotateY(-180deg) translateZ(360px) scale(0.2); }
83.34% , 95.34%{transform:rotateY(-240deg) translateZ(360px) scale(0.5); }
}
@keyframes animateP4 {
0% , 12% { transform:rotateY(-240deg) translateZ(360px) scale(0.5); }
16.67% ,28.67% {transform:rotateY(-300deg) translateZ(360px) translateY(150px) scale(1.0); }
28.77% ,28.97% {transform:rotateY(60deg) translateZ(360px) scale(1.0);}
33.34%, 45.34% {transform:rotateY(0deg) translateY(240px) translateZ(360px) scale(1.5);}
50%, 63% { transform:rotateY(-60deg) translateZ(360px) translateY(150px) scale(1.0); }
66.67% , 78.67%{transform:rotateY(-120deg) translateZ(360px) scale(0.5); }
83.34% , 95.34%{transform:rotateY(-180deg) translateZ(360px) scale(0.2); }
}
@keyframes animateP3 {
0% , 12% { transform:rotateY(-180deg) translateZ(360px) scale(0.2); }
16.67% ,28.67% {transform:rotateY(-240deg) translateZ(360px) scale(0.5); }
33.34%, 45.34% {transform:rotateY(-300deg) translateZ(360px) translateY(150px) scale(1.0); }
45.44%, 45.64% {transform:rotateY(60deg) translateZ(360px) scale(1.0); }
50%, 63% { transform:rotateY(0deg) translateY(240px) translateZ(360px) scale(1.5); }
66.67% , 78.67%{transform:rotateY(-60deg) translateZ(360px) translateY(150px) scale(1.0); }
83.34% , 95.34%{transform:rotateY(-120deg) translateZ(360px) scale(0.5); }
}
@keyframes animateP2 {
0% , 12% {transform:rotateY(-120deg) translateZ(360px) scale(0.5); }
16.67% ,28.67% {transform:rotateY(-180deg) translateZ(360px) scale(0.2); }
33.34%, 45.34% {transform:rotateY(-240deg) translateZ(360px) scale(0.5); }
50%, 63% {transform:rotateY(-300deg) translateZ(360px) translateY(150px) scale(1.0); }
63.1%, 63.3% {transform:rotateY(60deg) translateZ(360px) scale(1.0); }
66.67% , 78.67% {transform:rotateY(0deg) translateY(240px) translateZ(360px) scale(1.5); }
83.34% , 95.34% {transform:rotateY(-60deg) translateZ(360px) translateY(150px) scale(1.0); }
}
@keyframes animateP1 {
0% , 12% {transform:rotateY(-60deg) translateZ(360px) translateY(150px) scale(1.0); }
16.67% ,28.67% {transform:rotateY(-120deg) translateZ(360px) scale(0.5); }
33.34%, 45.34% {transform:rotateY(-180deg) translateZ(360px) scale(0.2); }
50%, 63% {transform:rotateY(-240deg) translateZ(360px) scale(0.5); }
66.67% , 78.67% {transform:rotateY(-300deg) translateZ(360px) translateY(150px) scale(1.0); }
78.77% , 78.97% {transform:rotateY(60deg) translateZ(360px) scale(1.0); }
83.34% , 95.34% {transform:rotateY(0deg) translateY(240px) translateZ(360px) scale(1.5); }
}
@keyframes animateP0 {
0% , 12% {transform:rotateY(0deg) translateY(240px) translateZ(360px) scale(1.5); }
16.67% ,28.67% {transform:rotateY(-60deg) translateZ(360px) translateY(150px) scale(1.0); }
33.34%, 45.34% {transform:rotateY(-120deg) translateZ(360px) scale(0.5); } 50%, 63% {transform:rotateY(-180deg) translateZ(360px) scale(0.2); }
66.67% , 78.67% {transform:rotateY(-240deg) translateZ(360px) scale(0.5); } 83.34% , 95.34% {transform:rotateY(-300deg) translateZ(360px) translateY(150px) scale(1.0); } 95.44% , 95.64% {transform:rotateY(60deg) translateZ(360px) scale(1.0); }
}
</style>
<div id="outframe">
<div id="picHolder">
<img src="https://s3.bmp.ovh/imgs/2022/10/25/df481f986f1951a5.png" >
<img src="https://s3.bmp.ovh/imgs/2022/10/25/4e25c617b8a33817.png">
<img src="https://s3.bmp.ovh/imgs/2022/10/25/d73a57d7ca0cf1da.png" >
<img src="https://s3.bmp.ovh/imgs/2022/10/25/0fd693c235f81cd8.png" >
<img src="https://s3.bmp.ovh/imgs/2022/10/25/f6faf114bb853797.png">
<img src="https://s3.bmp.ovh/imgs/2022/10/25/407dfa7e58dfb2bd.png">
</div>
<divclass="lrcShow" data-lrc=''></div>
<divid="mDisk" class='mCtrl'></div>
</div>
<script type="text/javascript">
var lrcPlayerY=function(){return this.init.apply(this,arguments)};lrcPlayerY.prototype={constructor:lrcPlayerY,init:function(opts){lyricTxt=opts.lrcTxt.replace(/(^\s*)|(\s*$)/g,'');this.showLrcObj=document.getElementById(opts.lrcShowID);this.audioCtrl=document.getElementById(opts.audioCtrl);this.lrcShowObj=document.getElementsByClassName('lrcShow');this.lrcVec=this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){var parts=lyricTxt.replace(/(^\s*)|(\s*$)/g,"").split(/\r|\n|\r\n/);var lrcs=new Array();for(let index=0;index<parts.length;index++){let chkTime=parts.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=parts.lastIndexOf(']');if(tIdx>0)lrcTxt=parts.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_t=(+ta)*60+(+ta);if(lrcs.length==0&&_t!=0){lrcs.push({seconds:0,words:'\u00A9\u0020\u0020\u4e5f\u66fe\u5e74\u8f7b'})}lrcs.push({seconds:_t,words:lrcTxt})}}}return lrcs.sort(function(a,b){return(a.seconds-b.seconds)})},showLrc:function(durTime){this.lrcShowObj.innerHTML=this.lrcShowObj.dataset.lrc=this.lrcVec.words;this.lrcShowObj.style.setProperty('--aniName','bgMove'+(this.idx%2));this.lrcShowObj.style.setProperty('--durTime',durTime+'ms');this.lrcShowObj.style.setProperty('--aniPlayState','running');this.idx++},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.autoplay=true;this.mObj.src=mUrl;this.lrcShowObj.appendChild(this.mObj);var that=this;var turn=0;this.idx=0;this.mObj.addEventListener('ended',function(){that.idx=0;that.audioCtrl.classList.remove('z360z');this.play()});this.mObj.addEventListener('play',function(){that.audioCtrl.classList.add('z360z');that.lrcShowObj.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){if(that.idx==1&&this.currentTime<1){that.mObj.play();return false}that.audioCtrl.classList.remove('z360z');that.lrcShowObj.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.lrcShowObj.style.display='none';that.lrcShowObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(that.idx<that.lrcVec.length){if(this.currentTime>=that.lrcVec.seconds){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec.seconds-that.lrcVec.seconds)*950)}else{that.showLrc((this.duration-that.lrcVec.seconds)*950)}}}});this.audioCtrl.addEventListener('click',function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}})}}
</script>
<script type="text/javascript">
var lrc =`
亡灵序曲 - 玄觞
词：孤独小狼
曲：Dreamtale
夜弥漫在血色的田野上
昏黄的月光照不亮
挥不散的死亡
遗忘被遗忘剩什么
在心上干枯的心脏
天蒙蒙亮苏醒在墓穴旁
丧钟镇的墙只留下斑驳的痛与伤
回望再回望血与火的战场
曾经的荣光
壳只剩杀被屠杀的躯壳
空洞眼眶没有血没有泪没有光
远方看远方幽暗城的辉煌
腐烂的辉煌
水洗不掉指骨上的旧伤
残破盔甲掩不住战士的旧信仰
握枪再握抢重回到最前方
王子在何方
仇恨在何方
号角声在远方又吹响
何时回故乡又怎么回故乡
曾经的你现在又怎样
是谁的新娘为谁做衣裳
火跳动着的绝望
谁在低声吟唱
说遗忘者的哀伤
用战斗证明希望

壳只剩下被秒杀的躯壳
空洞眼眶没有血没有泪没有光
啊
腐烂的辉煌
干枯的辉煌
握枪再握枪
重回到最前方
仇恨在何方
王子在何方
`;

var opts = {
lrcTxt:lrc,
audioCtrl:'mDisk',
// 歌曲MP3链接放这里
audioURL:'https://www.qqmc.com/up/kwlink.php?id=6845227&.mp3'
};
new lrcPlayerY(opts);

</script>

小辣椒 发表于 2022-10-24 20:21

今天我可以直接看见图图了{:4_173:}

小辣椒 发表于 2022-10-24 20:23

小图打开快多了，非常漂亮的游戏人物{:4_199:}

小辣椒 发表于 2022-10-24 20:26

直接歌词同步，按钮一个

欣赏精彩的制作{:4_187:}

起个网名好难 发表于 2022-10-24 20:27

小辣椒发表于 2022-10-24 20:21
今天我可以直接看见图图了

<svg width="100%" height="100%" viewBox="0 0 1000 600"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
      d="
   M 200 200
   m -100, 150
   a 300,200 0 1,0 600,0
   a 300,200 0 1,0 -600,0
"/>
</defs>

<use xlink:href="#MyPath" fill="none" stroke="transparent"/>

<text font-family="Verdana" font-size="50" stroke="red" fill="yellow">
<textPath xlink:href="#MyPath">
   谢谢你的欣赏！
         <animate attributeName="startOffset" from="0" to ="1656" begin="0s" dur="10s" repeatCount="indefinite" />

</textPath>
</text>
</svg>

图片不多且都很小就相对快点

小辣椒 发表于 2022-10-24 20:29

起个网名好难发表于 2022-10-24 20:27
谢谢你的欣赏！

你前面的东东都看不见的

起个网名好难 发表于 2022-10-24 20:29

小辣椒发表于 2022-10-24 20:26
直接歌词同步，按钮一个

欣赏精彩的制作

要不是有浏览器不能自动开始播放连按钮都有些多余。

起个网名好难 发表于 2022-10-24 20:32

小辣椒发表于 2022-10-24 20:29
你前面的东东都看不见的

说的《大美河山》那帖吧，图片多且每幅图片都不小加上svg加载就慢，需要点耐心。

红影发表于 2022-10-24 20:58

看到这个，想起以前的八扇屏，也是这样旋转的。这个制作很漂亮，欣赏{:4_187:}

起个网名好难 发表于 2022-10-24 21:09

红影发表于 2022-10-24 20:58
看到这个，想起以前的八扇屏，也是这样旋转的。这个制作很漂亮，欣赏

谢谢欣赏！

这帖的图片原来都是http ，想法把图片传到论坛里用上了。

醉美水芙蓉 发表于 2022-10-24 21:26

起个网名好难 发表于 2022-10-24 21:42

醉美水芙蓉发表于 2022-10-24 21:26
图片传论坛都能看见了，欣赏老师的精彩！

谢谢你的欣赏！

图片传到这论坛里还只能在这里用，离线调试帖子不方便。

亚伦影音工作室 发表于 2022-10-24 22:05

本帖最后由亚伦影音工作室于 2022-10-24 22:06 编辑

{:7_298:}震撼！{:4_208:}

起个网名好难 发表于 2022-10-24 22:22

亚伦影音工作室发表于 2022-10-24 22:05
震撼！

谢谢欣赏！

红影发表于 2022-10-24 22:54

起个网名好难发表于 2022-10-24 21:09
谢谢欣赏！

这帖的图片原来都是http ，想法把图片传到论坛里用上了。

好像图片都能显示的吧，我也不懂，有很多图床可以上传的呢。

马黑黑 发表于 2022-10-24 22:57

欣赏大师好作品

深秋红枫 发表于 2022-10-24 23:47

欣赏了！点赞！！
正想发类似的，不发了。

起个网名好难 发表于 2022-10-25 07:03

红影发表于 2022-10-24 22:54
好像图片都能显示的吧，我也不懂，有很多图床可以上传的呢。

图片多或太大肯定是找图床上传，不是太多太大的情况就直接上传到论坛也蛮方便的。

起个网名好难 发表于 2022-10-25 07:04

马黑黑发表于 2022-10-24 22:57
欣赏大师好作品

谢谢你的欣赏！

起个网名好难 发表于 2022-10-25 07:07

深秋红枫发表于 2022-10-24 23:47
欣赏了！点赞！！
正想发类似的，不发了。

感谢欣赏。

这本来就是个旧帖，只是原来的素材都是http的，想法子把它转到这来。

页: [1] 2

花潮论坛's Archiver

游戏人物