css动画 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! Archiver

论坛 › 欢乐水吧 › css动画

亚伦影音工作室 发表于 2026-9-11 21:46

css动画

<style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa{
margin: 10px 0 30px calc(50% - 680px);

width: 1286px;
height: 720px;
background:url(https://www.panurl.cn/view.php/a83cca429798d064c91bfa3bc14359f1.png)no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 1;--state: paused;
}

.slide-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 5;
overflow: hidden;
}

.slide {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
background-size: cover;
background-position: center;
animation: 72s infinite var(--state);
}

.slide1 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/c0ec493df4c14731482abe16d8e69eac.png');
animation-name: fade1;
animation-delay: 0s;
}
.slide2 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/02fedbbac83dda179428c3369e006e46.jpg');
animation-name: fade2;
animation-delay: 6s;
}
.slide3 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/95a504a731ddc3770f3a24519d3fa00a.png');
animation-name: fade3;
animation-delay: 12s;
}
.slide4 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/3d96192c342dbf0fcb2211dcbb4c116d.jpg');
animation-name: fade4;
animation-delay: 18s;
}
.slide5 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/175113b353e35a9e8422b4d2b1fa6d6b.jpg');
animation-name: fade5;
animation-delay: 24s;
}
.slide6 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/49b4f5138da37043e9b2651842d4dc6d.jpg');
animation-name: fade6;
animation-delay: 30s;
}
.slide7 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/1ce8560e0cf03da81e1ead81abe19d0c.jpg');
animation-name: fade7;
animation-delay: 36s;
}
.slide8 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e8546b5aaffb07791ed178d61e7cff7a.jpg');
animation-name: fade8;
animation-delay: 42s;
}
.slide9 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d8479e15a051125823083f4d4d362b98.jpg');
animation-name: fade9;
animation-delay: 48s;
}
.slide10 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7f2a8237ef017e2687f8f8ff2795b33d.jpg');
animation-name: fade10;
animation-delay: 54s;
}
.slide11 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/c13f2247989b826d3bf1af1c93dcf851.jpg');
animation-name: fade11;
animation-delay: 60s;
}
.slide12 {
background-image: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9c4aef5dba82acda1e5d9fad5c09bb4d.jpg');
animation-name: fade12;
animation-delay: 66s;
}
@keyframes fade1 {0% {
-webkit-transform-origin:left top;
-webkit-transform:rotate(-90deg)scale(1)translate(0%,0%);
opacity:1}
6% {
-webkit-transform-origin:left top;
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);
opacity:1}

12% {
-webkit-transform-origin:left top;
-webkit-transform:rotate(90deg)scale(1)translate(0%,0%);
opacity:0}
}
@keyframes fade2 {0% {
-webkit-transform-origin:right top;
-webkit-transform:rotate(90deg)scale(1)translate(0%,0%);
opacity:1}
6% {
-webkit-transform-origin:right top;
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);
opacity:1}

12% {
-webkit-transform-origin:right top;
-webkit-transform:rotate(-90deg)scale(1)translate(0%,0%);
opacity:0}
}
@keyframes fade3 {0% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(-90deg)scale(1)translate(0%,0%);
opacity:1}
6% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);
opacity:1}

12% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(90deg)scale(1)translate(0%,0%);
opacity:0}
}
@keyframes fade4{0% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(90deg)scale(1)translate(0%,0%);
opacity:1}
6% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);
opacity:1}

12% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(-90deg)scale(1)translate(0%,0%);
opacity:0}
}
@keyframes fade5 {0% {
-webkit-transform-origin:left;
-webkit-transform:rotateY(180deg)scale(1)translate(0%,0%);
opacity:1}
6% {
-webkit-transform-origin:left;
-webkit-transform:rotateY(0deg)scale(1)translate(0%,0%);
opacity:1}

12% {
-webkit-transform-origin:left;
-webkit-transform:rotateY(-180deg)scale(1)translate(0%,0%);
opacity:0}
}
@keyframes fade6 {0% {
-webkit-transform-origin:right;
-webkit-transform:rotateY(180deg)scale(1)translate(0%,0%);
opacity:1}
6% {
-webkit-transform-origin:right;
-webkit-transform:rotateY(0deg)scale(1)translate(0%,0%);
opacity:1}

12% {
-webkit-transform-origin:right;
-webkit-transform:rotateY(-180deg)scale(1)translate(0%,0%);
opacity:0}
}
@keyframes fade7{0% {
-webkit-transform-origin:top;
-webkit-transform:rotateX(180deg)scale(1)translate(0%,0%);
opacity:1}
6% {
-webkit-transform-origin:top;
-webkit-transform:rotateX(0deg)scale(1)translate(0%,0%);
opacity:1}

12% {
-webkit-transform-origin:top;
-webkit-transform:rotateX(-180deg)scale(1)translate(0%,0%);
opacity:0}
}
@keyframes fade8{0% {
-webkit-transform-origin:bottom;
-webkit-transform:rotateX(180deg)scale(1)translate(0%,0%);
opacity:1}
6% {
-webkit-transform-origin:bottom;
-webkit-transform:rotateX(0deg)scale(1)translate(0%,0%);
opacity:1}

12% {
-webkit-transform-origin:bottom;
-webkit-transform:rotateX(-180deg)scale(1)translate(0%,0%);
opacity:0}
}
@keyframes fade9 {0% {
-webkit-transform-origin:50% 0%;
-webkit-transform:rotate(5deg)scale(1)translate(0%,0%);
opacity:1}
1% {
-webkit-transform-origin:50% 0%;
-webkit-transform:rotate(-5deg)scale(1)translate(0%,0%);
opacity:1}
2% {
-webkit-transform-origin:50% 0%;
-webkit-transform:rotate(5deg)scale(1)translate(0%,0%);
opacity:1}
3% {
-webkit-transform-origin:50% 0%;
-webkit-transform:rotate(-5deg)scale(1)translate(0%,0%);
opacity:1}
8% {
-webkit-transform-origin:50% 0%;
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);
opacity:0}
}
@keyframes fade10 {0% {
-webkit-transform-origin:0% 50%;
-webkit-transform:rotate(5deg)scale(1)translate(0%,0%);
opacity:1}
1% {
-webkit-transform-origin:0% 50%;
-webkit-transform:rotate(-5deg)scale(1)translate(0%,0%);
opacity:1}
2% {
-webkit-transform-origin:0% 50%;
-webkit-transform:rotate(5deg)scale(1)translate(0%,0%);
opacity:1}
3% {
-webkit-transform-origin:0% 50%;
-webkit-transform:rotate(-5deg)scale(1)translate(0%,0%);
opacity:1}
8% {
-webkit-transform-origin:0% 50%;
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);
opacity:0}
}

@keyframes fade11{0% {
-webkit-transform-origin:100% 50%;
-webkit-transform:rotate(5deg)scale(1)translate(0%,0%);
opacity:1}
1% {
-webkit-transform-origin:100% 50%;
-webkit-transform:rotate(-5deg)scale(1)translate(0%,0%);
opacity:1}
2% {
-webkit-transform-origin:100% 50%;
-webkit-transform:rotate(5deg)scale(1)translate(0%,0%);
opacity:1}
3% {
-webkit-transform-origin:100% 50%;
-webkit-transform:rotate(-5deg)scale(1)translate(0%,0%);
opacity:1}
8% {
-webkit-transform-origin:100% 50%;
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);
opacity:0}
}

@keyframes fade12{0% {
-webkit-transform-origin:50% 100%;
-webkit-transform:rotate(5deg)scale(1)translate(0%,0%);
opacity:1}
1% {
-webkit-transform-origin:50% 100%;
-webkit-transform:rotate(-5deg)scale(1)translate(0%,0%);
opacity:1}
2% {
-webkit-transform-origin:50% 100%;
-webkit-transform:rotate(5deg)scale(1)translate(0%,0%);
opacity:1}
3% {
-webkit-transform-origin:50% 100%;
-webkit-transform:rotate(-5deg)scale(1)translate(0%,0%);
opacity:1}
8% {
-webkit-transform-origin:50% 100%;
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);
opacity:0}
}
.lrc {z-index:10;
   position: absolute;
   width: 100%;
   height: 60px; /* 只显示一行歌词高度 */
   top: 87%;
   left: 50%;
   transform: translate(-50%, -50%); /* 容器整体居中 */
   overflow: hidden;
   text-align: center;
}

