CSS3 用CLIP来做图片切换的渐变效果

Section transition using CSS clip 有一个屏幕中间圆孔放大的效果。

CSS3

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2389
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    overflow: hidden;
    margin: 0;
    -webkit-perspective: 600px;
    perspective: 600px;
}
.container {
    width: 100vw;
    height: 100vh;
    background: url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/unsplahBg2.jpg) center / cover;
    -webkit-perspective: 600px;
    perspective: 600px;
    -webkit-transition: 1.5s all ease-in-out;
    transition: 1.5s all ease-in-out;
}
.clip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/unsplahBg1.jpg) center / cover;
    -webkit-clip-path: circle(0 at 50vw 50vh);
    clip-path: circle(0 at 50vw 50vh);
    -webkit-transform: translateZ(-100px);
    transform: translateZ(-100px);
    -webkit-transition: 1.5s all ease-in-out;
    transition: 1.5s all ease-in-out;
}
.container.visible .clip {
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
    -webkit-clip-path: circle(60vmax at 50vw 50vh);
    clip-path: circle(60vmax at 50vw 50vh);
}
.container.visible {
    -webkit-transform: translateZ(100px);
    transform: translateZ(100px);
}
button {
    position: absolute;
    left: 50%;
    bottom: 20px;
    background: white;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 1.5em;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

HTML

Section transition using CSS clip 有一个屏幕中间圆孔放大的效果。

CSS3

编辑器支持Emmet

快捷键

Section transition using CSS clip 有一个屏幕中间圆孔放大的效果。

CSS3

CSS3 使用网格和flexbox来增强缩略图列表的显示效果

使用CSS3 perspective变换实现的电影卡片悬停3D偏转动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：