首页 › 音画作品 › 如果天有情

朵拉 发表于 2026-3-22 20:48

如果天有情

本帖最后由 朵拉 于 2026-3-22 20:53 编辑 <br /><br /><style>
#papa{
      position: relative;
      width: 1286px;
      height: 720px;
      margin-left:-300px;
      margin-top:30px;
      border: 0px solid rgba(36, 201, 219,.95);
      border-radius: 0px;
      background:#000 url('https://pic1.imgdb.cn/item/69ad7978001548a02b696968.jpg')no-repeat center/cover;
      overflow: hidden;
}
#mdiv {top:12%; left:85%;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);} }
#c{
mix-blend-mode: darken;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

.lrc{position: absolute;z-index: 90;transform:rotate(0deg);
    width: 960px;
    height: 160px;/*歌词轮廓高：160：显示一行 两行 三行。500：多行*/
      overflow: hidden;
    display: block;
    margin: 360px 40px;/*歌词调整：上下 左右*/
}
.lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 50px;
    line-height: 50px;
font-family:悟空大字库;
    font-size: 30px;/*歌词字体大小：0不显示普通歌词，只有一行动态歌词*/
    color: #00fff0;transform: translate(0%,0%);
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
text-align:center;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
    display: block;
    width: 100%;
    margin: 0 auto;
}

/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 35px;color: #F1612A;
}
text-align:center;
transform: translate(0%,0%);
    font-weight: normal;

</style>

<div id="papa">
<canvas id="c"></canvas>
<img id="mdiv"src="https://pic.imgdb.cn/item/671d8801d29ded1a8cbb3fa7.png">
<div class="lrc">
      <ul id="ullrc">
         </ul>
      </div>
<audio id="aud" src="https://upfile.mp3.wf/view.php/2fa760a5000f673303e66d9dceb76f41.mp3"loopautoplay ></audio>
</div>
<script>
mdiv.onclick = () => aud.paused ? aud.play(): aud.pause();
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');

mdiv.style.animationPlayState = aud.paused ? 'paused' : 'running';

</script>
<script >
c = document.querySelector('#c')
c.width = 1980
c.height = 1080
x = c.getContext('2d')
C = Math.cos
S = Math.sin
t = 0
T = Math.tan

rsz=window.onresize=()=>{
setTimeout(()=>{
   if( document.papa.clientWidth > document.papa.clientHeight*1.77777778){
      c.style.height = '100vh'
      setTimeout(()=>c.style.width = c.clientHeight*1.77777778+'px',0)
    } else{
      c.style.width = '100vw'
      setTimeout(()=>c.style.height =   c.clientWidth/1.77777778 + 'px',0)
    }
},0)
}

