教育网站集群建设申请,提示网站建设页面,网络维护服务合同模板,.net做的学校网站欢迎来到前端设计专栏#xff0c;本专栏收藏了一些好看且实用的前端作品#xff0c;使用简单的html、css语法打造创意有趣的作品#xff0c;为网站加入更多高级创意的元素。 css
body{height: 100vh;display: flex;justify-content: center;align-items: center;background… 欢迎来到前端设计专栏本专栏收藏了一些好看且实用的前端作品使用简单的html、css语法打造创意有趣的作品为网站加入更多高级创意的元素。 css
body{height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #000;
}
.icon button{position: relative;display: inline-block;border: none;width: 200px;height: 60px;background-color: skyblue;color: #fff;line-height: 60px;text-align: center;text-decoration: none;background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);background-size: 400%;border-radius: 10px;}keyframes animate {0%{background-position: 0 0;}100%{ background-position: 400% 0;}
}.icon button{animation: animate 8s linear infinite;
}/* //添加光影 */
.icon button:before{content: ;position: absolute;left: -5px;top: -5px;right: -5px;bottom: -5px;z-index: -1;background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);background-size: 400%;border-radius: 10px;opacity: 0;transition: all 1s;
}
.icon button:hover:before{filter: blur(20px);opacity: 1;
}
html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href流光按钮.css
/head
bodydiv classiconbutton href#Button/button/div
/body
/html
