css实现四种鼠标悬浮按钮背景动画效果代码-html代码-BFW代码库

css实现四种鼠标悬浮按钮背景动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现四种鼠标悬浮按钮背景动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    body {
        height:100vh;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
}
.container {
        width:80%;
        height:450px;
        display:flex;
        align-items:center;
        justify-content:space-between;
}
button {
        position:relative;
        margin:0;
        padding:5px 12px;
        height:60px;
        width:150px;
        outline:none;
        text-decoration:none;
        display:flex;
        justify-content:center;
        align-items:center;
        cursor:pointer;
        text-transform:uppercase;
        background-color:#ffffff;
        border:1px solid rgba(22,76,167,0.6);
        border-radius:10px;
        color:#1d89ff;
        font-weight:400;
        font-size:20px;
        font-family:inherit;
        z-index:0;
        overflow:hidden;
        transition:all 0.3s cubic-bezier(0.02,0.01,0.47,1);
}
button span {
        color:#164ca7;
        font-size:12px;
        font-weight:500;
        letter-spacing:0.7px;
}
button:hover {
        animation:rotate 0.7s ease-in-out both;
}
button:hover span {
        animation:storm 0.7s ease-in-out both;
        animation-delay:0.06s;
}
@keyframes rotate {
        0% {
        transform:rotate(0deg) translate3d(0,0,0);
}
25% {
        transform:rotate(3deg) translate3d(0,0,0);
}
50% {
        t.........完整代码请登录后点击上方下载按钮下载查看