我的编程空间,编程开发者的网络收藏夹
学习永远不晚

CSS3 clip-path怎么使用

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

CSS3 clip-path怎么使用

这篇文章主要介绍“CSS3 clip-path怎么使用”,在日常操作中,相信很多人在CSS3 clip-path怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS3 clip-path怎么使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

CSS3 clip-path怎么使用

今天逛 CodePen,看到了这样一个非常有意思的效果:

CSS3 clip-path怎么使用

CodePen Demo -- Material Design Menu By Bennett Feely

网址:https://codepen.io/bennettfeely/pen/fHdFb

这个效果还是有一些值得探讨学习的点,下面我们一起来看看。

如何实现这样一个类似的效果?

首先,想一想,如果让你去实现上面的效果,你会怎么做呢?

这里我简单罗列一些可能的办法:

  • 阴影 box-shadow

  • 渐变 radial-gradient

  • 缩放 transform: scale()

快速的一个一个过一下。

使用 box-shadow 实现

如果使用 box-shadow,代码大致如下:

<div class="g-container">
    <div class="g-item"></div>
</div>
.g-container {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
}

.g-item {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    top: 20px;
    left: 20px;
    box-shadow: 0 0 0 0 #fff;
    transition: box-shadow .3s linear;
    
    &:hover {
        box-shadow: 0 0 0 420px #fff;
    }
}

核心就在于:

  • 外层一个设置了 overflow: hideen 的遮罩

  • 内层元素 hover 的时候,实现一个 box-shadow: 0 0 0 0 #fffbox-shadow: 0 0 0 420px #fff 的变化

效果如下:

CSS3 clip-path怎么使用

整体的动画是模拟出来了,但是它最致命的问题有两个:

  • 当我们的鼠标离开圆形的时候,整个动画就开始反向进行了,白色区域开始消失,如果我们要进行按钮操作,是无法完成的

  • 隐藏在动画展开后的矩形内的元素,不容易放置

所以,box-shadow 看着虽好,但是只能放弃。

上述 Demo 的代码 -- CodePen Demo -- box-shadow zoom in animation

网址:https://codepen.io/Chokcoco/pen/jOLRQNy

使用渐变 radial-gradient 实现

下面我们使用径向渐变 radial-gradient 加上 CSS @property,也可以还原上述效果:

<div class="g-container"></div>
@property --size {
  syntax: '<length>';
  inherits: false;
  initial-value: 24px;
}

.g-container {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
    background: radial-gradient(circle at 44px 44px, #fff 0, #fff var(--size), transparent var(--size), transparent 0);
    transition: --size .3s linear;
    
    &:hover {
        --size: 450px;
    }
}

我们通过控制径向渐变的动画效果,在 hover 的时候,让原本只是一个小圆背景,变成一个大圆背景,效果如下:

CSS3 clip-path怎么使用

emmm,效果确实是还原了,问题也很致命:

  • 由于是背景的变化,所以鼠标不需要 hover 到小圆上,只需要进入 div 的范围,动画就会开始,这显然是不对的

  • 和第一种 box-shadow 的方法类似,隐藏在白色之下的导航元素的 DOM 不好放置

上述 Demo 的代码 -- CodePen Demo -- radial-gradient zoom in animation

网址:https://codepen.io/Chokcoco/pen/RwZOqWb

emmm,还有一种方法,通过缩放 transform: scale(),也会存一定问题,这里不继续展开。

所以到这里,想实现上述的效果,核心在于:

  • 鼠标要 hover 到圆上,才能开始动画,并且,鼠标可以在展开后的范围内自由移动,且不会收回动画效果

  • 动画展开后,里面的 DOM 的放置,不能太麻烦,能不借助 Javascript 去控制里面内容的显示隐藏最好

利用 clip-path 实现动态区域裁剪

所以,这里,我们其实是需要一个动态的区域裁剪

在我的这篇文章中 -- 如何不使用 overflow: hidden 实现 overflow: hidden?,介绍了 CSS 中几种裁剪元素的方式,而其中,最适合利用在这个效果的,就是 -- clip-path

利用 clip-path,可以非常好的实现,动态裁剪的功能,并且,代码也非常简单:

<div class="g-container"></div>
.g-container {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
    transition: clip-path .3s linear;
    clip-path: circle(20px at 44px 44px);
    background: #fff;
    
    &:hover {
        clip-path: circle(460px at 44px 44px);
    }
}

我们只需要利用 clip-path,在最开始的时候,将一个矩形 div,利用 clip-path: circle(20px at 44px 44px) 裁剪成一个圆,当 hover 的时候,扩大裁剪圆的半径到整个矩形范围即可。

效果如下:

CSS3 clip-path怎么使用

这样,我们就能完美的实现题图的效果,并且,内置的 DOM 元素,直接写进这个 div 内部即可。

<div class="g-container">
    <ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
</div>

效果如下:

CSS3 clip-path怎么使用

CodePen Demo -- clip-path zoom in animation

网址:https://codepen.io/Chokcoco/pen/yLorrRm

到此,关于“CSS3 clip-path怎么使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

CSS3 clip-path怎么使用

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

clip-path属性怎么在CSS中使用

clip-path属性怎么在CSS中使用?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。clip-path的使用polygon值为多个坐标点组成,坐标第一个值是x
2023-06-08

怎么在css3中使用clip实现一个圆环进度条

这期内容当中小编将会给大家带来有关怎么在css3中使用clip实现一个圆环进度条,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。实现思路圆环很简单,一行cssborder-radius:50%即可实现,而且
2023-06-08

JS怎么利用clip-path实现动态区域裁剪功能

这篇文章给大家介绍JS怎么利用clip-path实现动态区域裁剪功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。背景今天逛 CodePen,看到了这样一个非常有意思的效果:CodePen Demo -- Materi
2023-06-22

CSS的clip属性怎么使用

本篇内容介绍了“CSS的clip属性怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!CSS clip属性用法解析clip属性是一个比较
2023-07-04

Python clip与range函数怎么使用

本文小编为大家详细介绍“Python clip与range函数怎么使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“Python clip与range函数怎么使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一
2023-07-02

如何使用CSS的clip-path属性实现不规则图形的显示

小编给大家分享一下如何使用CSS的clip-path属性实现不规则图形的显示,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!clip-pathCSS 属性使用裁剪方
2023-06-08

编程热搜

目录