会动的边框效果 – 有爱前端

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Call to action</title> <style type="text/css"> @font-face { font-family: "open"; font-style: normal; font-weight: 300; src: local("Open Sans Light"), local("OpenSans-Light"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTZ1r3JsPcQLi8jytr04NNhU.woff) format('woff'); } *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html, body { padding: 0; margin: 0; width: 100%; height: 100%; } a { display: block; margin: auto; margin-top: 50px; text-decoration: none; color: inherit; } @keyframes linear { from { background-position: 0 0; } to { background-position: 200px 0; } } @keyframes radial { from { background-position: 0 0; } to { background-position: 0 60px; } } @keyframes repeating { from { background-position: 0 0; } to { background-position: 0 85px; } } @keyframes electronic { 0%, 100% { background-position: 20px -30px; } 25% { background-position: 150px 5px; } 50% { background-position: 20px 40px; } 75% { background-position: -100px 5px; } } .biliboard { width: 200px; padding: 20px; text-align: center; position: relative; background: #fff; color: #333; font: 13px open, tahoma; } .biliboard:before { content: ''; display: block; height: 100%; width: 100%; border-radius: 3px; transform: scale( 1.02, 1.08 ); position: absolute; background: #f00; background: linear-gradient( 90deg, #fafafa, #fafafa, #1D8EF7, #fafafa, #fafafa ); background-position: 55px 0; top: 0; animation: linear 1s infinite linear; left: 0; z-index: -1; } .biliboard.radial:before { background: radial-gradient( #fafafa, #fafafa, #F2A61A, #fafafa, #fafafa ); animation: radial 1s infinite linear; } .biliboard.repeating:before { background: repeating-linear-gradient( -45deg, #fafafa, #fafafa 30px, #5FC914 30px, #5FC914 60px ) fixed; animation: repeating 1s infinite linear; } .biliboard.electronic:before { background: radial-gradient( #EA238D, #EA238D, #EA238D, #EA238D, #fafafa, #fafafa ) no-repeat; background-size: 150px 50px; animation: electronic 2s infinite linear; } </style> </head> <body> <a href="#" class="biliboard electronic">Get your free ebook</a> <a href="#" class="biliboard repeating">30% Off</a> <a href="#" class="biliboard">Click NOW!</a> <a href="#" class="biliboard radial">14-days Free trial</a> </body>  </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 会动的边框效果