父亲节快乐
本帖最后由 梦江南 于 2025-6-13 17:15 编辑 <br /><br /> <style>#papa {
--state: running;
margin: 30px 0;
left: calc(50% - 81px);
transform: translateX(-50%);
width:1400px;
height:750px;
aspect-ratio: 16/9;
background: url('https://cccimg.com/view.php/350f545f4ba692d9ba8dd622bf0956d0.jpeg') 0/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%;
object-fit: cover;
}
#pa {
width: 22%;
height: 22%;
left: 40%;
top: 20%;
cursor: pointer;
position: absolute;
overflow: hidden;
z-index: 10;
opacity: .5;
transition: 0.3s all ease;
}
#pa:hover {
transform: scale(1.1);
filter: drop-shadow(0 0 80px Gold);
}
#vid2 {
position: absolute;
width: 450px;
height: 440px;
left: 10.5%;
top: 13%;
object-fit: cover;
aspect-ratio: .8;
border: 2px solid #ccc;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3) inset;
border-radius: 50%;
mix-blend-mode: unset;
mask: radial-gradient(red 18%, red 2%, transparent);
-webkit-mask: radial-gradient(red 18%, red 2%, transparent);
z-index: 3;
opacity: .88;
}
#progress-bar {
height: 100%;
background: linear-gradient(90deg, #fa4354, #18f5f8);
width: 0;
transition: width 0.1s;
position: relative;
}
.time-info {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 14px;
font-family: Arial, sans-serif;
}
#current-time {
left: -50px;
}
#total-time {
right: -50px;
}
#bt {
color: #bff21c;
position: absolute;
left: 18%;
top: 3%;
font-size: 40px;
font-family: 华文宋体;
z-index: 1;
animation: yd 20s linear infinite var(--state);
filter: drop-shadow(#ffffff 1px 0 0)
drop-shadow(#ffffff 0 1px 0)
drop-shadow(#ffffff -1px 0 0)
drop-shadow(#ffffff 0 -1px 0);
}
@rakeyfmes yd {
40% {
opacity: 1;
left: 25%;
}
}
</style>
<div id="papa">
<div id="dt">
<img src="https://pic1.imgdb.cn/item/67564aedd0e0a243d4e015f5.gif" id="Img" style="mix-blend-mode: screen" alt=" "></div>
<svg id="bsvg" width="1400" height="750">
<rect x="0" y="0" width="100%" height="100%" rx="8" ry="5" fill="none" stroke="#60949090" stroke-width="8" stroke-dasharray="8 4">
<animate attributeName="stroke-dashoffset" from="0" to="-48" dur="2s" begin="0s" repeatCount="indefinite"/>
</rect>
</svg>
<video id="vid2" src="https://cccimg.com/view.php/df46550b42b060302647eccffa622ac4.mp4" loop muted autoplay></video>
<div id="bt">父亲节快乐</div>
<div id="pa" title="播放/暂停"></div>
<div id="progress">
<span id="current-time" class="time-info">00:00</span>
<div id="progress-bar"></div>
<span id="total-time" class="time-info">00:00</span>
</div>
<div class="lrc" id="dhgc">
<ul id="ul"></ul>
</div>
</div>
<audio id="audio" src="https://cccimg.com/view.php/b05ce2b1d45c868df2e0c375af5fef16.mp3" loop autoplay></audio>
<script type="module">
import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.min.js';
const scene = new THREE.Scene();
const clock = new THREE.Clock();
const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 3);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
const pa = document.getElementById('pa');
renderer.setSize(pa.offsetWidth, pa.offsetHeight);
pa.appendChild(renderer.domElement);
const textureLoader = new THREE.TextureLoader();
textureLoader.load(
'https://pic.imgdb.cn/item/65b75c8f871b83018a83e1c1.png',
(texture) => {
texture.colorSpace = THREE.SRGBColorSpace;
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(12, 8);
const ball = new THREE.Mesh(
new THREE.SphereGeometry(),
new THREE.MeshBasicMaterial({ map: texture, transparent: true })
);
scene.add(ball);
let angle = 0;
const animate = () => {
const delta = clock.getDelta();
angle += delta;
ball.rotation.y -= delta / 2;
camera.position.x = 1 * Math.cos(angle);
camera.position.y = 1 * Math.sin(angle);
camera.lookAt(0, 0, 0);
renderer.render(scene, camera);
requestAnimationFrame(animate);
};
animate();
},
undefined,
(error) => console.error('纹理加载失败:', error)
);
window.onresize = () => {
camera.aspect = pa.offsetWidth / pa.offsetHeight;
camera.updateProjectionMatrix();
renderer.setSize(pa.offsetWidth, pa.offsetHeight);
};
pa.onclick = () => {
const audio = document.getElementById('audio');
const videos = document.querySelectorAll('video');
const Img = document.getElementById('Img');
const bt = document.getElementById('bt');
const bsvg = document.getElementById('bsvg');
if (audio.paused) {
audio.play();
videos.forEach(v => v.play());
Img.style.opacity = '0.9';
bt.style.setProperty('--state', 'running');
bsvg.unpauseAnimations();
clock.start();
} else {
audio.pause();
videos.forEach(v => v.pause());
Img.style.opacity = '0';
bt.style.setProperty('--state', 'paused');
bsvg.pauseAnimations();
clock.stop();
}
};
</script><script>
</script> 借用杨帆老师的花儿开花儿朵朵的代码。谢谢！ 欣赏老师精彩美贴{:4_204:} 歌曲也好听，祝父亲节快乐！{:4_180:} 菲儿 发表于 2025-6-13 17:37
欣赏老师精彩美贴
问好菲儿老师，谢谢欣赏支持。{:4_187:} 菲儿 发表于 2025-6-13 17:38
歌曲也好听，祝父亲节快乐！
这是降央卓玛唱的，同祝父亲 节快乐！{:4_204:} 本帖最后由 杨帆 于 2025-6-13 19:04 编辑
梦江南 发表于 2025-6-13 17:18
借用杨帆老师的花儿开花儿朵朵的代码。谢谢！
很应景，谢谢江南友友精彩分享，一起学习，节日同乐{:4_187:} 好温暖的画面，很感人的制作。
欣赏江南好帖，同祝论坛朋友们父亲节快乐{:4_199:}{:4_177:} 谢谢梦江南朋友的美好祝福。 很感人的画面，祝福天下的父亲节日快乐！{:4_187:} 最温馨的场景，看了被感动得不轻呵。。。。。。。 歌曲选 得极好的！{:4_204:} 欣赏老师精美音乐帖！节日快乐！{:4_180:} 杨帆 发表于 2025-6-13 19:01
很应景，谢谢江南友友精彩分享，一起学习，节日同乐
谢谢杨帆老师欣赏支持，祝您父亲节快乐！{:4_204:} 红影 发表于 2025-6-13 19:04
好温暖的画面，很感人的制作。
欣赏江南好帖，同祝论坛朋友们父亲节快乐
早上问好影子，本来是加歌词的，加歌词代码不会，只好听了。
{:4_201:} 梦油 发表于 2025-6-13 19:11
谢谢梦江南朋友的美好祝福。
早上好，谢谢梦油欣赏支持，祝您父亲节快乐！{:4_204:} 小九 发表于 2025-6-13 19:19
很感人的画面，祝福天下的父亲节日快乐！
早上问好小九老师，谢谢欣赏支持，同祝天下的父亲节快乐！{:4_204:} 樵歌 发表于 2025-6-13 20:27
最温馨的场景，看了被感动得不轻呵。。。。。。。
早上问好樵歌老师，谢谢欣赏支持，祝您父亲节快乐！{:4_204:} 樵歌 发表于 2025-6-13 20:28
歌曲选 得极好的！
这首歌唱的歌手不少，我喜欢降央卓玛唱的，就选了她。 亦是金 发表于 2025-6-13 21:04
欣赏老师精美音乐帖！节日快乐！
早上问好亦是金老师，谢谢欣赏支持，祝您父亲节快乐！{:4_204:}
页:
[1]
2