css实现酷炫的按钮悬浮边框动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现酷炫的按钮悬浮边框动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #060505; } .button { border: 2px solid #d2bdff; height: 80px; width: 200px; border-radius: 4px; position: relative; cursor: pointer; font-family: "Roboto", sans-serif; margin: 25px; } .button::after { content: "HOVER ME"; position: absolute; top: 41%; left: 50%; transform: translate(-50%); color: #d2bdff; transition: all 0.1s linear; } .button::before { content: ""; position: relative; display: block; height: 15px; width: 15px; background: #d2bdff; box-shadow: 0px 0px 10px 3px #0ff; margin-left: -8px; margin-top: -8px; opacity: 0; transition: all 0.1s linear; border-radius: 100%; animation: star 1.3s linear infinite; } @keyframes star { 0% { margin-left: -8px; margin-top: -8px; } 25% { margin-left: 194px; margin-top: -8px; } 50% { margin-left: 194px; margin-top: 75px; } 75% { margin-left: -8px; margin-top: 75px; } 100% { margin-left: -8px; margin-top: -8px; } } .button:hover::before { opacity: 1; animation: star 1.3s linear infinite; } .button:hover::after { content: "I'M GLOWING"; text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 20px #82bedc, 0 0 30px #82bedc, 0 0 40px #82bedc, 0 0 50px #82bedc, 0 0 60px #82bedc; } .button2 { position: relative; display: inline-block; padding: 30px 61px; border-radius: 4px; color: #03e9f4; text-decoration: none; text-transform: uppercase; overflow: hidden; margin: 25px; font-family: "Roboto", sans-serif; filter: hue-rotate.........完整代码请登录后点击上方下载按钮下载查看
网友评论0