按钮动效

来源：互联网发布：手游刷枪软件免费版编辑：程序博客网时间：2024/04/28 13:46
<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta name="description" content="">    <meta name="author" content="">    <title>Home</title><script src="http://og9n58fei.bkt.clouddn.com/jquery-2.2.4.min.js"></script></head><style>a{font-size: 1.1em;    font-weight: 400;    color: #000;    padding: 1.1em 2.5em 1.1em 2.5em;    border: 2px solid #BA0C2F;    text-decoration: none;}.hvr-bounce-to-bottom {  display: inline-block;  vertical-align: middle;  -webkit-transform: translateZ(0);  transform: translateZ(0);  box-shadow: 0 0 1px rgba(0, 0, 0, 0);  -webkit-backface-visibility: hidden;  backface-visibility: hidden;  -moz-osx-font-smoothing: grayscale;  position: relative;  -webkit-transition-property: color;  transition-property: color;  -webkit-transition-duration: 0.5s;  transition-duration: 0.5s;}.hvr-bounce-to-bottom:before {  content: "";  position: absolute;  z-index: -1;  top: 0;  left: 0;  right: 0;  bottom: 0;  background: #ffcd00;  -webkit-transform: scaleY(0);  transform: scaleY(0);  -webkit-transform-origin: 50% 0;  transform-origin: 50% 0;  -webkit-transition-property: transform;  transition-property: transform;  -webkit-transition-duration: 0.5s;  transition-duration: 0.5s;  -webkit-transition-timing-function: ease-out;  transition-timing-function: ease-out;}.hvr-bounce-to-bottom:hover, .hvr-bounce-to-bottom:focus, .hvr-bounce-to-bottom:active {  color: white;}.hvr-bounce-to-bottom:hover:before, .hvr-bounce-to-bottom:focus:before, .hvr-bounce-to-bottom:active:before {  -webkit-transform: scaleY(1);  transform: scaleY(1);  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);}</style><body><a href="#" class="hvr-bounce-to-bottom">Learn More</a></body></html>
0 0