单个div+css布局实现发光悬浮按钮效果代码
代码语言:html
所属分类:布局界面
代码描述:单个div+css布局实现发光悬浮按钮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: flex; justify-content: center; align-items: center; height: 100dvh; background-color: #43464b; overflow: hidden; } .iridiscent { position: relative; z-index: 0; padding: 1rem 3rem; border: 1px solid #799df1; border-radius: 9999px; font-size: 1.5rem; font-weight: bold; text-transform: uppercase; color: #000; box-shadow: inset 0 0 1rem 0 #f7f7f6; cursor: pointer; overflow: hidden; transition: box-shadow 0.5s ease; background: linear-gradient(60deg, #799df1 5%, #60c1ec 15%, #7bd9de 25%, #cfb0d2 35%, #799df1 45%, #60c1ec 55%, #7bd9de 65%, #cfb0d2 75%, #799df1 85%, #60c1ec 95%, #7bd9de); background-size: 200% 200%; background-position: -100% -100%; animation: moving1; animation-duration: 8s; animation-iteration-count: infinite; } @keyframes moving1 { 20% { background-position: -130% -120%; } 40% { background-position: -140% -100%; } 70% { background-position: -110% -130%; } } .iridiscent:before { content: ""; position: absolute; top: 0.2rem; left: 0..........完整代码请登录后点击上方下载按钮下载查看
网友评论0