马黑黑 发表于 2024-1-9 11:21

Jannik - Grace

<style>
#papa {
        margin: 0 0 0 calc(50% - 681px);
        width:1200px;
        height: 798px;
        border: 1px solid gray;
        background: url('https://638183.freep.cn/638183/t24/jpg/grace.jpg') no-repeat center/cover;
        box-shadow: 3px 6px 12px #000;
        z-index: 1;
        position: relative;
        display: grid;
        place-items: center;
}
#papa::before, #papa::after {
        position: absolute;
        content: '';
        left: calc(50% - 300px);
        width: 50%;
        height: 100%;
        background: url('https://638183.freep.cn/638183/t23/2/118.jpg') no-repeat center/cover;
        clip-path: circle(300px at 50% 50%); /*0 50%,50% 100%, 100% 50%, 50% 0 || 0 50%,50% 100%,100% 100%,100% 0, 50% 0*/
        opacity: .4;
        animation: move 20s forwards;
        --xx: 0;
}
#papa::after {
        transform: scale(-1,1);
        --xx: 50%;
}
@keyframes move {
        to { left: var(--xx); }
}
</style>

<div id="papa"></div>

<script>
var sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/ypPlayer.min.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);

sf.onload = () => {
        var player = new ypP();
        player.setAudSrc('https://music.163.com/song/media/outer/url?id=528423473');
        player.setBtnCss(`
                width: 300px;
                bottom: 10px;
                z-index: 10;
                opacity: .75;
                --btnBg: url('https://638183.freep.cn/638183/web/svg/sunfl-1.svg') no-repeat center/cover;
                --trackBg: transparent;
                --progBg: orange;
                --btnSize: 80px;
        `);
        player.setLrcCss('top: 15px; color: tan; --bg: orange; z-index: 9;');
        player.lrcAr = [ , ];
};
</script>

马黑黑 发表于 2024-1-9 11:22

帖子代码
<style>
#papa {
        margin: 0 0 0 calc(50% - 681px);
        width:1200px;
        height: 798px;
        border: 1px solid gray;
        background: url('https://638183.freep.cn/638183/t24/jpg/grace.jpg') no-repeat center/cover;
        box-shadow: 3px 6px 12px #000;
        z-index: 1;
        position: relative;
        display: grid;
        place-items: center;
}
#papa::before, #papa::after {
        position: absolute;
        content: '';
        left: calc(50% - 300px);
        width: 50%;
        height: 100%;
        background: url('https://638183.freep.cn/638183/t23/2/118.jpg') no-repeat center/cover;
        clip-path: circle(300px at 50% 50%); /*0 50%,50% 100%, 100% 50%, 50% 0 || 0 50%,50% 100%,100% 100%,100% 0, 50% 0*/
        opacity: .4;
        animation: move 20s forwards;
        --xx: 0;
}
#papa::after {
        transform: scale(-1,1);
        --xx: 50%;
}
@keyframes move {
        to { left: var(--xx); }
}
</style>

<div id="papa"></div>

<script>
var sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/ypPlayer.min.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);

sf.onload = () => {
        var player = new ypP();
        player.setAudSrc('https://music.163.com/song/media/outer/url?id=528423473');
        player.setBtnCss(`
                width: 300px;
                bottom: 10px;
                z-index: 10;
                opacity: .75;
                --btnBg: url('https://638183.freep.cn/638183/web/svg/sunfl-1.svg') no-repeat center/cover;
                --trackBg: transparent;
                --progBg: orange;
                --btnSize: 80px;
        `);
        player.setLrcCss('top: 15px; color: tan; --bg: orange; z-index: 9;');
        player.lrcAr = [ , ];
};
</script>

马黑黑 发表于 2024-1-9 11:30

Jannik 是入驻网页云音乐的华人歌手，专注于颇具个性的 Jannik Music，个人介绍：简单可以，简陋永远不行。 邮箱：jannikmusic@163.com

红影 发表于 2024-1-9 12:08

这个前景图图缓缓移开，看着好奇妙啊。漂亮{:4_199:}