.lrc #ul {filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
   width: 100%;
   padding: 0;
   list-style: none;
   transition: 0.1s all ease;
   margin: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.lrc #ul li {
   font-size: 46px;
   color: #000;
   font-family:"Ma Shan Zheng","STKaiti","SimHei", cursive, serif;
   font-weight:500;
   transition: 0.1s all ease;
   list-style-type: none;
   text-align: center;
   padding: 0 10px;
   height: 60px;
   line-height: 60px;
   cursor: pointer;
   white-space: nowrap; /* 防止歌词换行 */
}

.lrc #ul li span {
   margin: 0 8px;
   transform-origin: center center; /* x轴和y轴均以中心为原点 */
   transition: all 0.1s cubic-bezier(0.34, 1.56, 0.64, 1); /* 缓动函数让动画更自然 */
   display: inline-block; /* 确保transform-origin生效 */
}

.lrc #ul li span.active {
   font-family: "Ma Shan Zheng","STKaiti","SimHei", cursive, serif;
   font-weight: 500;
   font-size: 48px;
   color: red;
   transform: scale(1.2)rotate(-360deg); /* 缩放效果 */
}
#btnplay { top:10%; left:10%;z-index: 20;
display: block;position: absolute; transform: rotateY(180deg);
width: 250px; height: 250px;mix-blend-mode: difference;
background: url(https://pic.imgdb.cn/item/67502acbd0e0a243d4dd5ddc.png)no-repeat center/3250px 250px;
animation: heart-burst steps(13) 4s infinite var(--state);
}
@keyframes heart-burst {
0% {background-position: 0px 0;}
100% {background-position: -3250px 0;transform:rotateY(180deg)translate(-60%,80%)scale(1);}
}
#btnplaya { top:60%; left:70%;z-index: 20;
display: block;position: absolute; transform: rotateY(0deg);
width: 250px; height: 250px;mix-blend-mode: difference;
background: url(https://pic.imgdb.cn/item/67502acbd0e0a243d4dd5ddc.png)no-repeat center/3250px 250px;
animation: heart-bursta steps(13) 5s infinite var(--state);
}
@keyframes heart-bursta {
0% {background-position: 0px 0;}
100% {background-position: -3250px 0;transform:translate(-60%,-120%)scale(1);}
}

#fullscreen{border-radius: 4px;position: relative;
color:#eee;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 80;
font-size: 35px;font-family: "Ma Shan Zheng","STKaiti","SimHei", cursive, serif, "Microsoft YaHei", sans-serif;
border: none;
cursor: pointer;margin: 8px 5px;
}
</style>

<div id="papa">

<audio id="audio" src="https://www.panurl.cn/view.php/d8183cb6ddd05de0c3aaac3761a7c728.mp3" loop autoplay ></audio>

<div class="slide-container">
   <div class="slide slide1"></div>
   <div class="slide slide2"></div>
   <div class="slide slide3"></div>
   <div class="slide slide4"></div>
   <div class="slide slide5"></div>
   <div class="slide slide6"></div>
   <div class="slide slide7"></div>
   <div class="slide slide8"></div>
   <div class="slide slide9"></div>
   <div class="slide slide10"></div>
<div class="slide slide11"></div>
<div class="slide slide12"></div>
   </div>
<div id="fullscreen">全屏观赏</div>
<div class="lrc">
<ul id="ul"></ul>
   </div>