rsz()
async function Draw(){
if(!t){
    R=(Rl,Pt,Yw,m)=>{if(!aud.paused){
      M=Math
      A=M.atan2
      H=M.hypot
      X=S(p=A(X,Y)+Rl)*(d=H(X,Y))
      Y=C(p)*d
      Y=S(p=A(Y,Z)+Pt)*(d=H(Y,Z))
      Z=C(p)*d
      X=S(p=A(X,Z)+Yw)*(d=H(X,Z))
      Z=C(p)*d
      if(m){
      X+=oX
      Y+=oY
      Z+=oZ
      }
   } }
    Q=()=>
    I=(A,B,M,D,E,F,G,H)=>(K=((G-E)*(B-F)-(H-F)*(A-E))/(J=(H-F)*(M-A)-(G-E)*(D-B)))>=0&&K<=1&&(L=((M-A)*(B-F)-(D-B)*(A-E))/J)>=0&&L<=1?:0
   
    Rn = Math.random
   
    geoSphere = (mx, my, mz, iBc, size) => {
      let collapse=0
      let B=Array(iBc).fill().map(v=>{
      X = Rn()-.5
      Y = Rn()-.5
      Z = Rn()-.5
      return
      })
      for(let m=99;m--;){
      B.map((v,i)=>{
          X = v
          Y = v
          Z = v
          B.map((q,j)=>{
            if(j!=i){
            X2=q
            Y2=q
            Z2=q
            d=1+(Math.hypot(X-X2,Y-Y2,Z-Z2)*(3+iBc/40)*3)**4
            X+=(X-X2)*99/d
            Y+=(Y-Y2)*99/d
            Z+=(Z-Z2)*99/d
            }
          })
          d=Math.hypot(X,Y,Z)
          v=X/d
          v=Y/d
          v=Z/d
          if(collapse){
            d=25+Math.hypot(X,Y,Z)
            v=(X-X/d)/1.1
            v=(Y-Y/d)/1.1         
            v=(Z-Z/d)/1.1
          }
      })
      }
      B.map(v=>{
      v*=size
      v*=size
      v*=size
      v+=mx
      v+=my
      v+=mz
      })
      return
    }

    Cylinder = (rw,cl,ls1,ls2) => {
      let a = []
      for(let i=rw;i--;){
      let b = []
      for(let j=cl;j--;){
          X = S(p=Math.PI*2/cl*j) * ls1
          Y = (1/rw*i-.5)*ls2
          Z = C(p) * ls1
          b = [...b, ]
      }
      //a = [...a, b]
      for(let j=cl;j--;){
          b = []
          X = S(p=Math.PI*2/cl*j) * ls1
          Y = (1/rw*i-.5)*ls2
          Z = C(p) * ls1
          b = [...b, ]
          X = S(p=Math.PI*2/cl*(j+1)) * ls1
          Y = (1/rw*i-.5)*ls2
          Z = C(p) * ls1
          b = [...b, ]
          X = S(p=Math.PI*2/cl*(j+1)) * ls1
          Y = (1/rw*(i+1)-.5)*ls2
          Z = C(p) * ls1
          b = [...b, ]
          X = S(p=Math.PI*2/cl*j) * ls1
          Y = (1/rw*(i+1)-.5)*ls2
          Z = C(p) * ls1
          b = [...b, ]
          a = [...a, b]
      }
      }
      b = []
      for(let j=cl;j--;){
      X = S(p=Math.PI*2/cl*j) * ls1
      Y = ls2/2
      Z = C(p) * ls1
      b = [...b, ]
      }
      //a = [...a, b]
      return a
    }

    Tetrahedron = size => {
      ret = []
      a = []
      let h = size/0.4142/0.25
      for(i=3;i--;){
      X = S(p=Math.PI*2/3*i) * size/0.25
      Y = C(p) * size/0.25
      Z = h
      a = [...a, ]
      }
      ret = [...ret, a]
      for(j=3;j--;){
      a = []
      X = 0
      Y = 0
      Z = -h
      a = [...a, ]
      X = S(p=Math.PI*2/3*j) * size/0.25
      Y = C(p) * size/0.25
      Z = h
      a = [...a, ]
      X = S(p=Math.PI*2/3*(j+1)) * size/0.25
      Y = C(p) * size/0.25
      Z = h
      a = [...a, ]
      ret = [...ret, a]
      }
      ax=ay=az=ct=0
      ret.map(v=>{
      v.map(q=>{
          ax+=q
          ay+=q
          az+=q
          ct++
      })
      })
      ax/=ct
      ay/=ct
      az/=ct
      ret.map(v=>{
      v.map(q=>{
          q-=ax
          q-=ay
          q-=az
      })
      })
      return ret
    }

    Cube = size => {
      for(CB=[],j=6;j--;CB=[...CB,b])for(b=[],i=4;i--;)b=[...b,[(a=)*(l=j<3?size/0.5:-size/0.5),a[(j+1)%3]*l,a[(j+2)%3]*l]]
      return CB
    }
   
    Octahedron = size => {
      ret = []
      let h = size/0.25
      for(j=8;j--;){
      a = []
      X = 0
      Y = 0
      Z = h * (j<4?-1:1)
      a = [...a, ]
      X = S(p=Math.PI*2/4*j) * size/0.25
      Y = C(p) * size/0.25
      Z = 0
      a = [...a, ]
      X = S(p=Math.PI*2/4*(j+1)) * size/0.25
      Y = C(p) * size/0.25
      Z = 0
      a = [...a, ]
      ret = [...ret, a]
      }
      return ret      
    }
   
    Dodecahedron = size => {
      ret = []
      a = []
      mind = -6e6
      for(i=5;i--;){
      X=S(p=Math.PI*2/5*i + Math.PI/5)
      Y=C(p)
      Z=0
      if(Y>mind) mind=Y
      a = [...a, ]
      }
      a.map(v=>{
      X = v
      Y = v-=mind
      Z = v
      R(0, .553573, 0)
      v = X
      v = Y
      v = Z
      })
      b = JSON.parse(JSON.stringify(a))
      b.map(v=>{
      v *= -1
      })
      ret = [...ret, a, b]
      mind = -6e6
      ret.map(v=>{
      v.map(q=>{
          X = q
          Y = q
          Z = q
          if(Z>mind)mind = Z
      })
      })
      d1=Math.hypot(ret-ret,ret-ret,ret-ret)
      ret.map(v=>{
      v.map(q=>{
          q-=mind+d1/2
      })
      })
      b = JSON.parse(JSON.stringify(ret))
      b.map(v=>{
      v.map(q=>{
          q*=-1
      })
      })
      ret = [...ret, ...b]
      b = JSON.parse(JSON.stringify(ret))
      b.map(v=>{
      v.map(q=>{
          X = q
          Y = q
          Z = q
          R(0,0,Math.PI/2)
          R(0,Math.PI/2,0)
          q = X
          q = Y
          q = Z
      })
      })
      e = JSON.parse(JSON.stringify(ret))
      e.map(v=>{
      v.map(q=>{
          X = q
          Y = q
          Z = q
          R(0,0,Math.PI/2)
          R(Math.PI/2,0,0)
          q = X
          q = Y
          q = Z
      })
      })
      ret = [...ret, ...b, ...e]
      ret.map(v=>{
      v.map(q=>{
          q *= size/2
          q *= size/2
          q *= size/2
      })
      })
      return ret
    }
   
    Icosahedron = size => {
      ret = []
      B = [
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      ]
      for(p=,i=38;i--;)p=[...p,p+p]
      phi = p/p
      a = [
      [-phi,-1,0],
      ,
      ,
      [-phi,1,0],
      ]
      for(j=3;j--;ret=[...ret, b])for(b=[],i=4;i--;) b = [...b, ,a[(j+1)%3],a[(j+2)%3]]]
      ret.map(v=>{
      v.map(q=>{
          q*=size/1.25
          q*=size/1.25
          q*=size/1.25
      })
      })
      cp = JSON.parse(JSON.stringify(ret))
      out=[]
      a = []
      B.map(v=>{
      idx1a = v
      idx2a = v
      idx3a = v
      idx1b = v
      idx2b = v
      idx3b = v
      a = [...a, ,cp,cp]]
      })
      out = [...out, ...a]
      return out
    }
   
    stroke = (scol, fcol, lwo=0) => {
      if(scol){
      //x.closePath()
      x.globalAlpha = 0.02
      x.strokeStyle = scol
      x.lineWidth = Math.min(100,600*lwo/Z)
      x.stroke()
      x.lineWidth /= 5
      x.globalAlpha = 1
      x.stroke()
      }
      if(fcol){
      x.fillStyle = fcol
      x.fill()
      }
    }
    Rn = Math.random
   
    LsystemRecurse = (size, splits, p1, p2, stem, theta, LsystemReduction, twistFactor) => {
      if(size < .7) return
      let X1 = stem
      let Y1 = stem
      let Z1 = stem
      let X2 = stem
      let Y2 = stem
      let Z2 = stem
      let p1a = Math.atan2(X2-X1,Z2-Z1)
      let p2a = -Math.acos((Y2-Y1)/(Math.hypot(X2-X1,Y2-Y1,Z2-Z1)+.0001))+Math.PI
      size/=LsystemReduction
      for(let i=splits;i--;){
      X = 0
      Y = -size
      Z = 0
      R(0, theta, 0)
      R(0, 0, Math.PI*2/splits*i+twistFactor)
      R(0, p2a, 0)
      R(0, 0, p1a+twistFactor)
      X+=X2
      Y+=Y2
      Z+=Z2
      let newStem =
      Lshp = [...Lshp, newStem]
      LsystemRecurse(size, splits, p1+Math.PI*2/splits*i+twistFactor, p2+theta, newStem, theta, LsystemReduction, twistFactor)
      }
    }
    DrawLsystem = shp => {
      shp.map(v=>{
      x.beginPath()
      X = v
      Y = v
      Z = v
      R(Rl,Pt,Yw,1)
      if(Z>0)x.lineTo(...Q())
      X = v
      Y = v
      Z = v
      R(Rl,Pt,Yw,1)
      if(Z>0)x.lineTo(...Q())
      lwo = Math.hypot(v-v,v-v,v-v)
      stroke('#ff0000','#00aa00',lwo)
      })
      
    }
    Lsystem = (size, splits, theta, LsystemReduction, twistFactor) => {
      Lshp = []
      stem =
      Lshp = [...Lshp, stem]
      LsystemRecurse(size, splits, 0, 0, stem, theta, LsystemReduction, twistFactor)
      Lshp.map(v=>{
      v+=size*1.5
      v+=size*1.5
      })
      return Lshp
    }
   
    Sphere = (ls, rw, cl) => {
      a = []
      ls/=1.25
      for(j = rw; j--;){
      for(i = cl; i--;){
          b = []
          X = S(p = Math.PI*2/cl*i) * S(q = Math.PI/rw*j) * ls
          Y = C(q) * ls
          Z = C(p) * S(q) * ls
          b = [...b, ]
          X = S(p = Math.PI*2/cl*(i+1)) * S(q = Math.PI/rw*j) * ls
          Y = C(q) * ls
          Z = C(p) * S(q) * ls
          b = [...b, ]
          X = S(p = Math.PI*2/cl*(i+1)) * S(q = Math.PI/rw*(j+1)) * ls
          Y = C(q) * ls
          Z = C(p) * S(q) * ls
          b = [...b, ]
          X = S(p = Math.PI*2/cl*i) * S(q = Math.PI/rw*(j+1)) * ls
          Y = C(q) * ls
          Z = C(p) * S(q) * ls
          b = [...b, ]
          a = [...a, b]
      }
      }
      return a
    }
   
    iWaveSystemc = 120
    iWsp = .1
    a = [], b = []
    for(i=iWaveSystemc;i--;){
      X = (-iWaveSystemc/2+i)*iWsp
      Y = 0
      Z = 0
      a = [...a, ]
      b = [...b, ]
    }
    base_waveSystem =
   
    cl = 3
    rw = 4
    br = 4
    sp = 8
    iBc = rw*cl*br
   
    B = Array(iBc).fill().map((v,i)=>{
      X = ((i%cl)-cl/2+.5)*sp*4.95/3
      Y = (((i/cl|0)%rw)-rw/2+.5)*sp
      Z = ((i/cl/rw|0)-br/2+.5)*sp
      return
    })
}

