网站首页 › ┫特效音画┣ › 【漫步鼠标特效】冰笺挽歌/素村 一鹿向北/赠帖:云笛

云端漫步 发表于 2025-6-1 13:59:49

【漫步鼠标特效】冰笺挽歌/素村 一鹿向北/赠帖:云笛

<style>
#mydiv {
    margin: 0 0 0 calc(50% - 901px);
    display: grid;
    place-items: center;
    width: 1600px;
    height: 800px;
    top: 130px;
    background: lightblue url('https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/mm.jpg') no-repeat center/cover;
    box-shadow: 3px 3px 4px #000;
    user-select: none;
    overflow: hidden;
    position: relative;
    z-index: 3;
}
#vid1 {
    position: absolute;
    width: 100%;
    height: 110%;
    top: -80px;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 4;
    opacity: .15;
}
#vid2 {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: luminosity;
    -webkit-mask: linear-gradient(to bottom, transparent, transparent, transparent, red);
    z-index: 2;
    opacity: .95;
}

/* 雪花样式 */
.snowflake {
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    animation: fall linear infinite;
    z-index: 5;
}

@keyframes fall {
    0% {
      top: -10px;
    }
    100% {
      top: 100%;
    }
}

/* 彩色雪花样式 */
.colorful-snowflake {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    pointer-events: none;
    animation: fall linear infinite;
    z-index: 5;
}
</style>

<div id="mydiv">
    <video id="vid1" src="https://img.tukuppt.com/video_show/2418175/01/04/62/614ade273f6d1.mp4" autoplay loop muted></video>
    <video id="vid2" src="https://img.tukuppt.com/video_show/2475824/00/01/72/5b492fae7af99.mp4" autoplay loop muted></video>
</div>

<script>
// 获取图片容器
const container = document.getElementById('mydiv');
const containerRect = container.getBoundingClientRect();

// 生成晶体飘雪效果（限制在容器内）
function createSnowflake() {
    const snowflake = document.createElement('div');
    snowflake.classList.add('snowflake');
   
    // 计算容器内随机位置
    const leftPos = Math.random() * containerRect.width;
    snowflake.style.left = leftPos + 'px';
   
    // 随机雪花大小和透明度
    const size = Math.random() * 5 + 5; // 5-10px
    snowflake.style.width = `${size}px`;
    snowflake.style.height = `${size}px`;
    snowflake.style.opacity = Math.random() * 0.8 + 0.2; // 0.2-1.0
   
    // 随机下落速度
    const duration = Math.random() * 10 + 5; // 5-15秒
    snowflake.style.animationDuration = `${duration}s`;
   
    // 随机水平漂移
    const drift = (Math.random() - 0.5) * 200; // -100px到100px
    snowflake.style.transform = `translateX(${drift}px)`;
   
    container.appendChild(snowflake);

    setTimeout(() => {
      snowflake.remove();
    }, duration * 1000);
}

// 初始时创建一些雪花
for (let i = 0; i < 30; i++) {
    setTimeout(createSnowflake, i * 200);
}

// 持续创建雪花
setInterval(createSnowflake, 300);

// 鼠标拖动彩色飘雪效果（仅在容器内生效）
container.addEventListener('mousemove', (event) => {
    // 计算鼠标在容器内的相对位置
    const rect = container.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
   
    // 创建彩色雪花
    const colorfulSnowflake = document.createElement('div');
    colorfulSnowflake.classList.add('colorful-snowflake');
    colorfulSnowflake.style.left = `${x}px`;
    colorfulSnowflake.style.top = `${y}px`;
   
    // 随机颜色
    const hue = Math.random() * 360;
    const saturation = Math.random() * 40 + 60; // 60-100%
    const lightness = Math.random() * 20 + 70; // 70-90%
    colorfulSnowflake.style.backgroundColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
   
    // 随机大小和透明度
    const size = Math.random() * 6 + 4; // 4-10px
    colorfulSnowflake.style.width = `${size}px`;
    colorfulSnowflake.style.height = `${size}px`;
    colorfulSnowflake.style.opacity = Math.random() * 0.7 + 0.3; // 0.3-1.0
   
    // 随机下落速度
    const duration = Math.random() * 8 + 4; // 4-12秒
    colorfulSnowflake.style.animationDuration = `${duration}s`;
   
    container.appendChild(colorfulSnowflake);

    setTimeout(() => {
      colorfulSnowflake.remove();
    }, duration * 1000);
});

// 窗口大小变化时更新容器位置
window.addEventListener('resize', () => {
    containerRect = container.getBoundingClientRect();
});
</script>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=3046743&auto=1&height=66"></iframe>

云端漫步 发表于 2025-6-1 13:59:58

滑滑图彩色雪花飘落

玫の玫 发表于 2025-6-1 14:17:41

欣赏漫步老师精彩的音画作品，
兔兔很有艺术感，
祝漫步老师创作愉快，
云笛收礼开心，
也祝大家双节快乐！

绿蔷薇 发表于 2025-6-1 14:58:17

好魅惑的女子，图图有些哥特的味道，水纹的动态很逼真~~~

绿蔷薇 发表于 2025-6-1 14:58:47

漫步老师制作辛苦~~~{:1_153:}

欧阳风刀 发表于 2025-6-4 21:50:41

挺有特色的特效作品，哥特风很是吸引人。

欧阳风刀 发表于 2025-6-4 21:51:02

欣赏学习。:handshake

绿蔷薇 发表于 2025-6-5 14:15:51

薇没滑图
进来彩色雪花已在飘落了
{:S16:}

绿蔷薇 发表于 2025-6-5 14:16:14

继续欣赏漫步老师的美图图~~{:S01:}

查看完整版本: 【漫步鼠标特效】冰笺挽歌/素村 一鹿向北/赠帖:云笛