<divid="btnplay" ></div>
<divid="btnplaya" ></div>
</div>
<script>
let lrc = `转身又见秋-影子
词: 四毛
曲: 李勇军
编曲: 姜凯升
和声: 雪无影
后期: 鲁晓锋
月亮替我倒满酒
秋风陪我醉了一宿
都说这世上酒能解忧
我却喝到泪湿眼眸
相思最怕绕指柔
才下眉间却上心头
对你的思念覆水难收
醉了曾经醉了今秋
那日我转身又见秋
才知你在心中不曾走
灯火阑珊处不见你回首
寂寞最是黄昏后
那日我转身又见秋
却不见你曾经的温柔
片片的落叶都是我的愁
原来爱比不爱更难受
相思最怕绕指柔
才下眉间却上心头
对你的思念覆水难收
醉了曾经醉了今秋
那日我转身又见秋
才知你在心中不曾走
灯火阑珊处不见你回首
寂寞最是黄昏后
那日我转身又见秋
却不见你曾经的温柔
片片的落叶都是我的愁
原来爱比不爱更难受
那日我转身又见秋
才知你在心中不曾走
灯火阑珊处不见你回首
寂寞最是黄昏后
那日我转身又见秋
却不见你曾经的温柔
片片的落叶都是我的愁
原来爱比不爱更难受

`;
let lrcArr = lrc.split('\n');
   let result = [];
   var audio = document.querySelector("#audio"),
         ul = document.querySelector("#ul"),
         container = document.querySelector(".lrc");
   for (let i = 0; i < lrcArr.length; i++) {
         var lrcData = lrcArr.split(']');
         if (lrcData.length < 2) continue;
         var lrcTime = lrcData.substring(1);
         var words = lrcData.trim().split('');
         let lineWords = [];
         let startTime = parseTime(lrcTime);
         let wordDuration = (i < lrcArr.length - 1 && lrcArr.includes('[')) ?
            (parseTime(lrcArr.split(']').substring(1)) - startTime) / words.length : 0.5;
         words.forEach((word, index) => {
            lineWords.push({ time: startTime + index * wordDuration, text: word });
         });
         result.push(lineWords);
   }
function randomColor(){
const colors = ['#880000','#ffbb33','#00C851','#000078','#aa66cc','#ff8800','#ff33cc'];
return colors;
}
   function parseTime(lrcTime) {
         let lrcTimeArr = lrcTime.split(":");
         return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
   }

   function getIndex() {
         let time = audio.currentTime;
         for (let i = 0; i < result.length; i++) {
            if (result.time > time) return i - 1;
         }
         return result.length - 1;
   }

