吱吱作响的肖像：与CSS Path（）功能一起玩乐

>本文探讨了目前广泛支持的CSSclip-path: path()的创造性可能性，用于动态网络设计。 学习使用多个SVG路径定义和CSS过渡来制作交互式，动画的Splat形状。 通过交互式元素来增强用户参与度，这些元素会通过悬停和活动状态上的CSS变量动态改变剪辑路径和转换。 通过对用户互动反应的图像和动画结合性格和响应能力。 探索诸如视差效果和音频集成的高级技术，以获得更丰富的用户体验。

Chrome 88对

>的支持使其在大多数主要浏览器中可用。 这允许使用SVG路径定义进行剪辑路径，从而实现了先前需要SVG的复杂形状。 本文演示了创建“吱吱作响的肖像”，这是一种clip-path: path()的嬉戏应用。 clip-path: path()

创建和应用splats：

> 创建了多个SVG路径定义（使用诸如Figma之类的向量编辑器），以确保平滑CSS过渡的一致节点计数。 这些路径被转换为CSS变量（，

，

）。 A--splatdiv用--splattier>设计，最初使用--splatted。 悬停和主动状态分别将.portrait变为clip-path: path(var(--clip, var(--none)))和--splat>，创建动画。--clip --splattier--splatted

在

> CSS变量控制悬停和活动状态的量表和旋转，从而增强了视觉效果。 三个图像在div中分层，使用

选择器和CSS变量进行战略性显示/隐藏，以创建对用户交互的视觉响应。>

视差和音频集成：.portrait> :nth-of-type>使用瓷砖背景图像和JavaScript实现了视差效应，以根据指针移动调整

。 映射函数动态缩放指针坐标以控制视差效果。 最后，音频（从FreeSound.org之类的资源获得）已集成，在Pointerdown和Pointerup Events上播放不同的声音。

>

该项目展示了用于交互式和引人入胜的Web设计的，CSS变量，过渡和JavaScript的创造性使用。 该代码可在Codepen集合中使用。 本文以FAQ部分结束，涉及有关CSS路径功能及其应用的常见问题。

以上是吱吱作响的肖像：与CSS Path（）功能一起玩乐的详细内容。更多信息请关注PHP中文网其他相关文章！