云端漫步 发表于 2025-7-18 15:59:04

【漫步特效】让你感受我的爱

<BR><BR><BR><BR><BR><BR><BR><BR>
<style>
#mydiv {
    margin: 30px 0 30px calc(50% - 800px);
    display: grid;
    place-items: center;
    width: 1800px;
    height: 900px;
    background: lightblue url('https://s21.ax1x.com/2025/07/15/pV1GTVe.jpg') no-repeat center/cover;
    box-shadow: 3px 3px 20px #000;
    user-select: none;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
#vid {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    -webkit-mask: linear-gradient(to top right, red 88%, transparent 0);   
    z-index: 2;
    opacity: 0.65; /* 降低视频透明度 */
}
#flying-plane {
    position: absolute;
    left: 100px; /* 左距值，可调整 */
    top: 80px;   /* 顶距值，可调整 */
    width: 200px; /* 飞机图宽度，可调整 */
    height: auto; /* 保持图片比例 */
    z-index: 3; /* 确保飞机显示在视频上方 */
    animation: fly 20s linear infinite; /* 飞机飞行动画 */
}

@keyframes fly {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    45% {
      transform: translate(1300px, 300px);
      opacity: 0.9;
    }
    46% {
      transform: translate(1300px, 300px);
      opacity: 0;
    }
    47% {
      transform: translate(-200px, 600px);
      opacity: 0;
    }
    48% {
      transform: translate(-200px, 600px);
      opacity: 0.9;
    }
    100% {
      transform: translate(1600px, 0);
      opacity: 1;
    }
}

#flying-dove {
    position: absolute;
    right: -150px; /* 初始位置在右侧外部 */
    top: 300px;    /* 初始垂直位置 */
    width: 120px;/* 和平鸽宽度 */
    height: auto;/* 保持图片比例 */
    z-index: 3;    /* 确保显示在视频上方 */
    animation: flyDove 18s linear infinite; /* 动画持续时间 */
    transform-origin: center; /* 设置变换原点 */
}

/* 修正后的和平鸽飞行动画 */
@-webkit-keyframes flyDove {
    0% {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
      opacity: 1;
    }
    25% {
      -webkit-transform: translate(-450px, -100px);
      transform: translate(-450px, -100px);
      opacity: 0.9;
    }
    50% {
      -webkit-transform: translate(-900px, 50px);
      transform: translate(-900px, 50px);
      opacity: 0.9;
    }
    75% {
      -webkit-transform: translate(-1350px, -50px);
      transform: translate(-1350px, -50px);
      opacity: 0.9;
    }
    100% {
      -webkit-transform: translate(-1800px, 0);
      transform: translate(-1800px, 0);
      opacity: 0;
    }
}

@keyframes flyDove {
    0% {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
      opacity: 1;
    }
    25% {
      -webkit-transform: translate(-450px, -100px);
      transform: translate(-450px, -100px);
      opacity: 0.9;
    }
    50% {
      -webkit-transform: translate(-900px, 50px);
      transform: translate(-900px, 50px);
      opacity: 0.9;
    }
    75% {
      -webkit-transform: translate(-1350px, -50px);
      transform: translate(-1350px, -50px);
      opacity: 0.9;
    }
    100% {
      -webkit-transform: translate(-1800px, 0);
      transform: translate(-1800px, 0);
      opacity: 0;
    }
}
</style>

<div id="mydiv">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=16435050" autoplay loop></audio>
    <video id="vid" src="https://video.shipin520.com/videos/17/36/71/b_KSyZ5ujXfz7R1567173671.mp4" autoplay loop muted></video>
    <img id="flying-plane" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/5/33.gif" alt="动态飞机">
    <img id="flying-dove" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/4/2ee.gif" alt="动态和平鸽">
</div>

云端漫步 发表于 2025-7-18 16:00:13

用UTF-8编程代码把动态无人机图与和平鸽放在帖内上下一根引导线曲线飞行。
这个曲线飞行在FLASH也可制作中画一根引导线也能实现曲线飞行。

绿蔷薇 发表于 2025-7-18 16:36:33

撒花花
问好漫步老师

玫の玫 发表于 2025-7-18 17:23:34

夜幕下的城市灯火辉煌，
高楼大厦闪烁着五彩霓虹，
勾勒出繁华都市的轮廓。
欣赏点赞！！

玫の玫 发表于 2025-7-18 17:24:16

车水马龙的街道上，
灯光交织成一条条光带，
仿佛城市流动的血脉，
彰显着活力。
画面中女子戴着宽檐帽和眼镜，
眼神沉静，
与繁华夜景相映，
似在思索着什么。

玫の玫 发表于 2025-7-18 17:24:52

俏皮的无人机图案增添了科技感，
让这幅都市夜景图多了几分现代气息。
为这喧嚣的都市夜景注入了一丝温柔与浪漫的情愫。

圊圊淥詶 发表于 2025-7-18 21:16:06

问好漫步老师，欣赏你的新作~~{:S15:}

圊圊淥詶 发表于 2025-7-18 21:16:49

好听好看，漫步老师辛苦了，周末快乐~~{:S06:}

欧阳风刀 发表于 2025-7-18 22:33:03

特效精彩，时尚科技范儿十足！

欧阳风刀 发表于 2025-7-18 22:33:37

欣赏学习！祝周末愉快！:handshake
页: [1] 2
查看完整版本: 【漫步特效】让你感受我的爱