oX=0, oY=0, oZ=14
Rl = t/3, Pt = -t, Yw = C(t/8)*10

x.globalAlpha = 2
x.fillStyle='#44aa88'
x.fillRect(0,0,c.width,c.height)
x.lineJoin = x.lineCap = 'round'

for(m=2;m--;) base_waveSystem.map((v, i)=>{ if(!aud.paused){
    v=(m?-1:1)*iWsp + Math.max(0, ((S(p=Math.PI*8/iWaveSystemc*i+(v>0?1:-1)*C(t/4)*5)*4)**16/10000000000)+S((v>0?1:-1)*Math.PI*4/iWaveSystemc*i+t*5)+S((v>0?1:-1)*Math.PI*(S(t/4+t/2)*4)**3/iWaveSystemc*i+t*10)+S((v>0?1:-1)*Math.PI/iWaveSystemc*i+t*20))*(m?-1:1)
} })

B.map(v=>{
    tx = v
    ty = v
    tz = v
   
    for(m=2;m--;){
      x.beginPath()
      v.map(q=>{
      X = q
      Y = q
      Z = q
      p = Math.atan2(ty,tz)+Math.PI/2
      R(0,p,0)
      X += tx
      Y += ty
      Z += tz
      R(Rl,Pt,Yw,1)
      if(Z>0)x.lineTo(...Q())
      })
      stroke(m?'#ff0000':'#000078')
    }
})

