【漫步特效】再次孤独
<style>#mydiv {
margin: 150px 0 10px calc(50% - 900px);
width: 1800px;
height: 900px;
background: lightblue url('http://kkshan.com/data/attachment/forum/202509/02/132615leeersewv4qqarp3.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #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: .85;
}
#vid2 {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
mix-blend-mode: luminosity;
-webkit-mask: linear-gradient(to bottom, transparent 0%, transparent 30%, red 100%);
z-index: 2;
opacity: .55;
}
#overlay-png {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 5;
}
#bubble-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
pointer-events: none;
}
.bubble {
position: absolute;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
animation: float-up linear infinite;
bottom: 0;
}
@keyframes float-up {
0% { transform: translateY(0) scale(0.2); opacity: 0; }
10% { opacity: 1; transform: translateY(-50px) scale(1); }
90% { opacity: 1; }
100% { transform: translateY(-100vh) scale(0.3); opacity: 0; }
}
#clouds-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30%;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
.cloud {
position: absolute;
background: white;
border-radius: 50%;
box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
animation: moveCloud linear forwards;
transform: scaleX(1.8);
}
.cloud::before, .cloud::after {
content: '';
position: absolute;
background: white;
border-radius: 50%;
}
.cloud::before {
width: 50%;
height: 50%;
top: -15%;
left: 15%;
}
.cloud::after {
width: 40%;
height: 40%;
top: 20%;
right: 10%;
}
@keyframes moveCloud {
0% { transform: translateX(0) scaleX(1.8); opacity: 0; }
5%, 95% { opacity: 1; }
100% { transform: translateX(1900px) scaleX(1.8); opacity: 0; }
}
</style>
<div id="mydiv">
<div id="clouds-container"></div>
<div id="bubble-container"></div>
<video id="vid1" src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d04564c32f7.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>
<img id="overlay-png" src="http://kkshan.com/data/attachment/forum/202509/02/213956qo11q7g2bm52ffh5.png" alt="PNG图片" onerror="this.style.display='none';">
</div>
<audio id="aud" src="https://ting8.yymp3.com/new27/zrcx/8.mp3" autoplay loop></audio>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 气泡效果
const bubbleContainer = document.getElementById('bubble-container');
const containerRect = bubbleContainer.getBoundingClientRect();
const width = containerRect.width;
const totalBubbles = 200;
function createBubble() {
const bubble = document.createElement('div');
bubble.classList.add('bubble');
const size = Math.random() * 12 + 3;
bubble.style.width = bubble.style.height = `${size}px`;
bubble.style.left = `${Math.random() * width}px`;
const duration = (20 - size) * 0.5;
bubble.style.animationDuration = `${duration}s`;
bubble.style.animationDelay = `${Math.random() * 10}s`;
bubble.style.opacity = Math.random() * 0.4 + 0.2;
bubbleContainer.appendChild(bubble);
setTimeout(() => bubble.remove(), (duration + parseFloat(bubble.style.animationDelay)) * 1000);
}
// 初始创建气泡并定时生成新气泡
for (let i = 0; i < totalBubbles; i++) createBubble();
setInterval(createBubble, 300);
// 云朵效果
const cloudsContainer = document.getElementById('clouds-container');
const minSpawnInterval = 1500;
const maxSpawnInterval = 3000;
const layers = [
{ size: , speed: , y: , opacity: , blur: },
{ size: , speed: , y: , opacity: , blur: },
{ size: , speed: , y: , opacity: , blur: }
];
function createCloud() {
const cloud = document.createElement('div');
cloud.classList.add('cloud');
const layer = layers;
// 随机大小
const size = layer.size + Math.random() * (layer.size - layer.size);
cloud.style.width = `${size}px`;
cloud.style.height = `${size * 0.5}px`;
// 位置和样式
cloud.style.left = `-${size}px`;
cloud.style.top = `${layer.y + Math.random() * (layer.y - layer.y)}px`;
cloud.style.opacity = layer.opacity + Math.random() * (layer.opacity - layer.opacity);
cloud.style.filter = `blur(${layer.blur + Math.random() * (layer.blur - layer.blur)}px)`;
// 动画
const duration = layer.speed + Math.random() * (layer.speed - layer.speed);
cloud.style.animationDuration = `${duration}s`;
cloud.style.zIndex = layers.indexOf(layer) + 1;
cloudsContainer.appendChild(cloud);
setTimeout(() => cloud.remove(), duration * 1000);
}
// 持续生成云朵
function spawnClouds() {
createCloud();
const nextSpawn = minSpawnInterval + Math.random() * (maxSpawnInterval - minSpawnInterval);
setTimeout(spawnClouds, nextSpawn);
}
spawnClouds();
// 初始生成一批云朵
for (let i = 0; i < 5; i++) {
setTimeout(createCloud, i * 1000);
}
});
</script>
正常了 云端漫步 发表于 2025-9-4 14:11
正常了
漫步老师辛苦了~~~{:1_153:} 白云悠悠浮动，雨滴下落，溅起水泡，水面荡起细碎的涟漪。这特效带来的视觉太生动了~~~~{:4_123:} 钢琴叮咚，一声声，像心里那些说不出的情绪~~~ 蓝白云朵点缀的天空下，
海面泛着绿意，
游轮静静航行，
穿黑色吊带裙的女子撑着蓝伞，
仰头的姿态，
与 “要善待自己” 的文字相呼应，
尽显沉静与自我关怀。 澄澈的蓝天背景下，
云朵如棉絮般舒展，
海面绿意荡漾，
游轮悠然行驶，
黑裙女子撑着蓝伞，
仰头感受，
似在体会善待自己的深意。{:1_154:} 欣赏漫步老师精美的特效美图，~~ 漫步老师制作辛苦了哦，晚上好~~{:1_153:} 云飘，波漾，雨落生泡。这次动画动作全了。:lol
意境渲染十分精彩，把一份落寞的孤独呈现在眼前。
页:
[1]
2