CSS3 Clip-Path路径制作的播放/暂停转换按钮

Clip-path play/pause button transition

CSS3

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

*,
*:before,
*:after,
ul,
li,
a,
button,
input,
h1,
h2,
h3,
h4,
h5,
h6,
p,
img,
image,
svg,
path,
g,
canvas {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: transparent;
    border: none;
    text-decoration: none;
    font-family: 'Roboto';
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    list-style: none;
    position: relative;
}
html,
body {
    width: 100%;
    height: inherit;
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    margin: 0;
    padding: 0;
    background-color: #FAFAFA;
    font-family: 'Roboto';
}
.button {
    width: 150px;
    height: 150px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    border: 3px solid #1e90ff;
}
.button--play {
    border-radius: 50%;
}
.button--play .button__shape {
    width: 25px;
    height: 75px;
    background: #1e90ff;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.button--play .button__shape--one {
    -webkit-clip-path: polygon(0 0, 100% 25%, 100% 75%, 0% 100%);
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
}
.button--play .button__shape--two {
    -webkit-clip-path: polygon(0 25%, 100% 50%, 100% 50%, 0 75%);
    -webkit-transform: translateX(4.9px);
    transform: translateX(4.9px);
}
.button--play.button--active .button__shape--one {
    -webkit-clip-path: polygon(0 0, 50% 0%, 50% 100%, 0% 100%);
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
}
.button--play.button--active .button__shape--two {
    -webkit-clip-path: polygon(50% 0, 100% 0%, 100% 100%, 50% 100%);
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
}

HTML

Clip-path play/pause button transition

CSS3

编辑器支持Emmet

快捷键

Clip-path play/pause button transition

CSS3

使用CSS3裁剪路径（clip-path）属性实现燕尾形状的文本

使用CSS3路径裁剪（clip-path）实现的图片裁剪动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：