t+=1/60
requestAnimationFrame(Draw)
}

Draw()
</script>

<script >
var lrc = `如 果 天 有 情
制作：朵拉

总要为爱伤透了心
才知真情多么难寻
有谁愿意如此认识爱情
总要流下多少泪滴
才能看清楚自己
一颗痴心一段赤情
说得容易怎奈人间际遇
就让我和你沉睡在梦里
可知我的心不愿意醒
相偎又相依黑夜到天明
缘份不能分命运不能离
如果天有情如果梦会灵
就让我的心爱到彻底
我对你的爱已无法说明
就像风吹不息雨打不停
此情不渝
总要为爱伤透了心
才知真情多么难寻
有谁愿意如此认识爱情
总要流下多少泪滴
才能看清楚自己
一颗痴心一段赤情
说得容易怎奈人间际遇
就让我和你沉睡在梦里
可知我的心不愿意醒
相偎又相依黑夜到天明
缘份不能分命运不能离
如果天有情如果梦会灵
就让我的心爱到彻底
我对你的爱已无法说明
就像风吹不息雨打不停
此情不渝
如果天有情如果梦会灵
就让我的心爱到彻底
我对你的爱已无法说明
就像风吹不息雨打不停
此情不渝
2026—03—22
`;
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 = 50, lrc_ul_height = 50;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
    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 >

liumang 发表于 2026-3-22 22:50

{:5_150:}{:5_150:}{:5_150:}

liumang 发表于 2026-3-22 22:50

欣赏朵拉美图，谢谢分享{:5_124:}

liumang 发表于 2026-3-22 22:51

背景图片有点卡

liumang 发表于 2026-3-22 22:52

播放器按钮出来是个框

liumang 发表于 2026-3-22 22:52

背景代码效果看见了，谢谢朵拉分享

查看完整版本: 如果天有情