CSS3鼠标悬停动画-企业网站制作推广公司

css中鼠标悬停背景色从下到上,CSS3鼠标悬停动画

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            .btn{
                position: relative;
                width: auto;
                min-width: 120px;
                padding: 10px;
                text-align: center;
                color: #fff;
                background: #00d463;
                cursor: pointer;
                border-radius: 4px;
                border: none;
            }

            .btn:after,.btn:before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 0;
                height: 100%;
                background: #00d463;
                z-index:-2;
                border-radius: 4px;
            }

            .btn:hover{
                z-index:1;
                background:transparent;
            }            
          
            .btn:before {
                transition: .3s;
                background: #14ae5c;
                z-index:-1;
            }          

            .btn:hover:after,.btn:hover:before {
                width: 100%;
            }
          
		  
		  
		  
#bc {
  width: 200px;
  height: 100px;
  background: linear-gradient(yellow 50%, #ccc 50%);
    background-size: 100% 200%;
    background-position: 0 100%;
}
#bc:hover {
  -webkit-animation: myfirst 1s 1;
  background-position: 0 0%;
}

@-webkit-keyframes myfirst
{
  0% {
        background-position: 0 100%;
    }
    100% {
        background-position: 0 0%;
    }
}

        </style>
    </head>
    <body>
        <button class="btn">Try Free</button>
		
		
		<div id="bc">sadsadsada
</div>

    </body>
</html>

鼠标悬停，背景色动画特效

标签： CSS3鼠标悬停动画