button { text-decoration:none; position:relative; border:none; font-size:14px; font-family:inherit; cursor:pointer; color:#fff; width:9em; height:3em; line-height:2em; text-align:center; background:linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4); background-size:300%; border-radius:30px; z-index:1; } button:hover { animation:ani 8s linear infinite; border:none; } @keyframes ani { 0% { background-position:0%; } 100% { background-position:400%; } }button:before { content:""; position:absolute; top:-5px; left:-5px; right:-5px; bottom:-5px; z-index:-1; background:linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4); background-size:400%; border-radius:35px; transition:1s; } button:hover::before { filter:blur(20px); } button:active { background:linear-gradient(32deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4); }
更新时间:2024-07-31 14:50:22
这个是纯css所作出的效果动画样式