var __encode ='jsjiami.com',_a={}, _0xb483=["\x5F\x64\x65\x63\x6F\x64\x65","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x6F\x6A\x73\x6F\x6E\x2E\x63\x6F\x6D\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x6F\x62\x66\x75\x73\x63\x61\x74\x6F\x72\x2E\x68\x74\x6D\x6C"];(function(_0xd642x1){_0xd642x1]= _0xb483})(_a);var __Ox1264a5=["\x63\x72\x65\x61\x74\x65\x44\x6F\x63\x75\x6D\x65\x6E\x74\x46\x72\x61\x67\x6D\x65\x6E\x74","\x6C\x65\x6E\x67\x74\x68","\x6C\x69","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x73\x70\x61\x6E","\x74\x65\x78\x74\x43\x6F\x6E\x74\x65\x6E\x74","\x74\x65\x78\x74","\x74\x69\x6D\x65","\x64\x61\x74\x61\x73\x65\x74","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x66\x6F\x72\x45\x61\x63\x68","\x63\x6C\x69\x63\x6B","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x6C\x6F\x67","\u5220\u9664","\u7248\u672C\u53F7\uFF0C\x6A\x73\u4F1A\u5B9A","\u671F\u5F39\u7A97\uFF0C","\u8FD8\u8BF7\u652F\u6301\u6211\u4EEC\u7684\u5DE5\u4F5C","\x6A\x73\x6A\x69\x61","\x6D\x69\x2E\x63\x6F\x6D"];function createElements(){let _0x5404x2=document]();for(let _0x5404x3=0;_0x5404x3< result];_0x5404x3++){let _0x5404x4=document](__Ox1264a5);result]((_0x5404x5)=>{let _0x5404x6=document](__Ox1264a5);_0x5404x6]= _0x5404x5];_0x5404x6]]= _0x5404x5];_0x5404x4](_0x5404x6)});_0x5404x4](__Ox1264a5,()=>{return audio]= result]});_0x5404x2](_0x5404x4)};ul](_0x5404x2)}createElements();;;(function(_0x5404x7,_0x5404x8,_0x5404x9,_0x5404xa,_0x5404xb,_0x5404xc){_0x5404xc= __Ox1264a5;_0x5404xa= function(_0x5404xd){if( typeof alert!== _0x5404xc){alert(_0x5404xd)};if( typeof console!== _0x5404xc){console](_0x5404xd)}};_0x5404x9= function(_0x5404xe,_0x5404x7){return _0x5404xe+ _0x5404x7};_0x5404xb= _0x5404x9(__Ox1264a5,_0x5404x9(_0x5404x9(__Ox1264a5,__Ox1264a5),__Ox1264a5));try{_0x5404x7= __encode;if(!( typeof _0x5404x7!== _0x5404xc&& _0x5404x7=== _0x5404x9(__Ox1264a5,__Ox1264a5))){_0x5404xa(_0x5404xb)}}catch(e){_0x5404xa(_0x5404xb)}})({})
   createElements();

   let containerHeight = container.clientHeight;
   let liHeight = 60;
   let minOffset = 0;
   let maxOffset = ul.clientHeight - containerHeight;
   const visibleLines = 1;
   let prevIndex = -1;

   function setOffset() {
         let index = getIndex();
         if (index === -1) index = 0;

         let offset = Math.max(0, Math.min((index - Math.floor(visibleLines / 2)) * liHeight, maxOffset));
         ul.style.transform = `translateY(-${offset}px)`;

         if (prevIndex !== -1) {
            let prevLi = ul.children;
            if (prevLi) {
               prevLi.querySelectorAll('span.active').forEach(span => span.classList.remove('active'));
               prevLi.classList.remove('active');
            }
         }
         let currentLi = ul.children;
         if (currentLi) currentLi.classList.add('active');

         let currentTime = audio.currentTime;
         let currentLine = result;
         if (currentLine) {
            currentLine.forEach((wordObj, wordIndex) => {
               let span = currentLi.children;
               span.style.color = ul.style.color = randomColor();
               if (currentTime >= wordObj.time &&
                     (wordIndex === currentLine.length - 1 || currentTime < currentLine?.time)) {
                     span.classList.add('active');
               } else {
                     span.classList.remove('active');
               }
            });
            const currentLyric = currentLine.map(wordObj => wordObj.text).join('');
            if (!currentLyric) return;

            let charIndex = 0;
            for (let j = 0; j < currentLine.length; j++) {
               if (currentLine.time <= currentTime) {
                     charIndex = j + 1;
               }
            }

         }
prevIndex = index;
   }
audio.addEventListener("timeupdate", setOffset);

(function() {

   var mState = () => {papa.style.setProperty('--state', audio.paused ? 'paused' : 'running');

   };
audio.onplaying = audio.onpause = () => mState();
btnplaya.onclick =btnplay.onclick = () => audio.paused ? audio.play(): audio.pause();
})();

let fs = true;
   fullscreen.onclick = () => {
            fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
            fs = !fs;
   };

</script>

杨帆发表于 2026-9-11 23:42

新颖别致，好听好看，谢谢亚伦老师分享{:4_190:}

红影发表于 2026-9-12 07:23

漂亮的图片轮播效果。欣赏亚伦老师好帖{:4_199:}

梦油发表于 2026-9-12 10:41

欣赏亚伦精彩制作，祝福亚伦天天快乐。

老谟深虑 发表于 2026-9-12 18:47

欣赏老师佳作，学习了！

页: [1]

查看完整版本: css动画