亚伦影音工作室 发表于 2023-2-6 17:34

爱过你真的不后悔 - 王馨[柳条（符号）摆动]

本帖最后由 亚伦影音工作室 于 2023-2-6 18:02 编辑 <br /><br /><style>
#papa{ margin: 10px -230px ; width: 1100px; height: 640px; background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/10%10%,url(https://wj1.kumeiwp.com:812/wj/bl/2023/02/02/24d72bf0228ad4744b08635b082f39af.jpg)0 0/100%100%; 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:65%; left:80%;color:#ffff90; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2em华文隶书; opacity: 1; cursor: pointer; z-index: 11}
.pa{width:100%;height:100%;overflow:hidden;color:#00ff00;top:0%; left:0%;position: absolute;z-index: -1}
.letter{position:absolute;font-size:2em;display:inline-block;text-align:center;width:.6em;z-index: 1}       
</style>
<div id="papa">       
<audio id="MusicPlayer" src="https://www.qqmc.com/mp3/music11925289.mp3" autoplay loop></audio>
<span id="fullscreen">全屏观赏</span>
<div class="pa"></div>
<div class="bfbj">
<divid="btn">
<div id="img_border"></div></div>
   <div class="lrc">
      <div class="p"> <liid="ullrc" >
          </li>
      </div>
    </div>
</div>
</div>

<script >
var windVal = 0,
    blowVal = 0,
    cycle = 80,
    cycleAmt = 0.03;

var pa= document.querySelectorAll('.pa');
    pa.style.width = window.innerWidth + 'px';
    pa.style.height = 528 + 'px';

var Segment = function (settings) {
    settings = settings || {};
    this.angle = settings.angle || 0;
    this.cycle = settings.cycle;
   
    this.x = settings.x || 0;
    this.y = settings.y || 0;

   
    this.element = document.createElement('span');
    this.element.classList.add('letter');
    this.element.textContent = settings.letter;
    this.element.style.color = colorCycle(this.cycle);
    pa.appendChild(this.element);
   
    this.width = parseInt(window.getComputedStyle(this.element,null).getPropertyValue('width'), 10) + 5;
    this.height = parseInt(window.getComputedStyle(this.element,null).getPropertyValue('height'),10);
}

Segment.prototype.getJoint = function () {
    var x = this.x + Math.cos(this.angle) * this.width,
      y = this.y + Math.sin(this.angle) * this.width;
    return {
      x: x,
      y: y
    };
};

Segment.prototype.render = function (el) {
    el.style.left = this.x +'px';
    el.style.top = this.y + 'px';
    el.style.webkitTransform = "rotate(" + this.angle + "deg)";
    //this.element.style.color = colorCycle(this.cycle++);
};

var WordString = function (settings) {
    settings = settings || {};
    this.x = settings.x || 0;
    this.y = settings.y || 0;
    this.target = {x : 0, y : 0},
    this.text = settings.text.split('');
    this.text.reverse().join('');
   
    this.segNum = settings.text.length;
    this.angle = (Math.random() * 360 - 180) * Math.PI / 180;
    this.segments = [];

    for (var s = 0; s < this.segNum-1; s++) {
      this.segments.push(new Segment({
            letter: this.text,
            angle: (Math.random() * 360 - 180) * Math.PI / 180,
            cycle : cycle+=cycleAmt
      }));
    }
   
    this.segments.push(new Segment({
      x: this.x,
      y: this.y,
      angle: this.angle,
      letter: this.text,
      cycle : cycle+=cycleAmt
    }));
}

WordString.prototype.track = function (segment, x, y) {   
    var dx = x - segment.x,
      dy = y - segment.y;
   
    segment.angle = Math.atan2(dy, dx);

    var w = segment.getJoint().x - segment.x,
      h = segment.getJoint().y - segment.y;

    return {
          x: x - w,
          y: y - h
    };
}

WordString.prototype.position = function(segmentA, segmentB){
    segmentA.x = segmentB.getJoint().x;
    segmentA.y = segmentB.getJoint().y;
};

WordString.prototype.update = function () {
    var curX = this.segments.x + windVal,
      reachTarget = { x : curX, y : window.innerHeight+500};

    this.target = this.track(this.segments, reachTarget.x, reachTarget.y);
    var track = this.track,
      target = this.target,
      position = this.position;
   
    this.segments.forEach(function (e, i, seg) {
      if (i !== 0) {
            target = track(e, target.x, target.y);
            position(seg, seg);
      }
    });
};

WordString.prototype.render = function () {
    this.segments.forEach(function (e) {
      e.render(e.element);
    });
};

WordString.prototype.destroy = function(){
    this.segments.forEach(function (e, i, arr) {
      e.element.remove();
    });
}

var wordChains = [],
    chainCount = 30;

for(var w = 0; w < chainCount; w++){
    var word = createRandomString(~~(Math.random()*window.innerHeight/35)+5);
    wordChains.push(new WordString({
      text: word,
      x : (window.innerWidth/chainCount) * w,
      y : 0
    }));
}

function update(){
    for(var w = 0; w < chainCount; w++){
      wordChains.update();
      wordChains.render();
    }
    windVal=Math.sin(blowVal)*75;
    blowVal+=0.1;
    requestAnimationFrame(update);
}

update();


// dem utils
function createRandomString(wlen) {
    var chars = "********",
      word = "";
    while(wlen--){
      word+=chars[~~(Math.random()*chars.length)];
    }
    return word;
}

function colorCycle(cycle, bright, light) {
    bright = bright || 255;
    light = light || 0;
    cycle *= .1;
    var r = ~~ (Math.sin(.3 * cycle + 0) * bright + light),
      g = ~~ (Math.sin(.3 * cycle + 2) * bright + light),
      b = ~~ (Math.sin(.3 * cycle + 4) * bright + light);

    return '#ffffff(' + Math.min(r, 255) + ',' + Math.min(g, 255) + ',' + Math.min(b, 255) + ')';
}
</script>


<style>


.bfbj{
    width: 100%;   height: 100%;margin: 0px 0px;position: absolute;
}
#MusicPlayer{
    width: 600px;
    display: block;
    margin: 0 auto;
}
#btn{
    display: block;
    margin: 0 ;
}
.lrc{
    width: 980px;
    height: 140px;position: absolute;top:85%; left:10%;
        z-index: 3;
    overflow: hidden;
    display: block;
    margin: 0px 0px;
}
.lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 80px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 0px;
    color: #000078;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: 45px;color: #ff0000;
