【代码教程】单图利用CSS 实现音画滤镜动画｛CSS11张图｝

云端漫步 · 发表于昨天 20:26

不少朋友都偏爱单图音画制作，只是单图画面单薄、视觉层次单一，看着容易单调乏味，给你几种改善思路：
一、画面分层丰富（不用多图叠加）
1用叠加动态图装饰素材和视频点缀单图。
在原图底层不动，上层加叠轻透元素（即动态图和视频）：飘落花瓣、细雨星光、朦胧云雾、浮动光斑，
缓慢循环飘动，静图立刻有流动氛围感。
2 用实现音画滤镜动画遮罩动效
百叶窗渐显、渐变虚化边框、缓慢放大缩小轻微缩放等等，给静态画面增加动态节奏。
二、搭配文字特效提升层次感
用分段文字逐行淡入、缓慢上浮、微光描边，文字在主图上面中错开运动节奏，弥补单图内容不足。
三、配色与背景衬托
主图下方铺低透明度纯色 / 渐变底图，四周做暗角虚化，拉开空间感；避免整张画面一片平铺无深浅。等等效果。
大家都爱单图简约干净，只是单一画面缺少层次，少了几分灵动。朋友们把自己以前做的单图利用以下代码
集11张做一个滤镜动画。毎张图宽高要一样。同时图输出不要超过900k。否则轮播会很卡。只要換上图和音乐与熊猫视频就行。
下面这代码，

