自己人网站建设,郑州浩方网站建设智联招聘,团队拓展游戏,大众点评如何做团购网站思路很简单#xff0c;实现方法有很多很多。但是大体思路与实现方法都类似#xff1a;渐变色 动画#xff0c;主要区别在动画的具体实现 0、HTML 结构
!DOCTYPE html
html langen
headmeta charsetUTF-8titl… 思路很简单实现方法有很多很多。但是大体思路与实现方法都类似渐变色 动画主要区别在动画的具体实现 0、HTML 结构
!DOCTYPE html
html langen
headmeta charsetUTF-8title流光按钮/title
/head
bodydiv classwrapperdiv classbtn按钮/div/div
/body
/html1-1、CSS 实现一
style*{padding: 0;margin: 0;}property --rotate{syntax: angle;initial-value: 20deg;inherits: false;}body{background-color: rgba(243, 243, 243);}.wrapper{position: relative;padding: 50px;background-color: rgb(0, 0, 0);z-index: -4;height: 500px;}.wrapper .btn{overflow: hidden;position: relative;text-align: center;border-radius: 7px;width: 100px;height: 50px;line-height: 50px;font-size: 22px;color: white;user-select: none;margin: 50px auto;}.btn::before{position: absolute;border-radius: 7px;content: ;inset: -20px;background: linear-gradient(var(--rotate), transparent 1%, rgb(255, 0, 191) , #00b7ff, rgba(255, 0, 34, 0.719), transparent 98%);transform-origin: bottom left;z-index: -2;transition: all .4;animation: spin 2.4s linear infinite;transform-origin: 50% 50%;}.btn::after{content: ;position: absolute;border-radius: 8px;background-color: rgb(41, 41, 41);inset: 3px;z-index: -1;}keyframes spin {0%{--rotate: 0deg;}100%{--rotate: 360deg;}}
/style1-2、CSS 实现二 style*{padding: 0;margin: 0;}body{background-color: rgba(243, 243, 243);}.wrapper{position: relative;padding: 50px;background-color: rgb(0, 0, 0);z-index: -4;height: 500px;}.wrapper .btn{overflow: hidden;position: relative;text-align: center;border-radius: 7px;width: 100px;height: 50px;line-height: 50px;font-size: 22px;color: white;user-select: none;margin: 50px auto;}.btn::before{position: absolute;border-radius: 7px;content: ;inset: -20px;background: linear-gradient(0deg, transparent 1%, rgb(255, 0, 191) , #00b7ff, rgba(255, 0, 34, 0.719), transparent 98%);transform-origin: bottom left;z-index: -2;transition: all .4;animation: spin 2.4s linear infinite;transform-origin: 50% 50%;}.btn::after{content: ;position: absolute;border-radius: 8px;background-color: rgb(41, 41, 41);inset: 3px;z-index: -1;}keyframes spin {0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}/style
