本帖最后由 加林森 于 2022-4-7 12:07 编辑 <br /><br />小辣椒 发表于 2021-9-13 21:57
我们不用客气的
嗯嗯{:4_179:}
<style>
/* 底图 */
.mnDiv {
width: 1200px;
height: 640px;
top:100px;
position: relative;
left: -302px;
background: #444 url('https://pic.imgdb.cn/item/624dc155239250f7c594f418.jpg') no-repeat;
position: relative;
opacity: 0.98;
overflow: hidden;
box-shadow: 4px 4px 5px #888;
border-radius:16px;
}
/* 摇摆的榆钱枝 */
.mnDiv-b-img {
left: 100px;
top: -2px;
width: 260px;
height: 360px;
position: absolute;
transform: rotate(-2deg);
transform-origin: 38% 0;
animation: gua 2.5s linear infinite alternate;
}
@keyframes gua { 100% { transform: rotate(4deg); } }
/* 竖排折行诗词 */
.mnDiv::before {
content: attr(data-tt);
position: absolute;
left: 880px;
top: 50px;
padding: 14px;
font: bold 1.6em / 1.5em Monospace;
color: #C1FFC1;
text-shadow: 2px 2px 6px #98FB98;
writing-mode: vertical-rl;
white-space: pre;
}
/* 动图平铺 */
.mnDiv::after {
content: '';
position: absolute;
width: 1000px;
height: 360px;
left: 160px;
top: 60px;
opacity: .75;
background: url('https://pic.imgdb.cn/item/62404cdf27f86abb2a782902.gi');
}
/* 水晶按钮主体 */
.crystal {
width: 60px;
height: 60px;
left: 320px;
top: 420px;
background: linear-gradient(120deg, #4FE846, #f6a337);
border-radius: 50%;
position: relative;
}
/* 按钮外圈的呼吸灯效果 */
.crystal::before {
content: '';
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
background: transparent;
border-radius: 50%;
box-shadow: 1px 1px 12px #336600, 0 0 4px green inset;
animation: glow 1s linear infinite alternate;
}
/* 按钮抛光 */
.crystal::after {
content: '';
width: 50%;
height: 50%;
position: absolute;
left: 10%; top: 20%;
border-radius: 50%;
background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
filter: blur(5px);
}
@keyframes glow {
from { filter: blur(0px); }
to { filter: blur(3px); }
}
.crystal:hover { opacity: 0.8; }
/* 黑黑原创文字走马灯 */
.flyBox {
--w: 80px;
width: var(--w);
position: absolute;
left: 310px;
top: 496px;
overflow: hidden;
}
.flyBox div {
word-break: keep-all;
white-space: nowrap;
font: normal 22px /24px '楷体','微软雅黑';
color:#ccffcc; text-shadow:1px 1px 2px rgba(0, 0, 0, .8);
animation: fly 6s linear infinite;
}
@keyframes fly {
from { transform: translateX(100%); }
to { transform: translateX(calc(-10% - var(--w))); }
}
</style>
<div class="mnDiv" data-tt="《渔家傲》 金段克己 春去春来谁作主。怨他昨夜江头雨。 把酒问春春不语。头懒举,乱红飞过秋千去。 芳草澹烟江上路。鹧鸪声里斜阳暮。 风外榆钱无意绪。空自舞。如何买得青春住。">
<div class="mnDiv-b-img">
<img src="https://pic.imgdb.cn/item/624e3181239250f7c501a0a2.png" alt="" /></div>
<div id="crystal"class="crystal"></div>
<div class="flyBox">
<div>归去来辞</div>
</div>
</div>
<audio id="ymusic" src="http://music.163.com/song/media/outer/url?id=1935058675.mp3" autoplay="autoplay"
loop="loop"></audio>
<script>
var mu = document.getElementById('ymusic');
var mbtn = document.getElementById('crystal');
mu.autoplay ? mbtn.style.animationPlayState="running" : mbtn.style.animationPlayState="paused";mu.addEventListener("ended", function(){ mbtn.style.animationPlayState="paused"; })
mbtn.onclick = function(){ mu.paused ? (mu.play(), mbtn.style.animationPlayState="running") : (mu.pause(),mbtn.style.animationPlayState="paused"); }
</script>
<br><br><br><br><br><br><br><br><br><br><br></td></tr></table>
加林森 发表于 2021-9-13 21:58
嗯嗯
队长10点到了，我准备下了，你不能每天太迟啊
小辣椒 发表于 2021-9-13 22:00
队长10点到了，我准备下了，你不能每天太迟啊
好的好的，谢谢你！{:4_171:}
加林森 发表于 2021-9-12 22:27
那就慢慢聆听吧
这首歌已经听了N遍~~还想听N遍~~{:5_106:}
杨柳青 发表于 2021-9-14 22:02
这首歌已经听了N遍~~还想听N遍~~
支持小青青！{:4_171:}
大猫咪 发表于 2021-9-13 13:56
问好小杨柳， 顺祝秋安
猫咪晚上好~~{:4_187:}
加林森 发表于 2021-9-14 22:05
支持小青青！
要西要西~~总算不唱反调了~~{:5_117:}
杨柳青 发表于 2021-9-14 22:18
要西要西~~总算不唱反调了~~
{:4_202:}
加林森 发表于 2021-9-14 23:49
队长晚上好{:4_190:}{:4_179:}
大猫咪 发表于 2021-9-15 19:52
队长晚上好
猫猫晚上好！{:4_171:}
加林森 发表于 2021-9-15 22:20
猫猫晚上好！
队长来了啊， 开心 {:4_179:}
大猫咪 发表于 2021-9-15 22:22
队长来了啊， 开心
来了来了，猫猫晚上好！{:4_179:}