宁月
<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: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>
喜欢的色彩和制作。 本帖：
（一）帖子主元素双背景图像的应用：渐变背景“融入”主背景图片，营造层次感，美化主图，具体表象是帖子中自上而下的三抹绿。
（二）伪元素 ::before 的渐变背景也加入到对主图的修饰，还通过设备指针滑过时改变大小产生动感。表面上看，帖子开的圆形“天窗”就是 ::before 营造的效果，它的渐变，四周是黄色，中央是透明。
（三）小播是一朵花，它原先是深红色的，通过改变色相变成了和帖子较为贴近的颜色。 background: radial-gradient(circle, transparent, transparent, yellow)
这就是开的天窗了。。
径向渐变一般都是圆的么，这里为啥特意加个circle。。 马黑黑 发表于 2024-7-8 10:41
本帖：
（一）帖子主元素双背景图像的应用：渐变背景“融入”主背景图片，营造层次感，美化主图，具体表 ...
原来是这样，还能对图片美化。不会整，觉得很好看。 filter: hue-rotate(175deg);色相数值对应表昨天一直找没找到，问下老师，哪里找比较快呀 南无月 发表于 2024-7-8 10:55
filter: hue-rotate(175deg);色相数值对应表昨天一直找没找到，问下老师，哪里找比较快呀
你那个色盘出来瞧瞧就行了，和罗盘差不多的。
不同的颜色，转换色相，得到的效果不同，但都依据色盘来 竹溪 发表于 2024-7-8 10:38
喜欢的色彩和制作。
{:4_190:} 竹溪 发表于 2024-7-8 10:53
原来是这样，还能对图片美化。不会整，觉得很好看。
{:4_180:} 马黑黑 发表于 2024-7-8 11:10
你那个色盘出来瞧瞧就行了，和罗盘差不多的。
不同的颜色，转换色相，得到的效果不同，但都依据色盘来
{:4_173:}好哒，我还得去找找 色彩的调整特别漂亮，去看了原图，这个比原图漂亮多了，被镀上了一层梦幻的色彩{:4_199:} 鼠标触碰，颜色还会变化的。
渐变元素加伪元素，能营造出这么美的效果呢。{:4_199:} 这个帖子对色彩的把握要求很高了，怎样让原图更出彩，很考验调色能力呢{:4_173:} 红影 发表于 2024-7-8 12:34
这个帖子对色彩的把握要求很高了，怎样让原图更出彩，很考验调色能力呢
能力是可以培养滴 红影 发表于 2024-7-8 12:33
鼠标触碰，颜色还会变化的。
渐变元素加伪元素，能营造出这么美的效果呢。
还可以一看吧
红影 发表于 2024-7-8 12:31
色彩的调整特别漂亮，去看了原图，这个比原图漂亮多了，被镀上了一层梦幻的色彩
{:4_190:} 南无月 发表于 2024-7-8 11:21
好哒，我还得去找找
{:4_190:} 海上升明月，天上开花花。 樵歌 发表于 2024-7-8 18:23
海上升明月，天上开花花。
{:4_181:}
页:
[1]
2