css实现五种按钮悬浮动画效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现五种按钮悬浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> <meta name="apple-mobile-web-app-title" content="CodePen"> <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" /> <title>CodePen - Buttons-CSS</title> <style> /* CONTAINER */ ul { display: flex; flex-wrap: wrap; padding: 2em 0; width: 100%; margin: 0 auto; justify-content: space-around; } li { margin: 0.1rem; display: flex; align-items: center; justify-content: center; flex-direction: column; } /* BUTTON GLITCH */ .button-glitch, .button-glitch:after { width: 150px; height: 76px; line-height: 78px; font-size: 20px; font-family: 'Bebas Neue', sans-serif; background: linear-gradient(45deg, transparent 5%, #FF013C 5%); border: 0; color: #fff; letter-spacing: 3px; box-shadow: 6px 0px 0px #00E6F6; outline: transparent; position: relative; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .button-glitch:after { --slice-0: inset(50% 50% 50% 50%); --slice-1: inset(80% -6px 0 0); --slice-2: inset(50% -6px 30% 0); --slice-3: inset(10% -6px 85% 0); --slice-4: inset(40% -6px 43% 0); --slice-5: inset(80% -6px 5% 0); content: 'ALTERNATE TEXT'; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%); text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6; clip-path: var(--slice-0); } .button-glitch:hover:after { animation: 1s glitch; animation-timing-function: steps(2, end); } @keyframes glitch { 0% { clip-path: var(--slice-1); transform: translate(-20px, -10px); } 10% { clip-path: var(--slice-3); transform: translate(10px, 10px); } 20% { clip-path: var(--slice-1); transform: translate(-10px, 10px); } 30% { clip-path: var(--slice-3); transform: translate(0px, 5px); } 40% { clip-path: var(--slice-2); transform: translate(-5px, 0px); } 50% { clip-path: var(--slice-3); transform: translate(5px, 0px); } 60% { clip-path: var(--slice-4); transform: translate(5px, 10px); } 70% { clip-path: var(--slice-2); transform: translate(-10px, 10px); } 80% { clip-path: var(--slice-5); transform: translate(20px, -10px); } 90% { clip-path: var(--slice-1); transform: translate(-10px, 0px); } 100% { clip-path: var(--slice-1); transform: translate(0); } } @media (min-width: 768px) { .button-glitch, .button-glitch:after { width: 200px; height: 86px; line-height: 88px; } } /* BACKGROUND MOVE */ .button-background-move { font-size: 16px; font-weight: 200; letter-spacing: 1px; padding: 13px 20px 13px; outline: 0; border: 1px solid black; cursor: pointer; position: relative; background-color: rgba(0, 0, 0, 0); user-select: none; -webkit-user-select: none; touch-action: manipulation; } .button-background-move:after { content: ""; background-color: #ffe54c; width: 100%; z-index: -1; position: absolute; height: 100%; top: 7px; left: 7px; transition: 0.2s; } .button-background-move:hover:after { top: 0px; left: 0px; } @media (min-width: 768px) { .button-background-move { padding: 13px 50px 13px; } } /* PERPECTIVE */ .button-perspective { background-color: #3DD1E7; border: 0 solid #E5E7EB; box-sizing: border-box; color: #000000; display: flex; font-family: ui-sans-serif,system-ui,-apple-system,s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0