CSS3 原质化设计的圆形按钮

通过数字技术为按钮赋予生命力。

button

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    background: #222;
}
div {
    background: #fff;
    border: 6px solid #00b279;
    border-radius: 100%;
    width: 200px;
    height: 200px;
    margin: 2.5% auto;
    position: relative;
    overflow: hidden;
    -webkit-animation: pulse 4s infinite;
    animation: pulse 4s infinite;
}
span {
    display: block;
    position: absolute;
    background: #00ffa9;
    border-radius: 100%;
    height: 200px;
    width: 200px;
    transform: scale(0);
    -webkit-animation: ping 2s infinite;
    animation: ping 2s infinite;
}
@-webkit-keyframes ping {
    100% {
        opacity: 0;
        -webkit-transform: scale(1);
    }
}
@keyframes ping {
    100% {
        opacity: 0;
        transform: scale(1);
    }
}
@-webkit-keyframes pulse {
    50% {
        -webkit-transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@keyframes pulse {
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

HTML

通过数字技术为按钮赋予生命力。

button

编辑器支持Emmet

快捷键

通过数字技术为按钮赋予生命力。

button

使用SVG创建原质化设计风格的按钮涟漪动效 - 六边形脉冲波

HTML5 CSS3很棒的一款带渐变背景色和涟漪动画的原质化风格按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：