CSS3 两种有趣的按钮悬停动画效果

一个是重影漂浮，一个是圆环效果。

CSS3, button, hover

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
    width: 100%;
    height: 100%;
    text-rendering: optimizeLegibility;
}
body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    text-rendering: optimizeLegibility;
}
.section {
    width: 100%;
    height: 50%;
    position: absolute;
}
.one {
    top: 0%;
    left: 0;
    background: #000;
}
.one div {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    cursor: pointer;
    padding: 20px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    -webkit-transition: ease all 0.4s;
    -moz-transition: ease all 0.4s;
    -o-transition: ease all 0.4s;
    transition: ease all 0.4s;
    z-index: 10;
}
.one div:hover {
    color: #000;
}
.one div::after {
    content: " ";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: -10;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    opacity: 0;
    -webkit-transition: ease all 0.3s;
    -moz-transition: ease all 0.3s;
    -o-transition: ease all 0.3s;
    transition: ease all 0.3s;
}
.one div::before {
    content: " ";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: -10;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 0px #ccc, 0px 0px 0px #808080, 0px 0px 0px #505050;
    -moz-box-shadow: 0px 0px 0px #ccc, 0px 0px 0px #808080, 0px 0px 0px #505050;
    -o-box-shadow: 0px 0px 0px #ccc, 0px 0px 0px #808080, 0px 0px 0px #505050;
    box-shadow: 0px 0px 0px #ccc, 0px 0px 0px #808080, 0px 0px 0px #505050;
    -webkit-transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.4s;
    -moz-transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.4s;
    -o-transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.4s;
    transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.4s;
    opacity: 0;
}
.one div:hover::after {
    opacity: 1.0;
}
.one div:hover::before {
    opacity: 1.0;
    -webkit-box-shadow: 0px -10px 0px #ccc, 0px -20px 0px #808080, 0px -30px 0px #505050;
    -moz-box-shadow: 0px -10px 0px #ccc, 0px -20px 0px #808080, 0px -30px 0px #505050;
    -o-box-shadow: 0px -10px 0px #ccc, 0px -20px 0px #808080, 0px -30px 0px #505050;
    box-shadow: 0px -10px 0px #ccc, 0px -20px 0px #808080, 0px -30px 0px #505050;
    animation: dribble 1s cubic-bezier(0.55, 0, 0.1, 1) infinite alternate;
}
@keyframes dribble {
    50% {
        -webkit-box-shadow: 50px -30px 0px #808080, 70px -40px 0px #505050;
        -moz-box-shadow: 50px -30px 0px #808080, 70px -40px 0px #505050;
        -o-box-shadow: 50px -30px 0px #808080, 70px -40px 0px #505050;
        box-shadow: 50px -30px 0px #808080, 70px -40px 0px #505050;
    }
    100% {
        -webkit-box-shadow: -50px 30px 0px #808080, -70px 40px 0px #505050;
        -moz-box-shadow: -50px 30px 0px #808080, -70px 40px 0px #505050;
        -o-box-shadow: -50px 30px 0px #808080, -70px 40px 0px #505050;
        box-shadow: -50px 30px 0px #808080, -70px 40px 0px #505050;
    }
}
.two {
    top: 50%;
    left: 0;
    background: #EA038C;
}
.two div {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 900;
    cursor: pointer;
    -webkit-transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.2s;
    -moz-transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.2s;
    -o-transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.2s;
    transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.2s;
}
.two div::after {
    position: absolute;
    left: -10px;
    top: -10px;
    width: 100%;
    height: 100%;
    background: #3EADFF;
    content: " ";
    padding: 10px;
    z-index: -1;
    -webkit-transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.3s;
    -moz-transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.3s;
    -o-transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.3s;
    transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.3s;
    transform: scale(0);
}
.two div:hover {
    color: #000;
    transition-delay: 1.3s;
}
.two div:hover::after {
    transform: scale(1.2);
    transition-delay: 1.3s;
}
.two div p:nth-child(1) {
    position: absolute;
    width: 20px;
    height: 20px;
    border: solid 4px #01ADED;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    -webkit-box-shadow: 0px 2px 0px #003347, inset 0px 2px 0px #003347;
    -moz-box-shadow: 0px 2px 0px #003347, inset 0px 2px 0px #003347;
    -o-box-shadow: 0px 2px 0px #003347, inset 0px 2px 0px #003347;
    box-shadow: 0px 2px 0px #003347, inset 0px 2px 0px #003347;
    top: 0px;
    left: -40px;
    -webkit-transition: cubic-bezier(0.55, 0, 0.1, 1) all 1s;
    -moz-transition: cubic-bezier(0.55, 0, 0.1, 1) all 1s;
    -o-transition: cubic-bezier(0.55, 0, 0.1, 1) all 1s;
    transition: cubic-bezier(0.55, 0, 0.1, 1) all 1s;
    opacity: 0.0;
}
.two div p:nth-child(2) {
    position: absolute;
    width: 20px;
    height: 20px;
    border: solid 4px #01ADED;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    -webkit-box-shadow: 0px 2px 0px #003347, inset 0px 2px 0px #003347;
    -moz-box-shadow: 0px 2px 0px #003347, inset 0px 2px 0px #003347;
    -o-box-shadow: 0px 2px 0px #003347, inset 0px 2px 0px #003347;
    box-shadow: 0px 2px 0px #003347, inset 0px 2px 0px #003347;
    top: 0px;
    right: -40px;
    -webkit-transition: cubic-bezier(0.55, 0, 0.1, 1) all 1s;
    -moz-transition: cubic-bezier(0.55, 0, 0.1, 1) all 1s;
    -o-transition: cubic-bezier(0.55, 0, 0.1, 1) all 1s;
    transition: cubic-bezier(0.55, 0, 0.1, 1) all 1s;
    opacity: 0.0;
}
.two div:hover p:nth-child(1) {
    animation: jump 1.5s cubic-bezier(0.55, 0, 0.1, 1);
}
.two div:hover p:nth-child(2) {
    animation: jumping 1.5s cubic-bezier(0.55, 0, 0.1, 1);
}
@keyframes jump {
    20% {
        opacity: 1.0;
        top: -40px;
        left: 10px;
    }
    40% {
        transform: rotateY(180deg);
        opacity: 1;
        top: -20px;
        left: 40px;
    }
    60% {
        opacity: 1;
        top: -50px;
        left: 85px;
    }
    80% {
        opacity: 1;
        top: -50px;
        left: 85px;
        transform: rotateY(-180deg);
    }
    100% {
        opacity: 1;
        top: -20px;
        left: 105px;
    }
}
@keyframes jumping {
    20% {
        opacity: 1.0;
        top: -40px;
        right: 10px;
    }
    40% {
        transform: rotateY(180deg);
        opacity: 1;
        top: -20px;
        right: 40px;
    }
    60% {
        opacity: 1;
        top: -50px;
        right: 85px;
    }
    80% {
        opacity: 1;
        top: -50px;
        right: 85px;
        transform: rotateY(-180deg);
    }
    100% {
        opacity: 1;
        top: -20px;
        right: 105px;
    }
}
.three {
    position: absolute;
    top: 100%;
    left: 0;
    background: #FDF300;
}
.three div {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    -webkit-transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.4s;
    -moz-transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.4s;
    -o-transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.4s;
    transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.4s;
    cursor: pointer;
    font-weight: 900;
}
.three div::after {
    content: " ";
    position: absolute;
    top: 0px;
    right: 0px;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 10px solid #000;
    transform: rotate(20deg);
    opacity: 0;
    -webkit-transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.2s;
    -moz-transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.2s;
    -o-transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.2s;
    transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.2s;
}
.three div::before {
    content: " ";
    position: absolute;
    top: -4px;
    right: 8px;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 10px solid #000;
    transform: rotate(-20deg);
    opacity: 0;
    -webkit-transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.1s;
    -moz-transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.1s;
    -o-transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.1s;
    transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.1s;
}
.three div:hover::after {
    opacity: 1;
    top: -8px;
    transition-delay: 0.4s;
}
.three div:hover::before {
    opacity: 1;
    top: -12px;
    transition-delay: 0.4s;
}
.three div img {
    position: absolute;
    top: 28px;
    right: -40px;
    width: 32px;
    opacity: 0.0;
    -webkit-transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.4s;
    -moz-transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.4s;
    -o-transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.4s;
    transition: cubic-bezier(0.55, 0, 0.1, 1) all 0.4s;
}
.three div:hover img {
    opacity: 1.0;
    right: -20px;
    top: 10px;
    transform: rotate(-25deg);
    animation: click 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    animation-delay: 0.4s;
}
@keyframes click {
    100% {
        transform: rotate(-25deg) scale(0.8);
    }
}

HTML

一个是重影漂浮，一个是圆环效果。

CSS3, button, hover

编辑器支持Emmet

快捷键

一个是重影漂浮，一个是圆环效果。

CSS3, button, hover

使用CSS3 box-shadow实现的7个按钮悬停动画特效

CSS3 2个实用的鼠标悬停文本下划线动画效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：