红尘酒世人醉 to:《亦是金》网友
本帖最后由 起个网名好难 于 2024-6-6 10:56 编辑 <br /><br />原帖处不好展示帖子改动后的效果，故另开一帖在此。<br><br><meta name="referrer" content="never" />
<script>
//document.write('<script type="text/javascript" src="https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js"><\/script>');
</script>
<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 = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
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) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);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 + '"');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) {cKey = j;if (mKey === j) showLrc(lrcAr);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;if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;};
})();
</script>
本帖最后由 起个网名好难 于 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 = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
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) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);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 + '"');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) {cKey = j;if (mKey === j) showLrc(lrcAr);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;if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;};
})();
</script>
漂亮！醉赏。 还有代码，谢谢！我得空试试。 一斛珠 发表于 2023-5-16 18:53
漂亮！醉赏。
网友《亦是金》的帖子代码，只是略作调整。
谢谢你的欣赏，晚上好。 一斛珠 发表于 2023-5-16 18:54
还有代码，谢谢！我得空试试。
因为基础代码是人家的，贴出代码只为对比方便。 起个网名好难 发表于 2023-5-16 18:57
因为基础代码是人家的，贴出代码只为对比方便。
看了看，头都好大哈。 我还是不折磨自个儿了 一斛珠 发表于 2023-5-16 19:06
看了看，头都好大哈。
看别人写的代码是蛮头疼，除非是有很详细的注释说明。 一斛珠 发表于 2023-5-16 19:06
我还是不折磨自个儿了
也没那么可怕吧 我看功夫不输黑师{:4_173:} 感谢老师的精心修改，把我原帖的问题解决了！万分感谢！！！致敬老师！！！{:4_190:}{:4_191:}{:4_176:} 本帖最后由 亦是金 于 2023-5-16 20:24 编辑
我把老师的代码中的.tit { position: relative;width: 300px; 改为.tit { position: relative;width: 500px;
使摇摆标题字仍为一行。想用老师的代码把我原帖代码更换了。可否？{:4_190:} 亦是金 发表于 2023-5-16 20:21
我把老师的代码中的.tit { position: relative;width: 300px; 改为.tit { position: relative;width: 500 ...
1、2楼一并改了。 好的！谢谢老师！{:4_190:} 我把歌词上移了 10px 亦是金 发表于 2023-5-16 20:30
我把歌词上移了 10px
你的帖你做主{:5_106:} 这个是为了解决亦是金帖子里的问题的吧。给难难点赞{:4_187:} 红影 发表于 2023-5-16 20:54
这个是为了解决亦是金帖子里的问题的吧。给难难点赞
是的！难难老师是位无私热心肠的好老师！致敬老师！{:4_190:} 红影 发表于 2023-5-16 20:54
这个是为了解决亦是金帖子里的问题的吧。给难难点赞
做的代码练习{:5_117:}
页:
[1]
2