原质化风格的圆形按钮

Material Design Button Source: http://www.materialup.com/posts/material-button

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@-webkit-keyframes rotate {
    5% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    10% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    30% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    35% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    55% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    60% {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    80% {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    85% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}
@keyframes rotate {
    5% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    10% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    30% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    35% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    55% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    60% {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    80% {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    85% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}
@-webkit-keyframes animationColour1 {
    0% {
        bottom: -400px;
        right: -400px;
    }
    25% {
        width: 600px;
        height: 600px;
        bottom: -100px;
        right: -100px;
    }
    50% {
        z-index: 5;
        bottom: -100px;
        right: -100px;
    }
    51% {
        z-index: -11;
        bottom: -400px;
        right: -400px;
    }
    100% {
        bottom: -400px;
        right: -400px;
    }
}
@keyframes animationColour1 {
    0% {
        bottom: -400px;
        right: -400px;
    }
    25% {
        width: 600px;
        height: 600px;
        bottom: -100px;
        right: -100px;
    }
    50% {
        z-index: 5;
        bottom: -100px;
        right: -100px;
    }
    51% {
        z-index: -11;
        bottom: -400px;
        right: -400px;
    }
    100% {
        bottom: -400px;
        right: -400px;
    }
}
@-webkit-keyframes animationColour2 {
    0% {
        top: -400px;
        left: -400px;
    }
    25% {
        width: 600px;
        height: 600px;
        top: -100px;
        left: -100px;
    }
    50% {
        z-index: 5;
        top: -100px;
        left: -100px;
    }
    51% {
        z-index: -11;
        top: -400px;
        left: -400px;
    }
    100% {
        top: -400px;
        left: -400px;
    }
}
@keyframes animationColour2 {
    0% {
        top: -400px;
        left: -400px;
    }
    25% {
        width: 600px;
        height: 600px;
        top: -100px;
        left: -100px;
    }
    50% {
        z-index: 5;
        top: -100px;
        left: -100px;
    }
    51% {
        z-index: -11;
        top: -400px;
        left: -400px;
    }
    100% {
        top: -400px;
        left: -400px;
    }
}
@-webkit-keyframes animationColour3 {
    0% {
        top: -400px;
        right: -400px;
    }
    25% {
        width: 600px;
        height: 600px;
        top: -100px;
        right: -100px;
    }
    50% {
        z-index: 5;
        top: -100px;
        right: -100px;
    }
    51% {
        z-index: -11;
        top: -400px;
        right: -400px;
    }
    100% {
        top: -400px;
        right: -400px;
    }
}
@keyframes animationColour3 {
    0% {
        top: -400px;
        right: -400px;
    }
    25% {
        width: 600px;
        height: 600px;
        top: -100px;
        right: -100px;
    }
    50% {
        z-index: 5;
        top: -100px;
        right: -100px;
    }
    51% {
        z-index: -11;
        top: -400px;
        right: -400px;
    }
    100% {
        top: -400px;
        right: -400px;
    }
}
@-webkit-keyframes animationColour4 {
    0% {
        bottom: -400px;
        left: -400px;
    }
    25% {
        width: 600px;
        height: 600px;
        bottom: -100px;
        left: -100px;
    }
    50% {
        z-index: 5;
        bottom: -100px;
        left: -100px;
    }
    51% {
        z-index: -11;
        bottom: -400px;
        left: -400px;
    }
    100% {
        bottom: -400px;
        left: -400px;
    }
}
@keyframes animationColour4 {
    0% {
        bottom: -400px;
        left: -400px;
    }
    25% {
        width: 600px;
        height: 600px;
        bottom: -100px;
        left: -100px;
    }
    50% {
        z-index: 5;
        bottom: -100px;
        left: -100px;
    }
    51% {
        z-index: -11;
        bottom: -400px;
        left: -400px;
    }
    100% {
        bottom: -400px;
        left: -400px;
    }
}
body {
    background: #255f9e;
    text-align: center;
    color: #ebebeb;
}
body a {
    text-decoration: none;
    color: #dba411;
}
.button {
    height: 300px;
    width: 300px;
    position: relative;
    margin: 0 auto;
    margin-top: 50px;
    background-color: #f00;
    border-radius: 50%;
    -moz-border-radius: 50%;
    overflow: hidden;
    z-index: 5;
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.1);
}
.button .icon-holder {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 34%;
    /* transform:translate(-50%, -50%); */
    
    top: 34%;
    z-index: 100;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-animation: rotate 4s linear infinite;
    animation: rotate 4s linear infinite;
}
.button .icon-holder:before {
    content: "";
    position: absolute;
    width: 16px;
    height: 90px;
    background-color: #ebebeb;
    left: 42px;
    top: 5px;
}
.button .icon-holder:after {
    content: "";
    position: absolute;
    width: 90px;
    height: 16px;
    background-color: #ebebeb;
    left: 5px;
    top: 42px;
}
.button .overlay {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    z-index: 10;
    position: absolute;
}
.button .colour1 {
    background-color: #dba411;
    right: -400px;
    bottom: -400px;
    -webkit-animation: animationColour1 4s ease-out infinite;
    animation: animationColour1 4s ease-out infinite;
}
.button .colour2 {
    background-color: #16e3c8;
    left: -400px;
    top: -400px;
    -webkit-animation: animationColour2 4s ease-out infinite;
    animation: animationColour2 4s ease-out infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.button .colour3 {
    background-color: #9e17b8;
    right: -400px;
    top: -400px;
    -webkit-animation: animationColour3 4s ease-out infinite;
    animation: animationColour3 4s ease-out infinite;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.button .colour4 {
    background-color: #f00;
    left: -400px;
    bottom: -400px;
    -webkit-animation: animationColour4 4s ease-out infinite;
    animation: animationColour4 4s ease-out infinite;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

HTML

Material Design Button Source: http://www.materialup.com/posts/material-button

编辑器支持Emmet

快捷键

Material Design Button Source: http://www.materialup.com/posts/material-button

新拟物化风格的wifi 3D按钮

带圆球滑标的新拟物化风格刻度尺

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：