风月绵绵（学习马黑黑Elevate效果） TO：小辣椒
本帖最后由 朵拉 于 2025-8-1 15:56 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/css/tz01.css?v=0.1';
#pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/688b930158cb8da5c8f667a9.jpg') no-repeat center/cover; --ma-size: 200px; }
#btnFs { bottom: 20px; color: #eee; }
#mwrap { position: absolute; left: 60px; bottom: 5px; width: 400px; height: 400px; }
#ma { left: 100px; bottom: 90px; display: grid; place-items: center; }
#ma::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: cyan; }
.son { position: absolute; width: 100%; height: 1px; background: linear-gradient(to right, var(--bg1), var(--bg2)); transform: rotate(var(--a)); display: grid; place-items: center; }
.son::before, .son::after { content: ''; position: absolute; width: 24px; height: 24px; background: inherit; border-radius: 50%; left: 0; }
.son::after { left: calc(100% - 20px); }
.ani { animation: flash 1s linear alternate var(--state), rotate 1s linear var(--state); }
@keyframes flash { to { color: red; opacity: .7; } }
</style>
<div id="pa">
<audio id="aud" src="https://cccimg.com/view.php/5cc356ce5701941d96010ec0e4de46ba.mp3" autoplay="" loop=""></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2269348/00/35/88/5fd83151c9175.mp4" autoplay loop muted></video>
<div id="mwrap">
<div id="ma" class="brightness"></div>
</div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);
var txtAr = '风月绵绵'.split(''), spans = [], total = 7;
txtAr.forEach( (t, k) => {
var s = document.createElement('span');
s.textContent = t;
s.className = k === 0 ? 'title-text ani' : 'title-text';
var a = -120 / (txtAr.length - 1) * k - 120, r = 170;
s.style.cssText += `
left: ${r + r * Math.cos(a * Math.PI / 180)}px;
top: ${r + r * Math.sin(a * Math.PI / 180)}px;
`;
spans.push(s);
s.onanimationend = () => {
s.classList.remove('ani');
spans[(k + 1) % txtAr.length].classList.add('ani');
};
mwrap.appendChild(s);
});
Array.from({length: total}).forEach( (son, key) => {
son = document.createElement('div');
son.className = 'son';
son.style.cssText += `
--bg1: #${Math.random().toString(16).substring(2, 8)};
--bg2: #${Math.random().toString(16).substring(2, 8)};
--a: ${key * 180 / total}deg;
`;
ma.appendChild(son);
});
</script> @小辣椒
好些日子 没见着小辣椒，
想你 么么哒{:4_204:} @马黑黑
老师好，学生交作业，请指正{:4_190:} 漂亮，欣赏朵宝好帖，小辣椒亲爱的收礼开心{:4_187:} 朵拉 发表于 2025-8-1 15:54
@马黑黑
老师好，学生交作业，请指正
{:4_199:} 欣赏朵儿精美礼物！{:4_187:} 谢谢朵拉，精美的制作，小辣椒现在什么都不会了，向朵拉学习{:4_171:} 再次谢谢朵拉的礼物，小辣椒挺喜欢的{:4_179:}
页:
[1]