红影 发表于 2024-2-6 19:05
哦，这个真的很陌生，之前没看到过。感谢黑黑解答
有个官网，专做这个，你有空瞧瞧：
https://cubic-bezier.com/
马黑黑 发表于 2024-2-6 10:12
主要是让复原后能在开头处略微持续一下，令背景图也有完整展现的机会
细节决定成败，这样的细节考虑很完美{:4_205:}
红影 发表于 2024-2-6 19:07
细节决定成败，这样的细节考虑很完美
不见得。我数学不好。
马黑黑 发表于 2024-2-6 10:13
transition 还有一个需要注意的地方，针对哪一个属性做设置，不然其他属性可能也受到影响
嗯嗯，知道了，这个是针对按钮的。
马黑黑 发表于 2024-2-6 10:15
opacity 是一个滤镜属性，以前归属于 filter 里的分支滤镜，独立出来后，滤镜的复原属性也一起带走。
这个复原也很棒，带来不一样的感受呢{:4_187:}
马黑黑 发表于 2024-2-6 10:16
忘了放个蟀哥
不用不用，我只迷醉于技巧呢{:4_173:}
亦是金 发表于 2024-2-6 10:21
我没有艳福，没有看见美女呢
要多等一会啊，10秒后才会变形的啊{:4_173:}
亦是金 发表于 2024-2-6 10:29
我在本地打开也没有出现这个效果！郁闷！
奇怪了，我这里不同的浏览器都能看到的啊，包含edge、百分和360，都看到的啊。
朵拉 发表于 2024-2-6 10:34
影宝好，我的新年摇 你看不到背景图是吗？
你按CTRL+F5再试一试看呢
好的，我回头再去看看。{:4_204:}
马黑黑 发表于 2024-2-6 11:29
较低版本的浏览器内核可能不支持 -webkit-mask 属性
已经带了 -webkit前缀，应该都支持的啊。
菲儿 发表于 2024-2-6 11:53
我已经听着音乐数了一百只羊
菲儿换个浏览器试试{:4_204:}
红影 发表于 2024-2-6 19:14
已经带了 -webkit前缀，应该都支持的啊。
按理是酱紫。双核浏览器如果不是小智的作品，也许不会自动切换。
红影 发表于 2024-2-6 19:09
不用不用，我只迷醉于技巧呢
蟋蟀是个好哥哥
红影 发表于 2024-2-6 19:09
这个复原也很棒，带来不一样的感受呢
一样的，就是回到1
樵歌 发表于 2024-2-6 15:10
已经收心里了，随时开
比古代还要美的现今的四大美女{:4_173:}
本帖最后由 马黑黑 于 2024-2-6 19:22 编辑
红影 发表于 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/
去看了，还有跟常规效果的比对的演示，从中更能感受到它的作用呢。非常神奇{:4_187:}
亦是金 发表于 2024-2-6 10:25
我为什么没有出现这个效果？？？
鼠标移动上去就看到了啊{:4_187:}
醉美水芙蓉 发表于 2024-2-6 20:11
昨天黑黑老师说要送个美女给樵歌，今天真得给送了，樵歌乐哈哈！
他最大方了，够哥们{:4_173:}