【漫步特效】爱的纪念/致我亲爱的朋友们
本帖最后由 云端漫步 于 2025-9-12 12:20 编辑 <br /><br /><style>#papa {
margin: 150px 0 10px calc(50% - 980px);
width: 1800px;
height: 900px;
background:
url('http://kkshan.com/data/attachment/forum/202509/12/044410h5emt8mwbei8btof.jpg') no-repeat center/cover;
background-blend-mode: darken;
box-shadow: 3px 3px 20px #000;
position: relative;
overflow: hidden;
z-index: 1;
}
#papa:hover {
background-blend-mode: overlay;
}
#canv {
display: block;
position: absolute;
right:230px;
bottom:50px;
transform: scale(0.65);
cursor: pointer;
opacity: .96;
}
#vid1 {
position: absolute;
width: 450px;
height: 450px;
opacity: .7;
top: 50%;
left: 45%;
transform: translate(-50%, -50%);
object-fit: cover;
border-radius: 50%;
mix-blend-mode: screen;
pointer-events: none;
z-index: 12;
}
#vid2 {
position: absolute;
width: 112%;
height: 100%;
opacity: .14;
object-fit: cover;
mix-blend-mode: screen;
pointer-events: none;
}
/* 滚动文字样式 - 已改为红色 */
.scrolling-text-container {
position: absolute;
top: 30px;
left: 0;
width: 100%;
overflow: hidden;
white-space: nowrap;
z-index: 20; /* 确保文字在最上层 */
}
.scrolling-text {
display: inline-block;
font-size: 36px;
font-weight: bold;
color: #ff0000; /* 红色 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
padding: 10px 0;
animation: scroll-left 30s linear infinite;
}
@keyframes scroll-left {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
</style>
<div id="papa">
<!-- 滚动文字容器 -->
<div class="scrolling-text-container">
<div class="scrolling-text">
致我亲爱的朋友们：名字不分前后：一鹿向北,风晴雪,雨声,令狐冲,花简静,姚云裳,淥の詶,玫の玫,向荣S,泪红颜,愫怡,轻舞若芸,落字秋风,
</div>
</div>
<video id="vid1" src="https://link.hhtjim.com/163/5364985.mp4" autoplay loop muted></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/2418175/00/08/28/5d1c4447b1401.mp4" autoplay loop muted></video>
<canvas id="canv" width="200" height="200"></canvas>
<audio id="aud" src=""></audio>
</div>
<script>
(function() {
let rotDeg = 0, prgDeg = 0, raf;
let ctx = canv.getContext('2d');
ctx.lineWidth = 10;
ctx.lineCap = 'round';
let gradient = ctx.createLinearGradient(0, 0, 200, 200);
gradient.addColorStop(0, 'DarkKhaki');
gradient.addColorStop(.5, 'orange');
gradient.addColorStop(1, 'White');
let img = new Image();
img.onload = () => mkProg();
img.src = 'https:/f.svg';
let mkProg = () => {
ctx.clearRect(0, 0, 200, 200);
//111
ctx.strokeStyle = '#FFA500';
ctx.beginPath();
ctx.arc(100, 100, 90, 0, 360 * Math.PI/180);
ctx.stroke();
//222
ctx.save();
ctx.strokeStyle = gradient;
ctx.beginPath();
ctx.arc(100, 100, 90, 0, prgDeg * Math.PI/180);
ctx.stroke();
ctx.restore();
//333
ctx.save();
ctx.translate(100, 100);
ctx.rotate(rotDeg * Math.PI/180);
ctx.translate(-100, -100);
ctx.drawImage(img, 20, 20, 160, 160);
ctx.restore();
rotDeg = (rotDeg + 1) % 360;
raf = aud.paused ? cancelAnimationFrame(raf) : requestAnimationFrame(mkProg);
};
let mState = () => {
aud.paused
? (papa.style.setProperty('--state','paused'), vid1.pause(), vid2.pause())
: (papa.style.setProperty('--state','running'),vid1.play(),vid2.play());
// draw(); // 注释掉避免
};
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
aud.onpause = aud.onplaying = () => mkProg();
aud.onseeking = () => raf = cancelAnimationFrame(raf);
aud.ontimeupdate = () => prgDeg = aud.currentTime * 360 / aud.duration;
canv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
<br><br><br><br><br>
<audio style="width:1px;height:1px;" controls="controls" autoplay="autoplay" loop="loop" src="https://link.hhtjim.com/163/34341351.mp3">
欣赏漫步老师美作，
色彩斑斓的背景上音符跃动，
左侧男子专注弹钢琴，
右侧女子姿态优雅，
中间的演奏画面更添艺术氛围。
{:1_154:} 多彩且布满音符的背景里，
中间圆形画面呈现的演奏场景，
传递出浓厚的艺术与爱意。
欣赏点赞！ 欣赏老师美作，
感谢精彩分享，
感谢给大家带来美滴享受！
祝创作愉快，
天天好心情！ 听乐赏图，真是美美哒！ 期待老师更多的精彩呈现，开心每一天！ 这是生日答谢帖吗~~~{:S03:} 这是一份浪漫的爱的纪念，明艳的色彩、丰富的视频画面，再配上温馨的钢琴旋律，非常治愈人心~~ 漫步老师粉棒的制作，辛苦~~~{:1_153:} 欣赏漫步老师的精美特效，辛苦了{:1_153:}
页:
[1]
2