《感觉》 - 张靓颖 — 学习马老师帖《一个人的龟兹》 - 欢乐水吧 - 花潮论坛

杨帆发表于 2025-6-7 23:34

《感觉》 - 张靓颖 — 学习马老师帖《一个人的龟兹》

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>感觉 - 张靓颖 (Jane Zhang)
</title>
</head>
<body>
<style>
#papa {--state: running; margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); min-height: 80vh;
aspect-ratio: 16/9; background:#333 url('https://pic1.imgdb.cn/item/660527ab9f345e8d038c20cb.jpg') 0 0/100% 100%;box-shadow: 3px 3px 6px 6px gray;position: relative;overflow: hidden;z-index: 1;
}
#dt{
   position:absolute;
   width: 100%;
   height: 100%;
   top:0%;
   left: 0%;
   mix-blend-mode: screen;
   z-index: -1;
}
#dt img{width: 100%;
   height: 100%;
}
#pa{
width:22%;
height:22%;
border-radius:50%;
top:72%;
left:80%;
cursor:pointer;
position: absolute;
overflow: hidden;
z-index: 10;
opacity: .8;
}
#pa:hover { transform:scale(1.1,1.1);filter: drop-shadow(0 0 80px Gold); }
.lrc {
position: absolute;
top: 52%;
left: 36%;
width: 540px;
height: 250px;
overflow: hidden;
   }
.lrc #ul {
   width: 100%;
   padding: 0;
   list-style: none;
   transition: 0.3s all ease;
   margin: 0;
   }
.lrc #ul li {
   color:#FFE4E1;
   font: normal 28px 'YouYuan', sans-serif;
   transition: .3s all ease;
   list-style-type: none;
   text-align: center;
   display: block;
   padding: 0 10px;
   height: 50px;
   line-height: 50px;
   margin: 0 auto;
   }
.lrc #ul li.active {
   transform:scale(1.2);
   color: #33FF33;
   font-weight: 650;
   text-align: center;
   }
#vid2 {width: 100%; height:100%;position:absolute; top:0%; left:0%;object-fit: cover; z-index: 1; opacity:.5;pointer-events: none;mask: linear-gradient(to right top, red 35%, transparent 36%, transparent);-webkit-mask: linear-gradient(to right top, red 35%, transparent 36%, transparent);
}
</style>
<div id="papa">
<img id="dan" src="https://pic1.imgdb.cn/item/67d5666e88c538a9b5bec9dd.gif" alt="" style="width: 292px; height: 308px; left: 520px; top: 400px;">
<div id="dt">
<img src="https://pic1.imgdb.cn/item/67564aedd0e0a243d4e015f5.gif" id="Img" style="mix-blend-mode: screen" alt=" " /></div>
<video id="vid2" src="https://bpic.588ku.com/video_listen/588ku_video/25/03/19/13/45/55/video67da5a13623dd.mp4" loop muted autoplay=""></video>
<div id="pa" title="播放/暂停"></div>
<divid="dhgc" class="lrc">
         <ul id="ul"></ul>
               </div>
