css实现4种按钮悬浮动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现4种按钮悬浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> body { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;background-color:#d0e6e7; } .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% { transform: rotate(-3deg) translate3d(0, 0, 0); } 75% { transform: rotate(1deg) translate3d(0, 0, 0); } 100% { transform: rotate(0deg) translate3d(0, 0, 0); } } @keyframes storm { 0% { transform: translate3d(0, 0, 0) translateZ(0); } 25% { transform: translate3d(4px, 0, 0) translateZ(0); } 50% { transform: translate3d(-3px, 0, 0) translateZ(0); } 75% { transform: translate3d(2px, 0, 0) translateZ(0); } 100% { transform: translate3d(0, 0, 0) translateZ(0); } } .btn-pill:before, .btn-pill:after { position: absolute; right: 0; bottom: 0; width: 100px; height: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0