梦幻的世界（to樵歌）

马黑黑

红影 发表于 2024-2-6 19:05
哦，这个真的很陌生，之前没看到过。感谢黑黑解答

有个官网，专做这个，你有空瞧瞧：

https://cubic-bezier.com/

红影

马黑黑 发表于 2024-2-6 10:12
主要是让复原后能在开头处略微持续一下，令背景图也有完整展现的机会

细节决定成败，这样的细节考虑很完美

马黑黑

红影 发表于 2024-2-6 19:07
细节决定成败，这样的细节考虑很完美

不见得。我数学不好。

红影

马黑黑 发表于 2024-2-6 10:13
transition 还有一个需要注意的地方，针对哪一个属性做设置，不然其他属性可能也受到影响

嗯嗯，知道了，这个是针对按钮的。

红影

马黑黑 发表于 2024-2-6 10:15
opacity 是一个滤镜属性，以前归属于 filter 里的分支滤镜，独立出来后，滤镜的复原属性也一起带走。

这个复原也很棒，带来不一样的感受呢

红影

马黑黑 发表于 2024-2-6 10:16
忘了放个蟀哥

不用不用，我只迷醉于技巧呢

红影

亦是金 发表于 2024-2-6 10:21
我没有艳福，没有看见美女呢

要多等一会啊，10秒后才会变形的啊

红影

亦是金 发表于 2024-2-6 10:29
我在本地打开也没有出现这个效果！郁闷！

奇怪了，我这里不同的浏览器都能看到的啊，包含edge、百分和360，都看到的啊。

红影

朵拉 发表于 2024-2-6 10:34
影宝好，我的新年摇 你看不到背景图是吗？
你按CTRL+F5  再试一试看呢

好的，我回头再去看看。

红影

马黑黑 发表于 2024-2-6 11:29
较低版本的浏览器内核可能不支持 -webkit-mask 属性

已经带了 -webkit前缀，应该都支持的啊。

红影

菲儿 发表于 2024-2-6 11:53
我已经听着音乐数了一百只羊

菲儿换个浏览器试试

马黑黑

红影 发表于 2024-2-6 19:14
已经带了 -webkit前缀，应该都支持的啊。

按理是酱紫。双核浏览器如果不是小智的作品，也许不会自动切换。

马黑黑

红影 发表于 2024-2-6 19:09
不用不用，我只迷醉于技巧呢

蟋蟀是个好哥哥

马黑黑

红影 发表于 2024-2-6 19:09
这个复原也很棒，带来不一样的感受呢

一样的，就是回到1

红影

樵歌 发表于 2024-2-6 15:10
已经收心里了，随时开

比古代还要美的现今的四大美女

马黑黑

红影 发表于 2024-2-6 19:07
嗯嗯，知道了，这个是针对按钮的。

不是这个意思。

比方说，有一个 #btnPlay 选择器，它对应HTML的 id="btnPlay" 的元素，现在，我们希望鼠标移动到它时，它会更改透明度，且应该是在 1 秒的时间区间里完成，注意，只是在透明度做 1 秒的相应设计：

#btnPlay {
    transition: opacity 1s;
}

这样，#btnPlay:hover { opacity: .6; width: 50%; } 设定的透明度变化，就会产生 1s 内完成透明度的转换，而 width 的变化，因为没有规定，瞬间完成。

红影

马黑黑 发表于 2024-2-6 19:06
有个官网，专做这个，你有空瞧瞧：

https://cubic-bezier.com/

去看了，还有跟常规效果的比对的演示，从中更能感受到它的作用呢。非常神奇

红影

亦是金 发表于 2024-2-6 10:25
我为什么没有出现这个效果？？？

鼠标移动上去就看到了啊

樵歌

醉美水芙蓉 发表于 2024-2-6 20:11
昨天黑黑老师说要送个美女给樵歌，今天真得给送了，樵歌乐哈哈！

他最大方了，够哥们