|
|
楼主 |
发表于 2023-5-16 18:48
|
显示全部楼层
本帖最后由 起个网名好难 于 2023-5-16 20:24 编辑
- <style type="text/css">
- .photo {
- width: 1200px;
- height: 730px;
- position: absolute;top:0px; left:0px;z-index: 300;
- filter:contrast(120%)brightness(100%);-webkit-mask-image: radial-gradient(black 30% ,transparent 70%);
- animation: round 48s infinite;
- opacity: 0;
- }
- @keyframes round {
- 0% {opacity: 0;filter:hue-rotate(360deg)}
- 10% {opacity: 1;}
- 18% {opacity: 0;}
- }
- img:nth-child(8) {animation-delay: 42s;}
- img:nth-child(7) {animation-delay: 36s;}
- img:nth-child(6) {animation-delay: 30s;}
- img:nth-child(5) {animation-delay: 24s;}
- img:nth-child(4) {animation-delay: 18s;}
- img:nth-child(3) {animation-delay: 12s;}
- img:nth-child(2) {animation-delay: 6s;}
- #baiBox {
- margin: auto;
- width: 800px;
- text-align: center;
- font-family:微软简中圆;
- font-size: 2.5rem;
- font-weight: bold;
- color: #f46ff6;
- transform-origin: top;
- animation: yao 1.0s linear infinite alternate;
- position:absolute;left:80px;top:50px;
- }
- @keyframes yao {
- from{ transform: perspective(800px) rotatex(30deg); }
- to { transform: perspective(800px) rotatex(-30deg); }
- }
- .tit { position: relative;width: 500px;height: 30px;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }
- #papa {
- width: 1200px;height: 710px;position:relative; --state:paused;
- box-shadow: 0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;
- overflow:hidden;border-radius:1%;display:grid; place-items:center;
- margin-top:10px;margin-LEFT:-310px;
- }
- #vio {position:absolute;left:-20px;top:-50px;background:#000 ;width:1400px; height: 830px; }
- </style>
- <div id="papa">
- <video src="https://img.tukuppt.com/video_show/2475824/00/07/96/5d1418a498afe.mp4" autoplay muted loop="" id="vio"></video>
- <img src="https://z3.ax1x.com/2021/08/26/hujGMd.gif" style="position:absolute; height: 70px; top:450px; left:100px;">
- <img alt="" class="photo" src="https://up.enterdesk.com/edpic_source/87/b7/71/87b7712fe9ab16a3b15420249d95a9eb.jpg" />
- <img alt="" class="photo" src="https://up.enterdesk.com/edpic_source/ce/04/80/ce0480157c26ac11456651275d2319b1.jpg" />
- <img alt="" class="photo" src="https://up.enterdesk.com/edpic_source/41/79/7f/41797fb16ae692961074b67d038d427d.jpg" />
- <img alt="" class="photo" src="https://up.enterdesk.com/edpic_source/fb/48/84/fb4884a8a3ab031506723d4143b31ada.jpg" />
- <img alt="" class="photo" src="https://up.enterdesk.com/edpic_source/aa/30/e6/aa30e6ff43a7714fc8e1be242262814a.jpg" />
- <img alt="" class="photo" src="https://up.enterdesk.com/edpic_source/bd/a8/3c/bda83c680840ea57d707e7c8ad4c2d18.jpg" />
- <img alt="" class="photo" src="https://up.enterdesk.com/edpic_source/d1/ed/56/d1ed569b2aacc8dc5d48174ffa9761f5.jpg" />
- <img alt="" class="photo" src="https://up.enterdesk.com/edpic_source/aa/15/81/aa15812ba8240a70d7e091452a99c47c.jpg" />
- <css-doodle grid="16" id="fFloat">
- :doodle {
- @size: 1150px 680px;
- }
- position: absolute;
- left: @r(255)%;
- top: -10%;
- :after {
- position: absolute;
- content: '@p(爱你, ♬, ♪, ♩, ♫, ∮, ✲, ❉, ❤, 爱, ☺, ☀, ★, ☆,love, ❄)';
- color:#fb52f9;
- font-size: @r(15, 25)px;
- }
- animation: fall 40s @r(-6, 36)s infinite var(--state);
- @keyframes fall {
- from { transform: rotate(0deg) translate(0px); }
- to { transform: rotate(@r(-250,160)deg) translate(-1500px); }
- }
- </css-doodle>
- <css-doodle id="mplayer">
- :doodle {
- @grid: 2 / 500px 100px;
- color: var(--color);
- bottom: 70px;
- z-index: 999;
- --prog: 0%;
- --size: 60px;
- --ttmsg1: '00:00';
- --ttmsg2: '00:00';
- --color: #ff0000;
- position:absolute;
- }
- /* 时间信息 : 左 */
- @nth(1) {@place: 5% 100%; :after { content: var(--ttmsg1); } }
- /* 控制器 */
- @nth(2) {
- @size: 60px;
- @shape: windmill;
- @place: 50% 35%;
- background: var(--color);
- animation: rot 6s infinite linear var(--state);
- }
- /* 时间信息 : 右 */
- @nth(3) {
- @place: 95% 100%;
- :after { content: var(--ttmsg2); }
- }
- /* 进度条 */
- @nth(4) {
- @place: 50% 80%;
- @size: 100% 2px;
- background: Silver;
- display: grid;
- place-items: center start;
- :before {
- content: '';
- width: var(--prog);
- height: 100%;
- background: var(--color);
- }
- }
- @keyframes rot { to { transform: rotate(1turn); } }
- </css-doodle>
- <css-doodle id="lrc">
- :doodle {
- @size: auto 3.5em;
- bottom: 10px;
- --geci: "花潮lrc在线";
- --motion: cover2;
- --tt: 1s;
- position:absolute;
- }
- /* 单元格两个伪元素显示lrc歌词 */
- display: grid;
- place-items: center start;
- :before, :after {
- content: var(--geci);
- color: snow; /* 歌词底色 */
- font: bold 2.4em sans-serif;
- text-shadow: 1px 1px 1px #000;
- white-space: pre;
- }
- :after {
- position: absolute;
- width: 0;
- color: #fb52f9; /* 同步歌词颜色 */
- overflow: hidden;
- animation: var(--motion) var(--tt) linear forwards var(--state);
- }
- @keyframes cover1 { from { width: 0; } to { width: 100%; } }
- @keyframes cover2 { from { width: 0; } to { width: 100%; } }
- </css-doodle>
- <div id="baiBox">
- <div class="tit">
- <span style="color:#fb52f9;"><span style="font-size:32px;">《红尘酒世人醉》（伦巴）</span>
- <span style="color:#3d46f7;"><span style="font-size:20px;"> - 张奥妮</span>
- </div></div>
- <div style="position:absolute;bottom:10px;right:50px;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
- <p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:26px;"> 亦是金在线音乐 </span></span></span></p></div>
- <audio id="aud" src="https://www.kumeiwp.com/sub/filestores/2023/05/16/9a1f99f4addfe8d1db1d2bb4bb78be10.mp3" autoplay loop></audio>
- </div>
- <script>
- (function() {
- let script = document.createElement('script');
- script.src = 'https://www.huachaowang.com/css-doodle.min.js';
- document.head.appendChild(script);
- let slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
- let lrcAr = [
- [0.00,"《红尘酒世人醉》（伦巴）",4.0],
- [4.00,"作曲：康兵辉",4.0],
- [7.00,"编曲：晓枫",3.0],
- [10.00,"演唱：张奥妮",3.0],
- [13.00,"歌词编辑：亦是金",3.0],
- [16.00,"●●●●●●",2.0],
- [18.05,"走过千山 走过万水",4.0],
- [22.09,"走到天涯古道听风吹",4.5],
- [27.03,"看过花开 看过花飞",4.0],
- [31.08,"看过有人为花独憔悴",4.5],
- [36.03,"不问谁错 不问谁对",4.0],
- [40.07,"不问谁将痴迷心换碎",4.0],
- [45.02,"多少所谓 多少无谓",4.0],
- [49.06,"都是一笑了之作结尾",4.0],
- [54.00,"红尘酒 世人醉",4.0],
- [58.03,"有人斟来有人陪",4.0],
- [62.09,"牵着肝 扯着肺",4.0],
- [67.03,"也要饮下这一杯",4.0],
- [71.08,"红尘酒 世人醉",4.0],
- [76.02,"谁还了谁一滴泪",4.0],
- [80.07,"爱几回 恨几回",4.0],
- [84.10,"才能尝够情滋味",5.5],
- [90.00,"●●●●●●",17.0],
- [107.04,"不问谁错 不问谁对",4.0],
- [111.08,"不问谁将痴迷心换碎",4.0],
- [116.02,"多少所谓 多少无谓",4.0],
- [120.06,"都是一笑了之作结尾",4.0],
- [125.01,"红尘酒 世人醉",4.0],
- [129.05,"有人斟来有人陪",4.0],
- [134.00,"牵着肝 扯着肺",4.0],
- [138.03,"也要饮下这一杯",4.0],
- [142.09,"红尘酒 世人醉",4.0],
- [147.02,"谁还了谁一滴泪",4.0],
- [151.08,"爱几回 恨几回",4.0],
- [156.01,"才能尝够情滋味",5.0],
- [161.02,"●●●●●●",17.0],
- [178.05,"走过千山 走过万水",4.0],
- [182.09,"走到天涯古道听风吹",4.0],
- [187.04,"看过花开 看过花飞",4.0],
- [191.08,"看过有人为花独憔悴",4.0],
- [196.03,"不问谁错 不问谁对",4.0],
- [200.07,"不问谁将痴迷心换碎",4.0],
- [205.02,"多少所谓 多少无谓",4.0],
- [209.06,"都是一笑了之作结尾",4.0],
- [214.00,"红尘酒 世人醉",4.0],
- [218.04,"有人斟来有人陪",4.0],
- [222.10,"牵着肝 扯着肺",4.0],
- [227.03,"也要饮下这一杯",4.0],
- [231.09,"红尘酒 世人醉",4.0],
- [236.01,"谁还了谁一滴泪",4.0],
- [240.08,"爱几回 恨几回",4.0],
- [245.00,"才能尝够情滋味",5.0],
- [250.03,"●●●●●●",17.0],
- [267.05,"不问谁错 不问谁对",4.0],
- [271.08,"不问谁将痴迷心换碎",4.0],
- [276.03,"多少所谓 多少无谓",4.0],
- [280.07,"都是一笑了之作结尾",4.0],
- [285.02,"红尘酒 世人醉",4.0],
- [289.05,"有人斟来有人陪",4.0],
- [294.01,"牵着肝 扯着肺",4.0],
- [298.04,"也要饮下这一杯",4.0],
- [302.09,"红尘酒 世人醉",4.0],
- [307.02,"谁还了谁一滴泪",4.0],
- [311.08,"爱几回 恨几回",4.0],
- [316.01,"才能尝够情滋味",4.0],
- [320.07,"红尘酒 世人醉",4.0],
- [325.01,"有人斟来有人陪",4.0],
- [329.06,"牵着肝 扯着肺",4.0],
- [333.09,"也要饮下这一杯",4.0],
- [338.04,"红尘酒 世人醉",4.0],
- [342.09,"谁还了谁一滴泪",4.0],
- [347.04,"爱几回 恨几回",4.0],
- [351.08,"才能尝够情滋味",4.0],
- [356.04,"爱几回 恨几回",4.0],
- [360.07,"才能尝够情滋味",5.0],
- [365.07,"-- 谢谢欣赏 --",22.0],
- [387.05,"",],
- ];
- let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
- let calcKey = () => {for (j = 0;j < lrcAr.length;j++) {if (aud.currentTime <= lrcAr[j][0]) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);showLrc(time);};
- let mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused') ) : (papa.style.setProperty('--state','running'));
- let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr[mKey][1] + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
- aud.addEventListener('play', mState, false);
- aud.addEventListener('pause', mState, false);
- aud.addEventListener('seeked', () => calcKey());
- aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr[j][0]) {cKey = j;if (mKey === j) showLrc(lrcAr[j][2]);else continue;}}mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration-aud.currentTime)}'`);mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`);});
- mplayer.onclick = () => {if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();if(clickIdx === 2) aud.currentTime = progChg;};
- mplayer.onmousemove = (e) => {let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mplayer.offsetWidth, hh = mplayer.offsetHeight;clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);mplayer.style.cursor = cursors[clickIdx];if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;};
- })();
- </script>
|
|
发表于 2023-5-16 18:47
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-5-16 18:53
发表于 2023-5-16 19:25
