炫彩漸層底圖效果
按鈕底色為漸層並且有動態的效果
重點:
- transform: skewY(-10deg); //Y軸傾斜
transform: skewY(10deg); - box-shadow: 0 30px 10px rgba(0, 0, 0, 0.1),
inset 0 0 20px rgba(0, 0, 0, 0.2); //內陰影
效果演示:
HTML:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>炫彩漸層互動按鈕</title> <link rel="stylesheet" href="style.css"> </head> <body id="dailycss_20200821"> <a href="#">BUTTON</a> </body> </html>
CSS:
#dailycss_20200821 { background: #333; } #dailycss_20200821 a { width: 200px; height: 60px; line-height: 60px; text-align: center; position: absolute; top: 50%; left: 50%; display: block; text-decoration: none; color: #fff; transform: translate(-50%, -50%); transition: 0.5s all ease; box-sizing: border-box; background: linear-gradient(90deg, #03a9f4, #f441a5, #03a9f4); background-size: 200%; border-radius: 0px; animation: animate 1s linear infinite; -webkit-animation: animate 1s linear infinite; } @keyframes animate { 0% { background-position: 0%; } 100% { background-position: 200%; } }
來源:
迴響列表
目前還沒有任何留言
留言表單