炫酷按钮《html》


<!doctype html>
<html>
<head><meta charset="utf-8"><title>登录 - 才疏学浅俱乐部</title><meta name="viewport" content="width=device-width, initial-scale=1"/><style>@media screen and (max-width: 768px) {.login-box {height: 100%;width: 100%;}}* {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-family: "微软雅黑", serif;}html {height: 100%;margin: 0;}body {margin: 0;padding: 0;background-size: cover;width: 100%;height: 100%;}#app {background: #000000de;height: 100vh;margin: 0;padding: 0;width: 100%;overflow: hidden;}@keyframes login {from {box-shadow: rgba(253, 173, 204, 0.35) 0px 7px 29px 0px;}to {box-shadow: rgb(253 173 204) 0px 7px 29px 0px;}}@-webkit-keyframes login /* Safari 与 Chrome */{from {box-shadow: rgba(253, 173, 204, 0.35) 0px 7px 29px 0px;}to {box-shadow: rgb(253 173 204) 0px 7px 29px 0px;}}.login-animation {animation: login 2s;animation-direction: alternate;animation-iteration-count: infinite;-webkit-animation: login 2s; /* Safari 与 Chrome */-webkit-animation-direction: alternate;-webkit-animation-iteration-count: infinite;}.login-box {position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 380px;padding: 40px;background: linear-gradient(to bottom right, #2d3e5594, #7d617cbd);box-sizing: border-box;/*   box-shadow: 0 15px 25px rgba(253, 173, 204, 0.28);*/box-shadow: rgba(253, 173, 204, 0.35) 0px 7px 29px 0px;border-radius: 10px;border-top: 5px solid rgb(240 74 133 / 45%);}.login-box h2 {margin: 0 0 70px;padding: 0;text-align: center;font-weight: bolder !important;}.login-box h2 span {padding: 5px 20px;padding-bottom: 10px;opacity: 0.8;font-size: 18px;border: 1px dashed rgba(234, 136, 171, 0.45);border-top: none;position: absolute;top: 0;left: 50%;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;transform: translate(-50%, 0);color: rgba(253, 173, 204, 0.62);}.login-box .user-box {position: relative;}.login-box .user-box input {margin-top: 10px;width: 100%;padding: 10px 0;font-size: 14px;color: #4acb5b;margin-bottom: 30px;border: none;border-bottom: 1px dashed #ea88ab;outline: none;background: transparent;}.login-box .user-box label {position: absolute;padding: 10px 0;pointer-events: none;transition: .5s;top: -20px;left: 0;color: #ea88ab;font-size: 12px;font-weight: bolder;}.login-box form a {position: relative;display: inline-block;padding: 10px 20px;color: #ea88ab;font-size: 14px;text-decoration: none;text-transform: uppercase;overflow: hidden;transition: .5s;margin-top: 40px;letter-spacing: 4px;}.login-box a:hover {background: rgba(243, 193, 210, 0.38);color: #fff;border-radius: 10px;box-shadow: 0 0 5px #ea88ab,0 0 25px #ea88ab,0 0 50px #ea88ab,0 0 100px #ea88ab;}.login-box a span {position: absolute;display: block;}.login-box a span:nth-child(1) {top: 0;left: -100%;width: 100%;height: 2px;background: linear-gradient(90deg, transparent, #ea88ab);animation: btn-anim1 1s linear infinite;}@keyframes btn-anim1 {0% {left: -100%;}50%, 100% {left: 100%;}}.login-box a span:nth-child(2) {top: -100%;right: 0;width: 2px;height: 100%;background: linear-gradient(180deg, transparent, #ea88ab);animation: btn-anim2 1s linear infinite;animation-delay: .25s}@keyframes btn-anim2 {0% {top: -100%;}50%, 100% {top: 100%;}}.login-box a span:nth-child(3) {bottom: 0;right: -100%;width: 100%;height: 2px;background: linear-gradient(270deg, transparent, #ea88ab);animation: btn-anim3 1s linear infinite;animation-delay: .5s}@keyframes btn-anim3 {0% {right: -100%;}50%, 100% {right: 100%;}}.login-box a span:nth-child(4) {bottom: -100%;left: 0;width: 2px;height: 100%;background: linear-gradient(360deg, transparent, #ea88ab);animation: btn-anim4 1s linear infinite;animation-delay: .75s}</style>
</head>
<body>
<div id="app"><div class="login-box"><form><a href="javascript:void(0);" class="login-button"><span></span><span></span><span></span><span></span>登录</a></form></div>
</div></body>
</html>

炫酷按钮《html》相关推荐

自定义View-打造属于你的炫酷按钮
自定义View-打造属于你的炫酷按钮前言 Google I/O 2014 发布 Material Design ,最近也用了一下,给我的感觉就是简单而不失华丽,在Material Design我想用 ...
CSS实现8种炫酷按钮
今天给大家分享8种炫酷按钮的CSS实现. 1. 3D按钮1 现在的主流是扁平化的设计,拟物化的设计比较少见了,所以我们仅从技术角度去分析如何实现这个3D按钮该按钮的立体效果主要由按钮多出的左.下两个 ...
【每日一练】109—一款炫酷按钮的鼠标悬停效果
文 | 杨小爱写在前面按钮,几乎是任何一个项目都会用到的一个组件,因此,今天,我们来练习一个好玩的鼠标效果,具体效果,请看下面的GIF截图: 我们看完了最终效果,现在,我们一起来看一下它的源码. ...
button按钮的属性设置_web前端入门到实战：CSS实现8种炫酷按钮
今天给大家分享8种炫酷按钮的CSS实现. 1. 3D按钮1 现在的主流是扁平化的设计,拟物化的设计比较少见了,所以我们仅从技术角度去分析如何实现这个3D按钮该按钮的立体效果主要由按钮多出的左.下两个 ...
那些你不知道的炫酷按钮交互效果
在日常开发中肯定都遇到过不少有按钮交互的地方,但你有用到什么炫酷的交互效果吗?日常开发中想必最多的就是点击按钮背景文字变色,阴影,按钮按下,加载中之类的效果,相对都比较平平无奇,都是一些按部就班的效果 ...
jQuery超炫酷按钮插件及源码
现在大部分网页的按钮都是经过美化的,那些原始的浏览器按钮太过于枯燥乏味,让用户失去和网站交互的兴趣.早期我们都是通过背景图片来美化网页按钮,而现在我们可以利用扩展性更好的CSS3来制作漂亮的网页按钮, ...
css 实现app图标样式_界面按钮样式丑？不可能！16款css实现炫酷按钮
今天跟大家分享与CSS3按钮相关的特效展示案例,这些例子特效主要由CSS3编写出来,除了新鲜有创意之外,编写代码质量也很高,对于前端人员或设计师都有参考的价值,当然有的不是全CSS3编写的,部分是需要 ...
Web前端——用CSS的常用样式制作一个炫酷的按钮
文章目录笔记:CSS的常用样式炫酷按钮效果实现笔记:CSS的常用样式边框以及弧度样式 border-width:边框的线条宽度. border-style:边框的样式,例如 solid实现 d ...
炫酷实用的jQuery插件涵盖菜单、按钮、图片
新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效, ...

炫酷按钮《html》

炫酷按钮《html》相关推荐

最新文章

热门文章