</div>
<audio id="audio" src="https://cccimg.com/view.php/9a28b100b95ac6ed063ce6719eb94cf3.mp3" loop autoplay ></audio>
<script type="importmap">
{
"imports": {
"three": "https://638183.freep.cn/638183/3dev/build/three.module.min.js",
"three/addons/": "https://638183.freep.cn/638183/3dev/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three'; // ThreeJS主库，下面的都是扩展库
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; // 效果合成库
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; // 渲染器基础通道库
import { FilmPass } from 'three/addons/postprocessing/FilmPass.js'; // 电影风格库
import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js'; // 高亮描边通道库

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(15, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 10;
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); // alpha将因为因辉光库缺陷而失效
renderer.setSize(pa.offsetWidth, pa.offsetHeight);
const clock = new THREE.Clock();
pa.appendChild(renderer.domElement);

const pic2 = 'https://pic1.imgdb.cn/item/6844472a58cb8da5c8394e71.jpg';
   const texture2 = new THREE.TextureLoader().load(pic2, () => {
         texture2.colorSpace = THREE.SRGBColorSpace;
         texture2.wrapS = THREE.RepeatWrapping;
         texture2.wrapT = THREE.RepeatWrapping;
         texture2.repeat.set(3, 2);
         renderer.render(scene, camera);
   });

// 绘制图像圆环扭结几何体 + 法向量网格材质
const points = [, , ].map(item => new THREE.Vector2(item, item));
const mesh = new THREE.Mesh(
new THREE.LatheGeometry(points),
new THREE.MeshBasicMaterial({color:0xFFD700,side: THREE.DoubleSide, transparent: true, opacity:0.8,map: texture2, transparent: true})

);
mesh.rotateX(-0.1);
scene.add(mesh); // 图像加入到场景

// 创建效果合成器
const composer = new EffectComposer(renderer);

// 创建渲染（基础）通道并加入效果合成器
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

// 创建第一个效果：高亮描边通道并加入效果合成器（三个参数：渲染二维向量、场景、相机）
const outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
outlinePass.visibleEdgeColor.set(0xFFD700); // 描边颜色（缺省默认白色）
outlinePass.edgeThickness = 2; // 描边厚度
outlinePass.edgeStrength = 5; // 描边光亮强度
outlinePass.selectedObjects = ; // 描边作用对象
composer.addPass(outlinePass); // 描边效果通道加入到后期效果合成器

// 创建第二个效果：老电影胶片颗粒
const filmPass = new FilmPass();
composer.addPass(filmPass);

// 动画
const animate = () => {
requestAnimationFrame(animate);
const delta = clock.getDelta();
mesh.rotation.y -= delta / 3;

outlinePass.pulsePeriod = delta === 0 ? 0 : 2; // 描边闪烁
composer.render(); // 后期合成效果

};

window.onresize = () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(pa.offsetWidth, pa.offsetHeight);
}

pa.onclick = () => {
clock.running ? clock.stop() : clock.start();
const audio = document.getElementById('audio');
const videos = document.querySelectorAll('video');
const Img = document.getElementById('Img');
const dan = document.getElementById('dan');

if (audio.paused) {
   audio.play();
   videos.forEach(v => v.play());
   Img.style.opacity = '0.9';
   image.play();
} else {
   audio.pause();
   videos.forEach(v => v.pause());
   Img.style.opacity = '0';
   image.stop();
}
};
animate();
</script><script>
var lrc = `感觉 - 张靓颖 (Jane Zhang)
词：张靓颖
曲：崔迪
编曲：康友韦
看春天到来
融化的冰雪灌溉绿色的一切
你给我的爱百合的气味
弥漫了整个世界
最温柔的语言
萦绕在耳边
On and on and on and on
因为这种感觉特别
就是这种感觉对你的思念
这感觉那么自然不能停止
去感觉每一秒的新鲜我都能感觉
爱你就是如此的简单Only love
这感觉一天一天想更用心去感觉
放大每个细节让我能感觉
你的心跳是否跟着我 Baby

阳光温暖着
慵懒的山丘靠在你胸口做梦
蓝蓝的清澈倒映着云朵
也映出我的快乐
下着雨的晴天
浪漫的情节
Around around around around
因为这种感觉特别
就是这种感觉对你的思念

这感觉那么自然不能停止
去感觉每一秒的新鲜我都能感觉
爱你就是如此的简单Only love
这感觉一天一天想更用心去感觉
放大每个细节让我能感觉
你的心跳是否跟着我 Baby
这感觉那么自然不能停止
去感觉每一秒的新鲜我都能感觉
爱你就是如此的简单Only love
这感觉一天一天想更用心去感觉
放大每个细节让我能感觉
你的心跳是否跟着我 Baby
这感觉
`;
let lrcArr = lrc.split('\n');
let result = [];
doms = {
audio: document.querySelector("#audio"),
ul: document.querySelector("#ul"),
container: document.querySelector(".lrc")
}
// 将歌词数组转成由对象组成的数组，对象有time和word两个属性（为了方便操作）
for (let i = 0; i < lrcArr.length; i++) {
let line = lrcArr.trim();
if (!line) continue;

let separatorIndex = line.indexOf(']');
if (separatorIndex === -1) continue;

let timePart = line.substring(1, separatorIndex);
let lyric = line.substring(separatorIndex + 1) || '';

result.push({
   time: parseTime(timePart),
   word: lyric.trim() || ' '
});
}
// 将tiem转换为秒的形式
function parseTime(lrcTime) {
lrcTimeArr = lrcTime.split(":")
return +lrcTimeArr * 60 + +lrcTimeArr;
}
// 获取当前播放到的歌词的下标
function getIndex() {
let Time = doms.audio.currentTime;
for (let i = 0; i < result.length; i++) {
   if (result.time > Time) {
         return i - 1;
   }
}
}
// 创建歌词列表
function createElements() {
let frag = document.createDocumentFragment();
for (let i = 0; i < result.length; i++) {
   let li = document.createElement("li");
   li.innerText = result.word;
   frag.appendChild(li);
}
doms.ul.appendChild(frag);
}
createElements();
let containerHeight = doms.container.clientHeight;
let liHeight = doms.ul.children.clientHeight;
let minOffset = 0;
let maxOffset = doms.ul.clientHeight - containerHeight;
function setOffset() {
let index = getIndex();
let offset = liHeight * index - containerHeight / 2 + liHeight / 2;
if (offset < minOffset) {
   offset = minOffset;
};
if (offset > maxOffset) {
   offset = maxOffset;
};
doms.ul.style.transform = `translateY(-${offset}px)`;
// 清除之前的active
let li = doms.ul.querySelector(".active")
if (li) {
   li.classList.remove("active");
}
// 为当前所唱到的歌词添加active
li = doms.ul.children;
if (li) {
   li.classList.add("active");
}
};
doms.audio.addEventListener("timeupdate", setOffset);
function createElements() {
let frag = document.createDocumentFragment();
for (let i = 0; i < result.length; i++) {
   let li = document.createElement("li");
   li.innerText = result.word || ' ';
   frag.appendChild(li);
}
doms.ul.appendChild(frag);
}

if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
   if (this.storeCanvas) {
         // 移除存储的canvas
         this.storeCanvas.parentElement.removeChild(this.storeCanvas);
         this.storeCanvas = null;
         // 透明度还原
         image.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 image= document.getElementById("dan");
</script>
</body>
</html>

马黑黑 发表于 2025-6-7 23:35

{:4_199:}

杨帆发表于 2025-6-7 23:45

马黑黑发表于 2025-6-7 23:35

谢谢老师鼓励，请多指教{:4_190:}

梦江南 发表于 2025-6-8 07:22

马黑黑发表于 2025-6-7 23:35

黑黑老师，您也太晚了，早点休息啊！

梦江南 发表于 2025-6-8 07:23

杨帆发表于 2025-6-7 23:45
谢谢老师鼓励，请多指教

欣赏佳作，您也太晚了！

马黑黑 发表于 2025-6-8 07:45

梦江南发表于 2025-6-8 07:22
黑黑老师，您也太晚了，早点休息啊！

谢谢提醒

马黑黑 发表于 2025-6-8 07:47

杨帆发表于 2025-6-7 23:45
谢谢老师鼓励，请多指教

{:4_191:}

樵歌发表于 2025-6-8 10:29

养眼，在饱眼下福！太唯美了。。

樵歌发表于 2025-6-8 10:29

创作愉快！{:4_190:}

梦油发表于 2025-6-8 10:42

有山有水才是最美的。

杨帆发表于 2025-6-8 10:48

梦江南发表于 2025-6-8 07:23
欣赏佳作，您也太晚了！

谢谢江南提醒，祝周末愉快{:4_204:}

杨帆发表于 2025-6-8 10:50

樵歌发表于 2025-6-8 10:29
创作愉快！

谢谢樵歌管理员观赏与鼓励，祝周末愉快{:4_191:}

杨帆发表于 2025-6-8 10:52

梦油发表于 2025-6-8 10:42
有山有水才是最美的。

是啊，人生美好一半是山水，谢谢梦油超版观赏与鼓励{:4_191:}

梦油发表于 2025-6-8 10:55

杨帆发表于 2025-6-8 10:52
是啊，人生美好一半是山水，谢谢梦油超版观赏与鼓励

杨帆朋友不客气。

辫子哥哥 发表于 2025-6-9 13:03

欣赏佳作{:4_199:}

杨帆发表于 2025-6-9 13:42

辫子哥哥发表于 2025-6-9 13:03
欣赏佳作

谢谢版主观赏与鼓励，祝兄弟愉快{:4_190:}

页: [1]

花潮论坛's Archiver

《感觉》 - 张靓颖 — 学习马老师帖《一个人的龟兹》