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

醉美水芙蓉

不少朋友都偏爱单图音画制作，只是单图画面单薄、视觉层次单一，看着容易单调乏味，给你几种改善思路： 一、画面分层丰富（不用多图叠加） 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('https://644220.freep.cn/644220/3/rr1.jpg') 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="https://music.163.com/song/media/outer/url?id=5281125.mp3" autoplay loop></audio>     <video id="light-effect" src="https://img2.tukuppt.com/video_show/1863507/00/13/37/5df209000de64.mp4" autoplay loop muted></video>     <img class="model-img" src="https://644220.freep.cn/644220/3/rr1.jpg" alt="Model 1">     <img class="model-img" src="https://644220.freep.cn/644220/3/rr2.jpg" alt="Model 2">     <img class="model-img" src="https://644220.freep.cn/644220/3/rr3.jpg" alt="Model 3">     <img class="model-img" src="https://644220.freep.cn/644220/3/rr4.jpg" alt="Model 4">     <img class="model-img" src="https://644220.freep.cn/644220/3/rr5.jpg" alt="Model 5">     <img class="model-img" src="https://644220.freep.cn/644220/3/rr6.jpg" alt="Model 6">     <img class="model-img" src="https://644220.freep.cn/644220/3/rr7.jpg" alt="Model 7">     <img class="model-img" src="https://644220.freep.cn/644220/3/rr8.jpg" alt="Model 8">     <img class="model-img" src="https://644220.freep.cn/644220/3/rr9.jpg" alt="Model 9">     <img class="model-img" src="https://644220.freep.cn/644220/3/rr10.jpg" alt="Model 10">     <img class="model-img" src="https://644220.freep.cn/644220/3/rr11.jpg" 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> 复制代码