【云荷六月同图】【漫步特效5】薄荷色夏天 TO姚云裳
本帖最后由 云端漫步 于 2026-6-9 19:50 编辑 <br /><br /><style>#mydiv {
margin: 130px 0 30px calc(50% - 800px);
display: grid;
place-items: center;
width: 1700px;
height: 850px;
top: 130px;
background: lightblue url('https://644220.freep.cn/644220/2/44r.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: 2.5;
opacity: 0.20;
}
#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: 0.35;
}
#overlay-png {
position: relative;
z-index: 5;
}
.rain-bubble {
position: absolute;
pointer-events: none;
z-index: 3;
border-radius: 100%;
opacity: 0.85;
filter: drop-shadow(0 0.5px 1px rgba(0,0,0,0.1));
}
@keyframes fall {
0% {
transform: translateY(0) translateX(0) rotate(0deg);
opacity: 0.7;
}
50% {
opacity: 0.9;
}
100% {
transform: translateY(850px) translateX(var(--sway)) rotate(360deg);
opacity: 0.5;
}
}
</style>
<div id="mydiv">
<div id="clouds-container"></div>
<div id="bubble-container"></div>
<video id="vid1" src="https://img2.tukuppt.com/video_show/2418175/00/08/19/5d19669feb961.mp4" autoplay loop muted></video>
<video id="vid2" src="https://img2.tukuppt.com/video_show/2629112/00/02/06/5b509c34df30f.mp4" autoplay loop muted></video>
<audio id="aud" src="https://ting9.yymp3.com/new27/kingstar12/2.mp3" autoplay loop>
</div>
<br><br><br><br><br><br><br><br>
<script>
window.addEventListener('load', function() {
const container = document.getElementById('mydiv');
if (!container) return;
const width = container.offsetWidth;
const height = container.offsetHeight;
function createBubble() {
const bubble = document.createElement('div');
bubble.className = 'rain-bubble';
const size = Math.random() * 3 + 3;
bubble.style.width = `${size}px`;
bubble.style.height = `${size * 2}px`;
bubble.style.left = `${Math.random() * width}px`;
bubble.style.top = `-${size * 2}px`;
const colors = [
'linear-gradient(180deg, #74aa55, #4b7a2c)',
'linear-gradient(180deg, #699b4c, #446f27)',
'linear-gradient(180deg, #5e8c43, #3d6422)'
];
bubble.style.background = colors;
const sway = (Math.random() - 0.5) * 20;
const duration = 10 + Math.random() * 5;
bubble.style.setProperty('--sway', `${sway}px`);
bubble.style.animation = `fall ${duration}s linear forwards`;
container.appendChild(bubble);
setTimeout(() => bubble.remove(), duration * 1000);
}
for (let i = 0; i < 22; i++) {
setTimeout(createBubble, i * 280);
}
setInterval(createBubble, 200);
});
</script>
@姚云裳 晚饭后制一帖送你。 【云荷六月同图】漫步特效第5帖。 漫步老师又一同图作品，辛苦了~~ 风格清新治愈，充满夏日的浪漫氛围感~~ 开满野花的草地、湖岸木桥与树屋，这背景更换得漂亮
落叶、风车、蝴蝶特效，令图图更灵动、更梦幻~~~~~ 一份温馨的礼物
云裳老师收礼开心
{:9_269:} 画面以薄荷绿、浅蓝、淡粉为主色调，打造出 “薄荷色” 的夏日氛围，和歌曲的清爽调性高度契合。{:9_285:} 湖畔、木桥、草地、大树、散落的花瓣，
共同构建出一个清新自然的夏日场景，
和歌词里 “雨后彩虹、数学课本、夏天草稿” 的校园回忆感相呼应。
{:1_154:}{:1_155:} 欣赏漫步老师精美特效，图意唯美灵动，欣赏学习