<style>
#stage {
margin: 160px 0 30px calc(50% - 900px);
display: grid;
place-items: center;
width: 1700px;
height: 850px;
background: lightblue url('[color=Red]https://644220.freep.cn/644220/3/rr1.jpg[/color]') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 1;
}
#light-effect {
position: absolute;
width: 130%;
height: 130%;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
mask: linear-gradient(to top right, red 88%, transparent 0);
-webkit-mask: linear-gradient(to top right, red 88%, transparent 0);
z-index: 6;
opacity: .33;
}
.model-img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
z-index: 2;
}
/* Animation Keyframes */
@keyframes shakeIn {0%{transform:translateX(-50px) rotate(-5deg);opacity:0}50%{transform:translateX(20px) rotate(3deg)}100%{transform:translateX(0) rotate(0);opacity:1}}
@keyframes zoomIn {0%{transform:scale(0.5);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes blinds {0%{height:0;opacity:0}100%{height:100%;opacity:1}}
@keyframes fadeIn {0%{opacity:0}100%{opacity:1}}
@keyframes rotateIn {0%{transform:rotate(-360deg) scale(0.5);opacity:0}100%{transform:rotate(0) scale(1);opacity:1}}
@keyframes slideUp {0%{transform:translateY(100%);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes slideDown {0%{transform:translateY(-100%);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes rotateEnter {0%{transform:rotate(180deg) scale(0.5);opacity:0}100%{transform:rotate(0) scale(1);opacity:1}}
@keyframes horizontalTwist {0%{transform:skewX(30deg) scale(0.8);opacity:0}100%{transform:skewX(0) scale(1);opacity:1}}
@keyframes bounceIn {0%{transform:scale(0.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(0.9)}100%{transform:scale(1);opacity:1}}
@keyframes flipIn {0%{transform:perspective(400px) rotateY(90deg);opacity:0}40%{transform:perspective(400px) rotateY(-10deg)}70%{transform:perspective(400px) rotateY(10deg)}100%{transform:perspective(400px) rotateY(0);opacity:1}}
@keyframes rollIn {0%{transform:translateX(-100%) rotate(-120deg);opacity:0}100%{transform:translateX(0) rotate(0);opacity:1}}
@keyframes rippleIn {0%{clip-path:circle(0% at center);opacity:0}100%{clip-path:circle(150% at center);opacity:1}}
@keyframes waveIn {0%{transform:translateX(-100%) skewX(20deg);opacity:0}60%{transform:translateX(20%) skewX(-5deg)}100%{transform:translateX(0) skewX(0);opacity:1}}
@keyframes spiralIn {0%{transform:scale(0) rotate(0deg);opacity:0}50%{transform:scale(1.2) rotate(180deg)}100%{transform:scale(1) rotate(360deg);opacity:1}}
@keyframes gridReveal {0%{background-size:20px 20px;background-image:linear-gradient(to right,rgba(0,0,0,0.8) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,0.8) 1px,transparent 1px);opacity:0}50%{background-size:20px 20px;background-image:linear-gradient(to right,rgba(0,0,0,0.2) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,0.2) 1px,transparent 1px)}100%{background-image:none;opacity:1}}
@keyframes pixelReveal {0%{image-rendering:pixelated;transform:scale(0.1);opacity:0}50%{image-rendering:pixelated;transform:scale(0.5)}100%{image-rendering:auto;transform:scale(1);opacity:1}}
@keyframes flashBang {0%{filter:brightness(5) contrast(3);opacity:0}50%{filter:brightness(3) contrast(2)}100%{filter:brightness(1) contrast(1);opacity:1}}
@keyframes radialWipe {0%{clip-path:circle(0% at center);opacity:0}100%{clip-path:circle(150% at center);opacity:1}}
@keyframes diagonalWipe {0%{clip-path:polygon(0 0,0 0,0 100%,0% 100%);opacity:0}100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1}}
@keyframes colorSeparation {0%{filter:hue-rotate(0deg) sepia(1) saturate(3);opacity:0}50%{filter:hue-rotate(180deg) sepia(0.5) saturate(2)}100%{filter:hue-rotate(0deg) sepia(0) saturate(1);opacity:1}}
@keyframes glitchScan {0%{opacity:0;transform:translateX(0)}20%{opacity:0.5;transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}100%{opacity:1;transform:translateX(0)}}
@keyframes starfieldIn {0%{transform:scale(0.3) rotate(0deg);opacity:0;filter:blur(10px)}50%{transform:scale(1.1) rotate(180deg);filter:blur(2px)}100%{transform:scale(1) rotate(360deg);opacity:1;filter:blur(0)}}
@keyframes liquidIn {0%{transform:scale(0.8) skew(10deg,10deg);opacity:0;filter:contrast(2)}50%{transform:scale(1.05) skew(-5deg,-5deg)}100%{transform:scale(1) skew(0,0);opacity:1;filter:contrast(1)}}
@keyframes paintIn {0%{clip-path:polygon(0 0,0 0,0 100%,0% 100%);opacity:0}100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1}}
/* Animation Classes */
.anim-shakeIn{animation:shakeIn 1.5s forwards}.anim-zoomIn{animation:zoomIn 1.5s forwards}.anim-blinds{animation:blinds 1.5s forwards}.anim-fadeIn{animation:fadeIn 1.5s forwards}.anim-rotateIn{animation:rotateIn 1.5s forwards}.anim-slideUp{animation:slideUp 1.5s forwards}.anim-slideDown{animation:slideDown 1.5s forwards}.anim-rotateEnter{animation:rotateEnter 1.5s forwards}.anim-horizontalTwist{animation:horizontalTwist 1.5s forwards}.anim-bounceIn{animation:bounceIn 1.5s forwards}.anim-flipIn{animation:flipIn 1.5s forwards}.anim-rollIn{animation:rollIn 1.5s forwards}.anim-rippleIn{animation:rippleIn 1.5s forwards}.anim-waveIn{animation:waveIn 1.5s forwards}.anim-spiralIn{animation:spiralIn 1.5s forwards}.anim-gridReveal{animation:gridReveal 1.5s forwards}.anim-pixelReveal{animation:pixelReveal 1.5s forwards}.anim-flashBang{animation:flashBang 1.5s forwards}.anim-radialWipe{animation:radialWipe 1.5s forwards}.anim-diagonalWipe{animation:diagonalWipe 1.5s forwards}.anim-colorSeparation{animation:colorSeparation 1.5s forwards}.anim-glitchScan{animation:glitchScan 1.5s forwards}.anim-starfieldIn{animation:starfieldIn 1.8s forwards}.anim-liquidIn{animation:liquidIn 1.6s forwards}.anim-paintIn{animation:paintIn 1.4s forwards}
</style>
</head>
<body>
<div id="stage">
<audio id="catwalk-audio" src="[color=Red]https://music.163.com/song/media/outer/url?id=5281125.mp3[/color]" autoplay loop></audio>
<video id="light-effect" src="[color=Red]https://img2.tukuppt.com/video_show/1863507/00/13/37/5df209000de64.mp4[/color]" autoplay loop muted></video>
<img class="model-img" src="[color=Red]https://644220.freep.cn/644220/3/rr1.jpg[/color]" alt="Model 1">
<img class="model-img" src="[color=Red]https://644220.freep.cn/644220/3/rr2.jpg[/color]" alt="Model 2">
<img class="model-img" src="[color=Red]https://644220.freep.cn/644220/3/rr3.jpg[/color]" alt="Model 3">
<img class="model-img" src="[color=Red]https://644220.freep.cn/644220/3/rr4.jpg[/color]" alt="Model 4">
<img class="model-img" src="[color=Red]https://644220.freep.cn/644220/3/rr5.jpg[/color]" alt="Model 5">
<img class="model-img" src="[color=Red]https://644220.freep.cn/644220/3/rr6.jpg[/color]" alt="Model 6">
<img class="model-img" src="[color=Red]https://644220.freep.cn/644220/3/rr7.jpg[/color]" alt="Model 7">
<img class="model-img" src="[color=Red]https://644220.freep.cn/644220/3/rr8.jpg[/color]" alt="Model 8">
<img class="model-img" src=[color=Red]"https://644220.freep.cn/644220/3/rr9.jpg[/color]" alt="Model 9">
<img class="model-img" src="[color=Red]https://644220.freep.cn/644220/3/rr10.jpg[/color]" alt="Model 10">
<img class="model-img" src="[color=Red]https://644220.freep.cn/644220/3/rr11.jpg[/color]" alt="Model 11">
</div>
<script>
const animations = ['anim-shakeIn','anim-zoomIn','anim-blinds','anim-fadeIn','anim-rotateIn','anim-slideUp','anim-slideDown','anim-rotateEnter','anim-horizontalTwist','anim-bounceIn','anim-flipIn','anim-rollIn','anim-rippleIn','anim-waveIn','anim-spiralIn','anim-gridReveal','anim-pixelReveal','anim-flashBang','anim-radialWipe','anim-diagonalWipe','anim-colorSeparation','anim-glitchScan','anim-starfieldIn','anim-liquidIn','anim-paintIn'];
const images = document.querySelectorAll('.model-img');
let currentIndex = 0;
const interval = 6;
function showImage(index) {
images.forEach(img => {
img.style.opacity = '0';
img.className = 'model-img';
});
const currentImg = images[index];
currentImg.classList.add(animations[index % animations.length]);
currentImg.style.opacity = '1';
}
showImage(0);
setInterval(() => {
currentIndex = (currentIndex + 1) % images.length;
showImage(currentIndex);
}, interval * 1000);
window.onload = () => {
const audio = document.getElementById('catwalk-audio');
audio.play().catch(e => {
console.log('Audio autoplay blocked. Click to play:', e);
document.body.addEventListener('click', () => audio.play(), { once: true });
});
};
</script>

复制代码

素心 · 发表于昨天 20:43

我已经跟学，交了作业，

玫の玫 · 发表于昨天 20:51

来学习漫步老师的【代码教程】单图利用CSS 实现音画滤镜动画｛CSS11张图｝
有时间套用一个~~

云端漫步 · 发表于昨天 21:02

玫の玫发表于 2026-7-20 20:51
来学习漫步老师的【代码教程】单图利用CSS 实现音画滤镜动画｛CSS11张图｝
有时间套用一个~~ ...

平时制好的图集成可套用代码发表。

绿蔷薇 · 发表于昨天 21:07

我喜欢简单~~
一个画面放一个FS足以~~

绿蔷薇 · 发表于昨天 21:08

漫步老师辛苦了，以后需要时来取代码~~

游侠 · 发表于 15 小时前

漫步好有公益心感谢并学习

圊圊淥詶 · 发表于 13 小时前

漫步老师辛苦，先存一下，有需要来学习~~

圊圊淥詶 · 发表于 13 小时前

绿蔷薇发表于 2026-7-20 21:07
我喜欢简单~~
一个画面放一个FS足以~~

一样一样，我们是懒吗？

念若莲 · 发表于 11 小时前

谢谢漫步老师分享，有需要来学习

【代码教程】单图利用CSS 实现音画滤镜动画｛CSS11张图｝

评分