宁月

马黑黑 · 发表于 2024-7-8 10:32

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2024-7-8 10:32

本帖最后由马黑黑于 2024-7-8 10:42 编辑

帖子代码

<style>
#mydiv { --width: 1024px; margin: 30px 0 30px calc(50% - (var(--width) / 2 + 81px)); width: 1024px; height: 640px; background: radial-gradient(rgba(0,255,0,.35), transparent) repeat-y center/100% 30%, url('https://ts1.cn.mm.bing.net/th/id/R-C.6381ac588b0cc9e09e275deed5b89c2b?rik=%2bXefdl55N6a8og&riu=http%3a%2f%2fwww.deskcar.com%2fdesktop%2ffengjing%2f200892993648%2f3.jpg&ehk=VY5Nxc%2flY1Ku%2f4A6hTVHrag3%2bIbj93seJ%2bN%2bzqg7fDw%3d&risl=&pid=ImgRaw&r=0') no-repeat center/cover; border: 1px solid gray; overflow: hidden; position: relative; }
#mydiv::before { position: absolute; content: ''; inset: 0; background: radial-gradient(circle, transparent, transparent, yellow) no-repeat center/100% 100%; opacity: .5; transition: 1s; }
#mydiv:hover::before { inset: -100px; }
#player { position: absolute; left: 30px; top: 30px; width: 120px; filter: hue-rotate(175deg); transition: width 2s; opacity: .65; cursor: pointer; animation: rot 8s linear infinite var(--state); }
#player:hover { width: 150px; }
@keyframes rot { to { transform: rotate(360deg); }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=103982" autoplay loop></audio>
<img id="player" alt="" src="https://638183.freep.cn/638183/t23/btn/uih.webp" />
</div>
<script>
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: '#mydiv',
css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: lightblue; --fsBg: transparent;',
});
var mState = () => {
mydiv.style.setProperty('--state',['running','paused'][+aud.paused]);
player.title = ['暂停','播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

复制代码

竹溪 · 发表于 2024-7-8 10:38

喜欢的色彩和制作。

马黑黑 · 发表于 2024-7-8 10:41

本帖：

（一）帖子主元素双背景图像的应用：渐变背景“融入”主背景图片，营造层次感，美化主图，具体表象是帖子中自上而下的三抹绿。

（二）伪元素 ::before 的渐变背景也加入到对主图的修饰，还通过设备指针滑过时改变大小产生动感。表面上看，帖子开的圆形“天窗”就是 ::before 营造的效果，它的渐变，四周是黄色，中央是透明。

（三）小播是一朵花，它原先是深红色的，通过改变色相变成了和帖子较为贴近的颜色。