• 首页 Home
• 服务 Service
• 案例 Case
• 关于 About
• 新闻 News
• 联系 Contact

Tel：028-86922220 我有需求

.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;
    }
}

@property --size {
  syntax: '';
  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 的时候，让原本只是一个小圆背景，变成一个大圆背景，效果如下：

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，可以非常好的实现，动态裁剪的功能，并且，代码也非常简单：

.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 的时候，扩大裁剪圆的半径到整个矩形范围即可。

效果如下：

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

    

        
11111
        
22222
        
33333
        
44444
    

效果如下：

CodePen Demo -- clip-path zoom in animation

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

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