使用svg path和css clip-path实现单击并保持按钮动画特效

click and hold button，鼠标点击按钮并保持，按钮持续裂开最后中间弹出咖啡杯。

css3, svg, button

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

holdfills.forEach(element => {

//add the noselect class to the element to prevent browser BS
    element.classList.add('noSelect');

//create the backfill element and add it to the DOM.
    let newDiv = document.createElement("div");
    newDiv.classList.add('buttfill');
    element.insertBefore(newDiv, element.firstChild);

//callback function
    let callbackFunc = function(e) {
        e.target.removeEventListener(e.type, arguments.callee)
        let userDefinedCallback = eval(element.dataset.callbackfunction);
        if (typeof userDefinedCallback == 'function') {
            userDefinedCallback();
        }
    };

//define the functions to be used
    let addClickClass = function(e) {
        element.classList.add('clicked');
        element.addEventListener('transitionend', callbackFunc);
    };
    let removeClickClass = function(e) {
        element.classList.remove('clicked');
        element.removeEventListener('transitionend', callbackFunc);
    };

//prevent context menu on longpress for mobile devices
    if (isMobile) {
        element.oncontextmenu = function(event) {
            event.preventDefault();
            event.stopPropagation();
            event.stopImmediatePropagation();
            return false;
        };
    }

//add or remove the clicked classes on the button
    element.addEventListener(startEvent, addClickClass);
    document.body.addEventListener(endEvent, removeClickClass);
});

编译

CSS

html,
body {
    padding: 0;
    margin: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    letter-spacing: 2px;
    background-color: #303030;
    color: #fff;
    overflow: hidden;
}
.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
}
.centerbutton {
    width: 230px;
    height: 65px;
    border: 1px solid #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transform: skewX(-15deg);
    transform: skewX(-15deg);
    cursor: pointer;
}
.centerbutton .inner {
    -webkit-transform: skewX(15deg);
    transform: skewX(15deg);
}
.callbackdiv {
    opacity: 0;
    margin-top: -100px;
    margin-bottom: -120px;
    -webkit-transition: 300ms;
    transition: 300ms;
}
.callbackdiv.show {
    opacity: 1;
    margin-bottom: 10px;
    font-size: 20px;
    -webkit-transition: 300ms;
    transition: 300ms;
}
.callbackdiv .steam1,
.callbackdiv .steam2,
.callbackdiv .steam3 {
    -webkit-transition: 200ms linear;
    transition: 200ms linear;
}
.callbackdiv.show .steam1,
.callbackdiv.show .steam2,
.callbackdiv.show .steam3 {
    -webkit-transition: 4000ms linear;
    transition: 4000ms linear;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
}
.callbackdiv.show .steam1 {
    -webkit-transform: translateY(-7px);
    transform: translateY(-7px);
}
.callbackdiv.show .steam2 {
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
}
.callbackdiv.show .steam3 {
    -webkit-transform: translateY(-22px);
    transform: translateY(-22px);
}
.clickedClone {
    color: #303030;
    -webkit-transition: 1000ms ease-in-out;
    transition: 1000ms ease-in-out;
}
.clickedClone .buttfill {
    -webkit-clip-path: inset(0% 0%);
    clip-path: inset(0% 0%);
}
.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.holdfill {
    -webkit-transition: 1000ms ease-in-out;
    transition: 1000ms ease-in-out;
}
.buttfill {
    background-color: #fff;
    height: 100%;
    width: 100%;
    position: absolute;
    -webkit-clip-path: inset(0% 50%);
    clip-path: inset(0% 50%);
    -webkit-transition: 1000ms ease-in-out;
    transition: 1000ms ease-in-out;
}
.clicked {
    color: #303030;
    -webkit-transition: 1000ms ease-in-out;
    transition: 1000ms ease-in-out;
}
.clicked .buttfill {
    -webkit-clip-path: inset(0% 0%);
    clip-path: inset(0% 0%);
}

HTML

<div class="container">
    <div class="callbackdiv">
        <svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" width="160" fill="#fff">
            <path d="M79.756,57.128c-1.113-1.188-2.549-1.842-4.045-1.842h-3.894c0.047-1.055,0.089-2.113,0.089-3.216  c0-1.346-1.09-2.436-2.434-2.436H20.76c-1.344,0-2.434,1.09-2.434,2.436c0,16.592,5.25,27.637,15.011,32.24h-7.75  c-1.346,0-2.436,1.092-2.436,2.436c0,1.345,1.09,2.437,2.436,2.437h39.057c1.344,0,2.436-1.092,2.436-2.437  c0-1.344-1.092-2.436-2.436-2.436h-7.748c4.455-2.102,7.954-5.563,10.455-10.268c0.195,0.049,0.385,0.119,0.596,0.119h5.633  c4.364,0,8.184-4.164,8.52-9.279C82.299,61.807,81.424,58.906,79.756,57.128z M45.115,81.877c-13.935,0-21.287-9.208-21.879-27.371  h43.76C66.404,72.669,59.051,81.877,45.115,81.877z M73.58,69.291h-4.178c0.936-2.744,1.627-5.783,2.033-9.133h4.275  c0.173,0,0.362,0.162,0.49,0.299c0.563,0.602,1.172,2.036,1.035,4.109C77.074,67.083,75.363,69.291,73.58,69.291z"></path>
            <path class="steam1" d="M45.115,42.196c-1.344,0-2.437-1.089-2.437-2.436V29.41c0-1.345,1.093-2.436,2.437-2.436c1.346,0,2.437,1.091,2.437,2.436  v10.35C47.552,41.106,46.461,42.196,45.115,42.196z"></path>
            <path class="steam2" d="M54.857,47.067c-1.346,0-2.435-1.092-2.435-2.436V34.281c0-1.345,1.089-2.435,2.435-2.435s2.436,1.09,2.436,2.435v10.351  C57.293,45.975,56.203,47.067,54.857,47.067z"></path>
            <path class="steam3" d="M35.375,47.067c-1.346,0-2.436-1.092-2.436-2.436V34.281c0-1.345,1.09-2.435,2.436-2.435c1.345,0,2.433,1.09,2.433,2.435  v10.351C37.808,45.975,36.72,47.067,35.375,47.067z"></path>
        </svg>
    </div>
    <div id="theButton" class="centerbutton holdfill" data-callbackfunction="showCoffee();">
        <div class="inner">
            CLICK + HOLD
        </div>
    </div>
</div>

setTimeout(() => {
            document.querySelector('.callbackdiv').classList.remove('show');
            document.getElementById('theButton').classList.remove('clickedClone');
        }, 4000);
    }
</script>

click and hold button，鼠标点击按钮并保持，按钮持续裂开最后中间弹出咖啡杯。

css3, svg, button

编辑器支持Emmet

快捷键

click and hold button，鼠标点击按钮并保持，按钮持续裂开最后中间弹出咖啡杯。

css3, svg, button

使用CSS3 clip-path实现的标题文本水纹波动动画特效

使用three svgloader实现svg图像和3D粘稠物混合特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：