红影 发表于 2024-1-9 12:18

transform: scale(-1,1);能看懂，关于移动，我还想了一会才明白，也就是开始居中，然后伪元素的before移动到了最左边，after移动到了50%的位置，正好两个圆形平均分布了{:4_173:}

红影 发表于 2024-1-9 12:19

一遍遍地看着两个圆球图面移动，好美{:4_199:}

马黑黑 发表于 2024-1-9 12:54

红影 发表于 2024-1-9 12:19
一遍遍地看着两个圆球图面移动，好美

最初的设计是做两个菱形，也很漂亮，然后又做半菱形的，也还可以。详情见注释掉的代码。发布前还有做成椭圆的，也不错，最后觉得圆形可能更符合图意与曲意，就酱定型了。

其实可以不用 clip-path，直接 border-radius: 50% 就可以了。

马黑黑 发表于 2024-1-9 13:02

红影 发表于 2024-1-9 12:18
transform: scale(-1,1);能看懂，关于移动，我还想了一会才明白，也就是开始居中，然后伪元素的before移动 ...
CSS关键帧动画，如果是基于left、top之类的属性的方位变换，可以不用from，前提是元素做了对应的绝对定位。

如果用 transform: translate()，元素自身可以不做left、top定位，但实际上它们也要定位（比如父元素的约束定位）。translate() 就不好用百分比了，要用实体单位的尺寸数据，例如 200px。这里不用translate来驱动元素的位移，有计算方面的考量，同时 ::after 已经用了 transform: scale()，加入 translate 会增加代码设计的麻烦。

红影 发表于 2024-1-9 13:53

马黑黑 发表于 2024-1-9 12:54
最初的设计是做两个菱形，也很漂亮，然后又做半菱形的，也还可以。详情见注释掉的代码。发布前还有做成椭 ...

那个菱形的肯定也好看，半菱形的遮挡太多，可能一般。{:4_173:}

红影 发表于 2024-1-9 13:55

马黑黑 发表于 2024-1-9 13:02
CSS关键帧动画，如果是基于left、top之类的属性的方位变换，可以不用from，前提是元素做了对应的绝对定位 ...

原来使用--xx还有避免使用translate 的考虑啊，这个细节很重要{:4_199:}

马黑黑 发表于 2024-1-9 16:37

红影 发表于 2024-1-9 13:55
原来使用--xx还有避免使用translate 的考虑啊，这个细节很重要

这不是变量 --xx 的事情。--xx 只是一个CSS变量。是left和translate使用单位和其他特性上的区别。

马黑黑 发表于 2024-1-9 16:37

红影 发表于 2024-1-9 13:53
那个菱形的肯定也好看，半菱形的遮挡太多，可能一般。

试过了？

醉美水芙蓉 发表于 2024-1-9 16:41

马黑黑 发表于 2024-1-9 16:41

醉美水芙蓉 发表于 2024-1-9 16:41
这是啥情况？黑黑老师变得天文望远镜吗？

{:4_172:}

世外桃源 发表于 2024-1-9 16:46

漂亮的特效{:4_199:}

世外桃源 发表于 2024-1-9 16:47

欣赏高手老师的好高水平制作{:4_178:}

樵歌 发表于 2024-1-9 17:43

特效技巧，坐下欣赏围观吃瓜{:4_173:}

马黑黑 发表于 2024-1-9 19:38

樵歌 发表于 2024-1-9 17:43
特效技巧，坐下欣赏围观吃瓜

瓜多吃无妨

马黑黑 发表于 2024-1-9 19:38

世外桃源 发表于 2024-1-9 16:47
欣赏高手老师的好高水平制作

晚上嚎

红影 发表于 2024-1-9 20:53

马黑黑 发表于 2024-1-9 16:37
这不是变量 --xx 的事情。--xx 只是一个CSS变量。是left和translate使用单位和其他特性上的区别。

是啊，用了left的变化，就不用考虑translate了呢{:4_204:}
页: [1] 2 3 4 5
查看完整版本: Jannik - Grace