用HTML和CSS制作超级好看的流光效果按钮

STPace 2020-05-07

首先按钮效果如下

用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;    }}
 

相关推荐

aSuncat / 0评论 2020-08-18