哪吒
本帖最后由 绿叶清舟 于 2024-6-30 15:28 编辑 <br /><br /><style>#tz {
--width: 1280px;
margin: 30px 0 30px calc(50% - (var(--width) / 2 + 88px));
width: var(--width);
height: 720px;
background: url('https://pic.imgdb.cn/item/6680f98fd9c307b7e9beb569.jpg') no-repeat center/cover;
box-shadow: 3px 3px 8px rgba(0, 0, 0, .6);
overflow: hidden;
position: relative;
}
#player {
position: absolute;
display: grid;
place-items: center;
left: 185px;
top: 580px;
width: var(--ww);
height: var(--ww);
background: url('https://p.upyun.com/demo/tmp/qmokFamk.webp') no-repeat 50%/60%;
border-radius: 50%;
cursor: pointer;
transition: .7s;
animation: rot 6s linear infinite var(--state);
--ww: 80px;
--size: 20px;
}
#player:hover { filter: hue-rotate(30deg); }
c-c {
position: absolute;
width: var(--size);
height: var(--size);
border-radius: 50%;
background: linear-gradient(#fced51, #921916);
box-shadow: 0 0 6px rgba(0, 0, 0, .1);
animation: flyout 2s forwards;
}
#vid {
position: absolute;
bottom: 0;
width: 100%;
height: calc(100% + 60px);
object-fit: cover;
mix-blend-mode: overlay;
pointer-events: none;
}
#tz:fullscreen #vid { height: calc(100% + 100px); }
@keyframes flyout {
to { transform: rotate(var(--deg)) translateY(calc(var(--ww) / 2)); }
}
@keyframes flyin {
from { transform: rotate(var(--deg)) translateY(calc(var(--ww) / 2)); }
to { transform: rotate(calc(var(--deg) * 2)) translateY(0); }
}
@keyframes rot {
to { transform: rotate(360deg); }
}
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=477331954" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/29/96/5fa09f4e88257.mp4" muted autoplay loop></video>
<div id="player" title="暂停"></div>
</div>
<script>
var ccs = [];
new Array(total = 10).fill(0).map((c,k) => {
c = document.createElement('c-c');
c.style.cssText += `--deg: ${360 / total * k}deg`;
player.appendChild(c);
ccs.push(c);
});
var mState = () => {
player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
player.title = ['暂停','播放'][+aud.paused];
ccs.forEach(cc => cc.style.animationName = aud.paused ? 'flyin' : 'flyout');
aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
papa: '#tz',
css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: #af1813; --fsBg: rgba(0,128,0,.5);',
});
</script> 这风火轮好厉害啊 老师好创意，赞！{:4_199:} https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 哪吒疾恶如仇、除暴安良，体现了中华民族优秀的传统美德。我很喜欢这个“人物”。 看到哪吒这名字就被吸引来了：很有气势的 画面，特效也加得很好。问好清舟{:4_187:} 把散开的小球集中在风火轮上，这个有趣。欣赏清舟好帖{:4_199:} 全屏时候风火轮就错位了，清舟可以试着用百分比定位就不会跑了{:4_187:} 这个画面色彩很协调，很有气势，漂亮的制作{:4_187:} 哇塞，清舟这个图图太美了，色才靓丽，这风火轮的按钮特别相配{:4_199:} 哪吒 这音乐配的有气势，效果太棒了{:4_178:} 上海朝阳 发表于 2024-6-30 15:39
这风火轮好厉害啊
谢谢朝阳支持 小辣椒 发表于 2024-6-30 22:42
哪吒 这音乐配的有气势，效果太棒了
是啊这歌唱得太有气势了 小辣椒 发表于 2024-6-30 22:41
哇塞，清舟这个图图太美了，色才靓丽，这风火轮的按钮特别相配
就是中间图片尺寸好象小了点了 红影 发表于 2024-6-30 19:55
全屏时候风火轮就错位了，清舟可以试着用百分比定位就不会跑了
谢谢影，开始用的百分比，但精确定位不容易就改了 红影 发表于 2024-6-30 19:53
把散开的小球集中在风火轮上，这个有趣。欣赏清舟好帖
正好在转的了就一起转了 千羽 发表于 2024-6-30 18:40
看到哪吒这名字就被吸引来了：很有气势的 画面，特效也加得很好。问好清舟
千羽晚上好啊，哪吒这么吸引啊{:4_173:} 梦油 发表于 2024-6-30 18:10
哪吒疾恶如仇、除暴安良，体现了中华民族优秀的传统美德。我很喜欢这个“人物”。
还是个天不怕地不怕的了 梦江南 发表于 2024-6-30 16:56
老师好创意，赞！
谢谢江南鼓励，晚上好 绿叶清舟 发表于 2024-7-1 19:41
谢谢影，开始用的百分比，但精确定位不容易就改了
是的，那个定位调起来麻烦。可以计算啊，用现在的左边距除以总宽就得到一个方向的值了，同理可以得到另一个方向的百分比值。