《冠斑犀鸟的爱情故事》- 学习马老师贴代码
本帖最后由 杨帆 于 2025-7-28 22:38 编辑 <br /><br /><!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>冠斑犀鸟的爱情故事</title>
</head>
<body>
<style>
#pa { --state: paused; --per: 0%; margin: 30px auto; left: calc(50% - 81px); transform: translateX(-50%);width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://pic1.imgdb.cn/item/68866f8c58cb8da5c8e5827e.jpg') no-repeat center/cover, rgba(240,248,255,0.45); background-blend-mode: difference; box-shadow: 2px 2px 8px #000; z-index: 1; overflow: hidden; position: relative; perspective: 1000px; transition: 2s; }
#pa::after { content: ''; position: absolute; width: 100%; height: 100%; background: url('https://pic1.imgdb.cn/item/68866f8c58cb8da5c8e5827e.jpg') no-repeat center/cover; clip-path: polygon(0 calc(100% - var(--per)), var(--per) 100%, 100% 100%, 100% var(--per), calc(100% - var(--per)) 0, 0 0); transition: 1s; }
#pa:hover { --per: 100%; }
#player { position: absolute; bottom: 50px; right: 50px; height: 50px; width: 50px; cursor: pointer; transform-style: preserve-3d; animation: rot 6s linear infinite var(--state); }
#player:hover { transform: scale(1.1); filter: opacity(0.5); }
li-zi { --hh: 35%; position: absolute; left: -50%; top: calc(50% - var(--hh)); width: 100%; height: var(--hh); background: radial-gradient(closest-side, GreenYellow 25%, transparent), conic-gradient(red, magenta, blue, aqua, lime, yellow, red); border-radius: 50% 100% 0 100%; box-shadow: inset 1px 1px 35px Gold, 2px 2px 3px rgba(255,0,0,.35); transform-origin: 100% 100%; }
#btnFs { left: 20px; bottom: 20px; color: #eee; }
#btnFs:hover { font-style: italic; }
.vid { position: absolute; width: 101%; height: 101%; object-fit: cover; opacity: .9; z-index: -1; pointer-events: none; }
@keyframes rot { to { transform: rotate(1turn); } }
.title-container { position: absolute; top: 50px; left: 0; width: 100%; text-align: center; white-space: nowrap; }
.title-text { display: inline-block; font: bold 3.2em STLiti, 'Microsoft YaHei', sans-serif; transition: all 0.3s ease; color: #00BFFF; margin: 0 8px; }
.title-text.rotate { animation: rotate 2s linear infinite var(--state); }
.title-text.hover-effect {color:#fcedbb; transform: scale(1.3); text-shadow: 0 0 15px rgba(255, 102, 0, 0.8); animation-play-state: paused !important; }
@keyframes rotate { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
</style>
<div id="pa">
<audio id="aud" src="https://alicdn-data.mvbox.cn/live/vp/03/9a4139c15a7edefca0f77bfba8d4fab7.mp4" loop></audio>
<video class="vid" src="https://alicdn-data.mvbox.cn/live/vp/03/9a4139c15a7edefca0f77bfba8d4fab7.mp4" loop muted></video>
<div id="player" title="播放/暂停"></div>
<div class="title-container"></div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, player);
const tt = 8;
Array.from({length: tt}, (_, idx) => {
const lz = document.createElement('li-zi');
lz.style.transform = `rotate3d(0, 0.1, 1, ${idx * 360 / tt}deg)`;
return player.appendChild(lz);
});
const txtAr = '冠斑犀鸟的爱情故事'.split('');
let spans = [];
let currentIndex = 0;
let animationPaused = false;
const titleContainer = document.querySelector('.title-container');
txtAr.forEach((t, k) => {
const s = document.createElement('span');
s.textContent = t;
s.className = 'title-text';
spans.push(s);
s.addEventListener('mouseenter', () => {
animationPaused = true;
s.classList.add('hover-effect');
});
s.addEventListener('mouseleave', () => {
animationPaused = false;
s.classList.remove('hover-effect');
updateAnimation();
});
titleContainer.appendChild(s);
});
spans.classList.add('rotate');
setInterval(() => {
if (!animationPaused) {
spans.classList.remove('rotate');
currentIndex = (currentIndex + 1) % txtAr.length;
spans.classList.add('rotate');
}
}, 2000);
function updateAnimation() {
if (!animationPaused) {
spans.forEach(s => s.classList.remove('rotate'));
spans.classList.add('rotate');
}
}
</script>
</body>
</html> 很美好的鸟儿的爱情故事，如此忠贞相守的一对鸟儿，看得让人感动。
欣赏杨帆好帖{:4_199:} 鸟儿未来哺育后代，真的太难了。如果在育雏期间打掉雄鸟，洞里的雌鸟和鸟宝宝真的没法活，等于杀了鸟儿全家啊。我们不应该伤害任何一只鸟儿，也许它们还有鸟宝宝等着喂养呢。 红影 发表于 2025-7-28 20:39
鸟儿未来哺育后代，真的太难了。如果在育雏期间打掉雄鸟，洞里的雌鸟和鸟宝宝真的没法活，等于杀了鸟儿全家 ...
问好影子，谢谢鼓励！
让我们心存善念，敬畏生灵，与大自然和谐相处。 杨帆 发表于 2025-7-28 21:27
问好影子，谢谢鼓励！
让我们心存善念，敬畏生灵，与大自然和谐相处。
嗯嗯，这是必须的{:4_199:} 欣赏美好的《冠斑犀鸟的爱情故事》，为杨帆的精彩制作点赞！{:4_187:} 梦江南 发表于 2025-7-29 09:30
欣赏美好的《冠斑犀鸟的爱情故事》，为杨帆的精彩制作点赞！
问好江南，感谢鼓励，祝开心{:4_171:} 欣赏杨帆漂亮的制作{:4_187:} 标题没有写黑黑那个教程，小辣椒现在都不会了，否则对应黑黑的去看看 小辣椒 发表于 2025-7-31 13:43
标题没有写黑黑那个教程，小辣椒现在都不会了，否则对应黑黑的去看看
谢谢小辣椒鼓励！可以去看看马老师这个帖子~
Purple Magic
https://www.huachaowang.com/forum.php?mod=viewthread&tid=84988&fromuid=7894
(出处: 花潮论坛)
页:
[1]