论坛 › 音乐沙龙 › 海棠依旧

杨帆 发表于 2025-5-24 20:10

海棠依旧

本帖最后由 杨帆 于 2025-5-24 20:35 编辑 <br /><br /><style>
#papa {margin: 30px-400px; width: clamp(600px, 90vw, 1400px); min-height: 80vh; aspect-ratio: 16/9;background:#000000 url("https://cccimg.com/view.php/319268a223117985242dc65c3984b3bd.png ") 0 0/100% 100%,linear-gradient(80deg, #000080, #000090, #000000, #111111);box-shadow: 0px 0px 6px #045768，0px 0px 16px #99e5f5，0px 0px22px #045768; border-radius:1%;position: relative; display: grid; place-items: center;overflow:hidden;transform:rotateX(0deg) scale(1);z-index: 1; opacity: 1;
}
#fullscreen { position: absolute; top:5.5%; left:88%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文新魏; opacity: 0; cursor: pointer; z-index: 8;
}
#papa:hover#fullscreen{ opacity: .9; }
.photo {width: 100%;height: 100%;position: absolute;z-index: 1;-opacity: 1;webkit-mask-image: radial-gradient(black 35% ,transparent 85%);top:0px; left:0px;filter:contrast(120%)brightness(100%);opacity: 0;animation: round 49s infinite linear;object-fit: cover; border-radius: 5px;box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
@keyframesround {0% {opacity: 0;}8% {opacity: 1;}10% {opacity: 1;}15% { opacity: 0;}
      }

img.photo:nth-child(1) { animation-delay: 0s; }
img.photo:nth-child(2) { animation-delay: 7s; }
img.photo:nth-child(3) { animation-delay: 14s; }
img.photo:nth-child(4) { animation-delay: 21s; }
img.photo:nth-child(5) { animation-delay: 28s; }
img.photo:nth-child(6) { animation-delay: 35s; }
img.photo:nth-child(7) { animation-delay: 42s; }
img.photo:nth-child(8) { animation-delay: 49s; }
#dt{
      position:absolute;
      width: 100%;
      height: 100%;
      top:0%;
      left: 0%;
      mix-blend-mode: screen;
      z-index: -1;
}
#dt img{width: 100%;
      height: 100%;
    }
#vid1, #vid2 {
        width: 100%;
        height: 100%;
        z-index:-1;
        position:absolute;
        top:0%;
        left:0%;
      opacity: .99;
        object-fit: cover;
        pointer-events: none;
    mix-blend-mode: screen;
-webkit-mask: linear-gradient(to right top, red 0%, transparent 90%, transparent);
}
#pa {
      width: 45%;
      height: 45%;
      top: 62%;
      left: -13%;
      cursor: pointer;
      position: absolute;
      overflow: hidden;
      filter: invert(.8);
      z-index:-1;
      opacity: 0;
    }
#papa:hover #pa{ transform:scale(1.1,1.1); opacity: .9; }
</style>
<div id="papa">
<div id="pa"></div>
<div id="dt">
<img src="https://638183.freep.cn/638183/web/svg/ball8path1.svg" id="IMG"style="mix-blend-mode: screen" alt=" " />
<video id="vid1" src="https://img.tukuppt.com/video_show/7165162/00/17/65/5ecb8fa5f0765.mp4" loop muted autoplay=""></video>
<video id="vid2" src="https://video.699pic.com/videos/70/98/45/b_ktih9Na2nBxq1540709845_10s.mp4" loop muted autoplay=""></video>
<audio id="MusicPlayer" src="https://cccimg.com/view.php/16ff20fe8f3517495372905d718f26b3.mp3" autoplay loop></audio>
<span id="fullscreen">全屏观赏</span>
<div id="testImg" >
<img alt="" class="photo" src="https://cccimg.com/view.php/4d7ffa592207788ff06dd50a1ee85b77.jpg" />
<img alt="" class="photo" src="https://cccimg.com/view.php/c808f35143ca1c8282e9c551480e3b8d.jpg" />
<img alt="" class="photo" src="https://cccimg.com/view.php/150e079a90fb7a84f5a7de47d3c84634.jpg" />
<img alt="" class="photo" src="https://cccimg.com/view.php/deb33a4bd179f97baf20a41a903afd2d.jpg" />
<img alt="" class="photo" src="https://cccimg.com/view.php/e039608f504e7fc09d69641db1e1b00c.jpg" />
<img alt="" class="photo" src="https://cccimg.com/view.php/d6c4dd4a51f7cf45255c93c502eeeb89.jpg" />
<img alt="" class="photo" src="https://cccimg.com/view.php/2d83fd1fbfa7284b2b8a8c468e662370.jpg" />
<img alt="" class="photo" src="https://cccimg.com/view.php/387346f639a6f32a3ae853ee1f6539af.jpg" />
</div>
<div id="img_border"></div>
   <div class="lrc">
      <div class="p"> <liid="ullrc" > </li> </div>   
    </div>
<style>
.lrc{
    width: 980px;
    height: 100px;position: absolute;top:88%; left:15%;
    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:120px;height:120px;position: absolute;top: 77.5%;left:5.5%;z-index:15; transition: .3s all ease;animation:rotating 6s linear infinite;background:url("https://638183.freep.cn/638183/small/fi2.webp")0px 0px/100% 100%;border-radius:0%; animation-play-state: paused; cursor: pointer;opacity: 0; }
