css+div实现挤压弹力按钮悬浮动画效果代码
代码语言:html
所属分类:悬停
代码描述:css+div实现挤压弹力按钮悬浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { padding: 0; margin: 0; box-sizing: border-box; } body { display: grid; place-items: center; min-height: 100vh; background: ivory; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-gap: 2rem; } .button-container { width: 170px; height: 60px; margin-inline: auto; } button { width: 100%; height: 100%; background: linear-gradient(#ff9ccd, #ff369a, #cf0067); border: 1px solid #c00022; border-radius: 10px; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5); font-size: 16pt; text-align: center; color: #fff; } button:hover { cursor: pointer; } .button-container:hover .stretch-up { animation: stretchUp 0.6s forwards; } @keyframes stretchUp { 70% { transform: translateY(-20px) scale(1, 1.6); } 73% { transform: translateY(-40px) scale(1, 1); } 76% { transform: translateY(-5px) scale(1, 1); } 85% { transform: translateY(-10px) scale(1, 1); } 90% { transform: translateY(0) scale(1, 1); } } .button-container:hover .stretch-out { animation: stretchOut 0.6s forwards; } @keyframes stretchOut { 35% { transform: scale(1.5, 0.7); border-radius: 15px; } 40% { transform: scale(0.5, 1.3); } 45% { transform: scale(1.3, 0.8); } 55% { transform: scale(1, 1.2); } 60% { transform: scale(1.1, 0.9); } 65% { transform: scale(1, 1); } 75% { transform: scale(1.1, 1); } 100% { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0