云端漫步单图利用CSS 实现音画滤镜动画｛CSS11张图｝,音画教程,纳兰音画网,音画设计分享诗词朗诵音乐欣赏播放器设计论坛 - Bbs.CnzV.cC

醉美水芙蓉 发表于 2026-7-20 22:41:20

云端漫步单图利用CSS 实现音画滤镜动画｛CSS11张图｝

<div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_452670">
    不少朋友都偏爱单图音画制作，只是单图画面单薄、视觉层次单一，看着容易单调乏味，给你几种改善思路： 
一、画面分层丰富（不用多图叠加） 
1用叠加动态图装饰素材和视频点缀单图。 
在原图底层不动，上层加叠轻透元素（即动态图和视频）：飘落花瓣、细雨星光、朦胧云雾、浮动光斑， 
缓慢循环飘动，静图立刻有流动氛围感。 
2  用实现音画滤镜动画遮罩动效 
百叶窗渐显、渐变虚化边框、缓慢放大缩小轻微缩放等等，给静态画面增加动态节奏。 
二、搭配文字特效提升层次感 
用分段文字逐行淡入、缓慢上浮、微光描边，文字在主图上面中错开运动节奏，弥补单图内容不足。 
三、配色与背景衬托 
主图下方铺低透明度纯色 / 渐变底图，四周做暗角虚化，拉开空间感；避免整张画面一片平铺无深浅。等等效果。 
大家都爱单图简约干净，只是单一画面缺少层次，少了几分灵动。朋友们把自己以前做的单图利用以下代码 
集11张做一个滤镜动画。毎张图宽高要一样。同时图输出不要超过900k。否则轮播会很卡。只要換上图和音乐与熊猫视频就行。 
下面这代码，<div class="blockcode"><div id="code_EmM"><ol><li><style> 
<li>#stage { 
<li>    margin: 160px 0 30px calc(50% - 900px); 
<li>    display: grid; 
<li>    place-items: center; 
<li>    width: 1700px; 
<li>    height: 850px; 
<li>    background: lightblue url('https://644220.freep.cn/644220/3/rr1.jpg') no-repeat center/cover; 
<li>    box-shadow: 3px 3px 20px #000; 
<li>    user-select: none; 
<li>    overflow: hidden; 
<li>    position: relative; 
<li>    z-index: 1; 
<li>} 
<li>#light-effect { 
<li>    position: absolute; 
<li>    width: 130%; 
<li>    height: 130%; 
<li>    object-fit: cover; 
<li>    pointer-events: none; 
<li>    mix-blend-mode: screen; 
<li>    mask: linear-gradient(to top right, red 88%, transparent 0); 
<li>    -webkit-mask: linear-gradient(to top right, red 88%, transparent 0); 
<li>    z-index: 6; 
<li>    opacity: .33; 
<li>} 
<li>.model-img { 
<li>    position: absolute; 
<li>    width: 100%; 
<li>    height: 100%; 
<li>    object-fit: cover; 
<li>    opacity: 0; 
<li>    transition: opacity 1s ease-in-out; 
<li>    z-index: 2; 
<li>} 
<li>/* Animation Keyframes */ 
<li>@keyframes shakeIn {0%{transform:translateX(-50px) rotate(-5deg);opacity:0}50%{transform:translateX(20px) rotate(3deg)}100%{transform:translateX(0) rotate(0);opacity:1}} 
<li>@keyframes zoomIn {0%{transform:scale(0.5);opacity:0}100%{transform:scale(1);opacity:1}} 
<li>@keyframes blinds {0%{height:0;opacity:0}100%{height:100%;opacity:1}} 
<li>@keyframes fadeIn {0%{opacity:0}100%{opacity:1}} 
<li>@keyframes rotateIn {0%{transform:rotate(-360deg) scale(0.5);opacity:0}100%{transform:rotate(0) scale(1);opacity:1}} 
<li>@keyframes slideUp {0%{transform:translateY(100%);opacity:0}100%{transform:translateY(0);opacity:1}} 
<li>@keyframes slideDown {0%{transform:translateY(-100%);opacity:0}100%{transform:translateY(0);opacity:1}} 
<li>@keyframes rotateEnter {0%{transform:rotate(180deg) scale(0.5);opacity:0}100%{transform:rotate(0) scale(1);opacity:1}} 
<li>@keyframes horizontalTwist {0%{transform:skewX(30deg) scale(0.8);opacity:0}100%{transform:skewX(0) scale(1);opacity:1}} 
<li>@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}} 
<li>@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}} 
<li>@keyframes rollIn {0%{transform:translateX(-100%) rotate(-120deg);opacity:0}100%{transform:translateX(0) rotate(0);opacity:1}} 
<li>@keyframes rippleIn {0%{clip-path:circle(0% at center);opacity:0}100%{clip-path:circle(150% at center);opacity:1}} 
<li>@keyframes waveIn {0%{transform:translateX(-100%) skewX(20deg);opacity:0}60%{transform:translateX(20%) skewX(-5deg)}100%{transform:translateX(0) skewX(0);opacity:1}} 
<li>@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}} 
<li>@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}} 
<li>@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}} 
<li>@keyframes flashBang {0%{filter:brightness(5) contrast(3);opacity:0}50%{filter:brightness(3) contrast(2)}100%{filter:brightness(1) contrast(1);opacity:1}} 
<li>@keyframes radialWipe {0%{clip-path:circle(0% at center);opacity:0}100%{clip-path:circle(150% at center);opacity:1}} 
<li>@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}} 
<li>@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}} 
<li>@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)}} 
<li>@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)}} 
<li>@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)}} 
<li>@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}} 
<li>/* Animation Classes */ 
<li>.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} 
<li></style> 
<li></head> 
<li><body> 
<li><div id="stage"> 
<li>    <audio id="catwalk-audio" src="https://music.163.com/song/media/outer/url?id=5281125.mp3" autoplay loop></audio> 
<li>    <video id="light-effect" src="https://img2.tukuppt.com/video_show/1863507/00/13/37/5df209000de64.mp4" autoplay loop muted></video> 
<li>    <img class="model-img" src="https://644220.freep.cn/644220/3/rr1.jpg" alt="Model 1"> 
<li>    <img class="model-img" src="https://644220.freep.cn/644220/3/rr2.jpg" alt="Model 2"> 
<li>    <img class="model-img" src="https://644220.freep.cn/644220/3/rr3.jpg" alt="Model 3"> 
<li>    <img class="model-img" src="https://644220.freep.cn/644220/3/rr4.jpg" alt="Model 4"> 
<li>    <img class="model-img" src="https://644220.freep.cn/644220/3/rr5.jpg" alt="Model 5"> 
<li>    <img class="model-img" src="https://644220.freep.cn/644220/3/rr6.jpg" alt="Model 6"> 
<li>    <img class="model-img" src="https://644220.freep.cn/644220/3/rr7.jpg" alt="Model 7"> 
<li>    <img class="model-img" src="https://644220.freep.cn/644220/3/rr8.jpg" alt="Model 8"> 
<li>    <img class="model-img" src="https://644220.freep.cn/644220/3/rr9.jpg" alt="Model 9"> 
<li>    <img class="model-img" src="https://644220.freep.cn/644220/3/rr10.jpg" alt="Model 10"> 
<li>    <img class="model-img" src="https://644220.freep.cn/644220/3/rr11.jpg" alt="Model 11"> 
<li></div> 
<li><script> 
<li>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']; 
<li>const images = document.querySelectorAll('.model-img'); 
<li>let currentIndex = 0; 
<li>const interval = 6; 
<li> 
<li>function showImage(index) { 
<li>    images.forEach(img => { 
<li>        img.style.opacity = '0'; 
<li>        img.className = 'model-img'; 
<li>    }); 
<li>    const currentImg = images; 
<li>    currentImg.classList.add(animations); 
<li>    currentImg.style.opacity = '1'; 
<li>} 
<li> 
<li>showImage(0); 
<li> 
<li>setInterval(() => { 
<li>    currentIndex = (currentIndex + 1) % images.length; 
<li>    showImage(currentIndex); 
<li>}, interval * 1000); 
<li> 
<li>window.onload = () => { 
<li>    const audio = document.getElementById('catwalk-audio'); 
<li>    audio.play().catch(e => { 
<li>        console.log('Audio autoplay blocked. Click to play:', e); 
<li>        document.body.addEventListener('click', () => audio.play(), { once: true }); 
<li>    }); 
<li>}; 
<li></script> 
<li></ol></div>复制代码</div></td></tr></table>

klxf 发表于 7 天前

漂亮的滤镜动画，谢谢分享

页: [1]

纳兰音画网's Archiver

云端漫步单图利用CSS 实现音画滤镜动画｛CSS11张图｝