#papa:hover #img_border{opacity: .9; }
@keyframes rotating{
0%{transform: rotate(360deg);filter:hue-rotate(-360deg)}
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;
var image = document.getElementById("testImg"),
    button = document.getElementById("btn");
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == '.') {
            image.classList.remove('stop');
          this.value = '*';
      } else {
            image.classList.add('stop');
            this.value = '.';
      }
    };
}
const MusicPlayer = document.getElementById('MusicPlayer');
const img_border = document.getElementById('img_border');
const testImg = document.getElementById('testImg');
const vid1 = document.getElementById('vid1');
const vid2 = document.getElementById('vid2');
const IMG = document.getElementById('IMG');
let threeClock; // Three.js动画时钟
let threeIsPaused = false; // Three.js动画状态
function toggleAnimations(paused) {
    const state = paused ? 'paused' : 'running';
    paused ? MusicPlayer.pause() : MusicPlayer.play();
    img_border.style.animationPlayState = state;
    document.querySelectorAll('.photo').forEach(img => {
      img.style.animationPlayState = state;
    });
    vid1();
    vid2();
    IMG.style.animationPlayState = state;
    IMG.style.opacity = paused ? '0' : '0.9';
    const particleContainer = testImg.querySelector('.set');
    if(particleContainer) {
      paused ? particleContainer.classList.add('stop') : particleContainer.classList.remove('stop');
    }
    if (threeClock) {
      paused ? threeClock.stop() : threeClock.start();
      threeIsPaused = paused;
    }
}
MusicPlayer.addEventListener('loadedmetadata', () => {
    toggleAnimations(MusicPlayer.playing);
});
MusicPlayer.addEventListener('playing', () => toggleAnimations(false));
MusicPlayer.addEventListener('pause', () => toggleAnimations(true));
img_border.onclick = () => {
    MusicPlayer.paused ? MusicPlayer.play() : MusicPlayer.pause();
};
img_border.addEventListener('touchend', () => {
    MusicPlayer.paused ? MusicPlayer.play() : MusicPlayer.pause();
});
let fs = true;
fullscreen.onclick = () => {
    fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
    fs = !fs;
};
</script>
<script type="module">
    import * as THREE from 'https://unpkg.ihwx.cn/three@0.176.0/build/three.module.js'; // three核心库
    const scene = new THREE.Scene; // 场景
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // 相机
    camera.position.set(0, 0, 5); // 相机位置
    const renderer = new THREE.WebGLRenderer({ antialias: true , alpha: true}); // 渲染
    var pa = document.getElementById('pa');
    renderer.setSize(pa.offsetWidth, pa.offsetHeight);
    pa.appendChild(renderer.domElement);

    const geometry = new THREE.SphereGeometry(); // 球体几何体
    const wireframe = new THREE.WireframeGeometry(geometry); // 球形几何体网格线化
    const ball = new THREE.LineSegments(wireframe); // 创建最终图像（线型还可选Line、LineLoop）
    ball.material.color.set('gold'); // 可以设置网格线颜色
    scene.add(ball); // 图像加入到场景

    // 新增：初始化Three.js时钟并关联到全局变量
    threeClock = new THREE.Clock();
    threeClock.running = true; // 初始化为运行状态

    // 动画函数
    const animate = () => {
      requestAnimationFrame(animate);
      if (!threeIsPaused) { // 仅在未暂停时更新动画
            const delta = threeClock.getDelta(); // 时钟增量
            ball.rotation.x += delta / 5; // X轴旋转
            ball.rotation.y += delta / 5; // Y轴旋转
      }
      renderer.render(scene, camera); // 渲染动画
    };

    // 窗口自适应
    window.onresize = () => {
      camera.aspect = window.innerWidth / window.innerHeight; // 更新相机视口
      camera.updateProjectionMatrix(); // 同步相机投影矩阵
      // 重设渲染器渲染范围
      renderer.setSize(pa.offsetWidth, pa.offsetHeight);
      renderer.render(scene, camera); // 重新渲染效果
    };

    pa.onclick = () => {
      if (threeClock.running) {
            threeClock.stop();
            MusicPlayer.pause();
      } else {
            threeClock.start();
            MusicPlayer.play();
      }
    };

    animate();
</script>

红影 发表于 2025-5-24 22:31

好漂亮的变色球体的小播，这个制作真棒。
欣赏杨帆好帖{:4_199:}

梦江南 发表于 2025-5-25 08:19

好漂亮的海棠花，还有左下角的旋转球体，当鼠标移出画面时，这个球体就不见了。{:4_187:}

小辣椒 发表于 2025-5-26 22:10

欣赏杨帆的漂亮制作{:4_187:}

杨帆 发表于 2025-5-26 22:40

红影 发表于 2025-5-24 22:31
好漂亮的变色球体的小播，这个制作真棒。
欣赏杨帆好帖

谢谢影子观赏与鼓励，祝开心{:4_204:}

杨帆 发表于 2025-5-26 22:41

梦江南 发表于 2025-5-25 08:19
好漂亮的海棠花，还有左下角的旋转球体，当鼠标移出画面时，这个球体就不见了。
问好江南，谢谢观赏与鼓励{:4_204:}

杨帆 发表于 2025-5-26 22:42

小辣椒 发表于 2025-5-26 22:10
欣赏杨帆的漂亮制作

谢谢小辣椒观赏与鼓励，开心{:4_204:}

红影 发表于 2025-5-27 13:21

杨帆 发表于 2025-5-26 22:40
谢谢影子观赏与鼓励，祝开心

谢谢杨帆的美好祝福，也祝你开心{:4_187:}

查看完整版本: 海棠依旧