【漫步特效】苍穹唤
<title>漫步特效全屏音画效果</title><style>
#mydiv {
margin: 150px 0 30px calc(50% - 1000px);
display: grid;
place-items: center;
width: 1800px;
height: 900px;
background: lightblue url('https://644220.freep.cn/644220/w/666.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: 130%;
height: 130%;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
-webkit-mask: linear-gradient(to top right, red 92%, transparent 0);
z-index: 2;
opacity: 0.17;
}
#flying-plane {
position: absolute;
left: 100px;
top: 80px;
width: 100px;
height: auto;
z-index: 3;
animation: fly 20s linear infinite;
}
@keyframes fly {
0% { transform: translate(0, 0); opacity: 1; }
45% { transform: translate(1300px, 230px); opacity: 0.9; }
46% { transform: translate(1300px, 230px); opacity: 0; }
47% { transform: translate(-200px, 530px); opacity: 0; }
48% { transform: translate(-200px, 530px); opacity: 0.9; }
100% { transform: translate(1600px, 70px); opacity: 1; }
}
#flying-dove {
position: absolute;
right: -75px;
top: 100px;
width: 110px; ：220px → 110px */
height: auto;
z-index: 3;
animation: flyDove 18s linear infinite;
transform-origin: center;
}
@-webkit-keyframes flyDove {
0% { transform: translate(0, 0); opacity: 1; }
25% { transform: translate(-750px, -50px); opacity: 0.9; }
50% { transform: translate(-900px, 0); opacity: 0.9; }
75% { transform: translate(-1350px, 0); opacity: 0.9; }
100% { transform: translate(-1800px, 50px); opacity: 0; }
}
@keyframes flyDove {
0% { transform: translate(0, 0); opacity: 1; }
25% { transform: translate(-450px, -50px); opacity: 0.9; }
50% { transform: translate(-900px, 0); opacity: 0.9; }
75% { transform: translate(-1350px, 0); opacity: 0.9; }
100% { transform: translate(-1800px, 50px); opacity: 0; }
}
.cloud {
position: absolute;
background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0.6));
border-radius: 50%;
filter: blur(15px);
z-index: 1;
}
@keyframes cloudRise {
0% {
top: 200px;
opacity: 0;
}
10% {
opacity: 0.9;
}
80% {
opacity: 0.9;
}
100% {
top: 30px; ：30 → 30px */
opacity: 0;
}
}
#overlay-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 4;
pointer-events: none;
}
#fullscreenBtn {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
padding: 12px 24px;
font-size: 18px;
color: white;
background-color: rgba(0, 0, 0, 0.5);
border: 2px solid white;
border-radius: 8px;
cursor: pointer;
user-select: none;
pointer-events: auto;
transition: all 0.3s ease;
}
#fullscreenBtn:hover {
background-color: rgba(0, 0, 0, 0.7);
transform: translateX(-50%) scale(1.05);
}
</style>
</head>
<body>
<div id="mydiv">
<button id="fullscreenBtn">进入全屏</button>
<div class="cloud" style="width: 180px; height: 100px; left: 15%; animation: cloudRise 6s linear infinite;"></div>
<div class="cloud" style="width: 220px; height: 120px; left: 35%; animation: cloudRise 5s linear infinite 0.5s;"></div>
<div class="cloud" style="width: 150px; height: 80px; left: 55%; animation: cloudRise 7s linear infinite 1s;"></div>
<div class="cloud" style="width: 200px; height: 110px; left: 75%; animation: cloudRise 8s linear infinite 1.5s;"></div>
<div class="cloud" style="width: 160px; height: 90px; left: 25%; animation: cloudRise 6.5s linear infinite 2s;"></div>
<div class="cloud" style="width: 190px; height: 100px; left: 45%; animation: cloudRise 7.5s linear infinite 2.5s;"></div>
<div class="cloud" style="width: 140px; height: 70px; left: 65%; animation: cloudRise 5.5s linear infinite 3s;"></div>
<audio id="aud" src="https://644220.freep.cn/644220/qq/54.mp3 " autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2405811/00/73/42/6095e864e212a.mp4" autoplay loop muted></video>
<img id="flying-plane" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/ee(1).gif" alt="-">
<img id="flying-dove" src="https://644220.freep.cn/644220/w/ee(1).gif" alt="">
<img id="overlay-image" src="https://644220.freep.cn/644220/w/46.png" alt="">
</div>
<script>
const myDiv = document.getElementById('mydiv');
const fullscreenBtn = document.getElementById('fullscreenBtn');
function isFullscreen() {
return !!document.fullscreenElement ||
!!document.webkitFullscreenElement ||
!!document.mozFullScreenElement ||
!!document.msFullscreenElement;
}
function updateFullscreenBtnText() {
fullscreenBtn.textContent = isFullscreen() ? '退出全屏' : '进入全屏';
}
function toggleFullscreen() {
if (isFullscreen()) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (myDiv.requestFullscreen) {
myDiv.requestFullscreen();
} else if (myDiv.webkitRequestFullscreen) {
myDiv.webkitRequestFullscreen();
} else if (myDiv.mozRequestFullScreen) {
myDiv.mozRequestFullScreen();
} else if (myDiv.msRequestFullscreen) {
myDiv.msRequestFullscreen();
}
}
}
document.addEventListener('fullscreenchange', updateFullscreenBtnText);
document.addEventListener('webkitfullscreenchange', updateFullscreenBtnText);
document.addEventListener('mozfullscreenchange', updateFullscreenBtnText);
document.addEventListener('MSFullscreenChange', updateFullscreenBtnText);
fullscreenBtn.addEventListener('click', toggleFullscreen);
</script>
沙发欣赏。漫步兄新春快乐。 风格大气磅礴，充满了东方神秘的意境。特效精彩，增强了作品的感染力。 欣赏学习。感谢漫步兄分享。:handshake 欣赏漫步老师美作，歌曲很好听！！{:1_154:} 极光如绿绸漫过苍穹，
将雪山之巅晕染成神秘的幻境，
连风都带着远古的回响。
欣赏点赞！
{:1_154:}{:1_154:} 雄鹰振翅划破天际，
是山巅最自由的歌者，
古寺隐于云雾深处，
红墙金顶在极光下若隐若现，
仿佛藏着千年的秘密与召唤。
{:1_150:} 整幅画面如一首磅礴的史诗，
将天地的辽阔、
生命的力量与信仰的虔诚，
都凝在了这极光雪山之间，
整体效果美美哒！ 很大气又神秘的感觉，配乐也很好听，真美！ 问好漫步老师，分享制作辛苦了，祝新年快乐{:S06:}