建一个大型网站需要多少钱,长春网站建设开发的有哪些,哪个平台推广效果最好,微信公众号?欢迎来到前端设计专栏#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
