【漫步特效】夕阳醉了TO 风晴雪 一鹿向北
<title>全屏音画效果</title><style>
#mydiv {
margin: 150px 0 30px calc(50% - 1000px);
display: grid;
place-items: center;
width: 1700px;
height: 850px;
background: lightblue url('https://644220.freep.cn/644220/aa/eiu.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 92%, transparent 0);
z-index: 2;
opacity: 0.30;
}
#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;
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;
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/%E5%A4%95%E9%98%B3.mp3 " autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/00/5b502e0c3a99a.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/aa/2ee.gif" alt="">
<img id="overlay-image" src="https://644220.freep.cn/644220/aa/tiK.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>
</body> 夕阳西下鸟儿归巢的美丽场景，画面质感，动画效果灵动。 欣赏漫步兄新作。问好。:handshake {:1_150:}夕阳红，鸟儿在飞翔 漂亮特效，制作逼真细腻 画面渲染真美 图意完美诠释主题，意境满满 欣赏漫步精美佳作{:1_150:} 好质感的图图，夕阳的美景，房舍、远山、云海、树影，给人安静的感觉~~~ 鸟儿自由飞翔，特效很灵动呢，蛐蛐配的也好听~~{:9_285:} 问好漫步老师，制作辛苦，谢谢带来的精彩，祝送礼收礼的都开心~~~{:9_272:} 欣赏漫步老师美作，感谢精彩分享，感谢给大家带来美滴享受！祝创作愉快，天天好心情！ 橘红霞光漫过天际，他们并肩坐着，看夕阳把云朵染成温柔的模样。
页:
[1]
2