div+css实现按钮悬浮波形扩散动画效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现按钮悬浮波形扩散动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #000000; } #button-container { position: relative; } .pop-button { background: linear-gradient( 45deg, rgba(255, 85, 85, 0.6), rgba(85, 255, 85, 0.2), rgba(85, 85, 255, 0.6) ); background-size: 600% 100%; border: none; border-radius: 25px; color: white; cursor: pointer; font-family: "Gruppo", sans-serif; font-size: 18px; padding: 15px 30px; position: relative; text-align: center; transition: all 0.3s ease, background 5s ease; z-index: 1; } .pop-button:hover { transform: scale(1.5); background-position: 100% 0; } .explosion { position: fixed; border-radius: 50%; opacity: 0; animation: explosion-animation 1s; } @keyframes explosion-animation { 0% { opacity: 1; transform: scale(0); } 100% { opacity: 0; transform: scale(5); } } </style> <link href="https://fonts.googleapis.com/css2?family=Gruppo&display=swap" rel="stylesheet"> </head> <body > <div id="button-container"> <button type="button" class="pop-button">Explore</button> </div> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0