用HTML和CSS制作超级好看的流光效果按钮
首先按钮效果如下
HTML代码和CSS代码：
HTML:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>流光按钮</title> <link rel="stylesheet" href="index01.css"></head><body><a href="javascript:;" >究极无敌好看</a></body></html>CSS:
*{ margin: 0px; padding: 0px;}body{ background: #000;}a{ text-decoration: none; position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); font-size: 30px; line-height: 100px; background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f3); background-size: 400%; width: 400px; height: 100px; color: #ffffff; text-align: center; border-radius:50px ; z-index: 1;}a::before{ content: ""; position: absolute; left: -5px; right: -5px; top: -5px; bottom: -5px; background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f3); background-size: 400%; border-radius: 50px; filter: blur(20px); z-index: -1;}a:hover::before{ animation: sun 8s infinite;}a:hover{ animation: sun 8s infinite;}@keyframes sun { 100%{ background-position: -400% 0; }} 相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18