text-align:center;
transform: translate(0%,0%);
    font-weight: normal;-webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
    background-image:linear-gradient(50deg, #ffff00, #ff0000, #fff000, #00ff00);
   background-position: 0px 0;
   
   -webkit-animation:loop 3s linear 2;
}
@-webkit-keyframes loop{
   0%{background-position: -800px 0;filter:hue-rotate(360deg)contrast(180%)brightness(500%);}
    }
#img_border{display:inline-block;width:150px;height:150px;position: absolute;top:5%; left:5%;z-index: 20; transition: .3s all ease;animation:rotating 10s linear infinite;background:url(https://pic.imgdb.cn/item/639c602fb1fccdcd36980aad.png)0px 0px/100% 100%;border-radius:0%;}
@keyframes rotating{
0%{transform: rotate(-360deg);filter:hue-rotate(160deg)}
100%{transform: rotate(0deg);}}
</style>
<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 = 80, 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 = $("MusicPlayer").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}

$("MusicPlayer").ontimeupdate = setPosition;


img_border.onclick = () => MusicPlayer.paused ? MusicPlayer.play() : MusicPlayer.pause();
MusicPlayer.addEventListener('playing', () => img_border.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () => img_border.style.animationPlayState = 'paused');


</script >


<script>


let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
</script>

庶民 发表于 2023-2-6 19:33

清雅的图图，别具一格。

红影 发表于 2023-2-6 20:13

这些摇摆的星星珠帘也是代码弄的呢，真漂亮。欣赏亚伦老师好帖{:4_187:}

小辣椒 发表于 2023-2-6 22:21

亚伦现在速度快呢，一下子几个{:4_187:}

但这个全屏欣赏加分后还是不能打开了

小辣椒 发表于 2023-2-6 22:30

[柳条（符号）摆动]制作不错{:4_199:}

梦缘 发表于 2023-2-7 14:56

绿帘美人，很好看，欣赏问好！{:4_204:}
页: [1]
查看完整版本: 爱过你真的不后悔 - 王馨[柳条（符号）摆动]