梦幻的世界（to樵歌）

红影

其次是animation: 里的这个  cubic-bezier(.17,.67,.87,.27) ，说实在的，这个非常陌生，完全没看到过。

红影

@keyframes chgMask { 20% { -webkit-mask-size: 0; } 100% { -webkit-mask-size: 400%; } }
这个设计也有趣，让动态呈现不同的速度去完成

红影

最有趣的是两个svg图图的运用，一个用作播放器按钮，一个用作遮罩了。两个都那么漂亮。

红影

关于播放器按钮的变色，再努力复习和记忆一下：
因为有transition: 1s; 这句，才会让hover的时候，变化的过程被看到。

这个帖子里好多需要学习的呢

红影

这个帖子是梦幻的世界，更是诱惑的世界
美女诱惑了樵歌，帖子中的各类技巧诱惑了我

马黑黑

红影 发表于 2024-2-6 09:51
其次是animation: 里的这个  cubic-bezier(.17,.67,.87,.27) ，说实在的，这个非常陌生，完全没看到过。

这是用来表示运动速率，和 linear、ease、ease-in、ease-out、ease-in-out 功能差不多，不同的是可以随意定义，有四个参数值：

cubic-bezier(x1, y1, x2, y2)

其中，x1、x2 取值范围 0~1，含 0 和 1，突破这个范围无效；y1、y2 可以小于大于这个范围，但不宜过大也不建议超过。

它其实就是三次贝塞尔曲线在运动速率上的应用

马黑黑

红影 发表于 2024-2-6 09:54
@keyframes chgMask { 20% { -webkit-mask-size: 0; } 100% { -webkit-mask-size: 400%; } }
这个设计也有 ...

主要是让复原后能在开头处略微持续一下，令背景图也有完整展现的机会

马黑黑

红影 发表于 2024-2-6 09:58
关于播放器按钮的变色，再努力复习和记忆一下：
因为有transition: 1s; 这句，才会让hover的时候，变化的 ...

transition 还有一个需要注意的地方，针对哪一个属性做设置，不然其他属性可能也受到影响

马黑黑

红影 发表于 2024-2-6 09:50
这个帖子要学习的还挺多
首先，#papa:hover::before { opacity: unset; }，通常鼠标上去要么让它变色要么 ...

opacity 是一个滤镜属性，以前归属于 filter 里的分支滤镜，独立出来后，滤镜的复原属性也一起带走。

马黑黑

红影 发表于 2024-2-6 10:00
这个帖子是梦幻的世界，更是诱惑的世界
美女诱惑了樵歌，帖子中的各类技巧诱惑了我

忘了放个蟀哥

亦是金

红影 发表于 2024-2-6 09:48
这个有趣，由风景图变成了四大美女啊。好看的制作。樵歌收礼开心

我没有艳福，没有看见美女呢

亦是金

红影 发表于 2024-2-6 09:50
这个帖子要学习的还挺多
首先，#papa:hover::before { opacity: unset; }，通常鼠标上去要么让它变色要么 ...

我为什么没有出现这个效果？？？

亦是金

红影 发表于 2024-2-6 09:50
这个帖子要学习的还挺多
首先，#papa:hover::before { opacity: unset; }，通常鼠标上去要么让它变色要么 ...

我在本地打开也没有出现这个效果！郁闷！

朵拉

红影 发表于 2024-2-6 10:00
这个帖子是梦幻的世界，更是诱惑的世界
美女诱惑了樵歌，帖子中的各类技巧诱惑了我

影宝好，我的新年摇 你看不到背景图是吗？
你按CTRL+F5  再试一试看呢

清茶煮雪

樵歌 发表于 2024-2-6 08:56
赏心悦目，美得差点晕了过去

这话说的，笑安逸了哈哈哈哈，不过是真心话 表达了你欣赏时的喜悦

清茶煮雪

背景新建天池样，歌曲新疆乐器，第一次听，特好听

清茶煮雪

红影 发表于 2024-2-6 09:48
这个有趣，由风景图变成了四大美女啊。好看的制作。樵歌收礼开心

可惜我浏览器只听见音乐看见背景图 没看到美女

清茶煮雪

欣赏黑黑老师佳作，樵歌收礼开心！

梦油

异域风情的乐曲很好听。我猜乔哥也会喜欢。

红影

菲儿 发表于 2024-2-6 11:01
可惜我浏览器只听见音乐看见背景图 没看到美女

需要等10秒啊，那个设定是10秒一轮换。多听会音乐就看到了