material文本框与按钮边框旋转效果实现登录页面

我们总是看见一些效果比较酷炫的登录页面，那么他们是怎么实现的呢？今天我就简单的写了一个，样式比较丑，别太在意，可以自己修改样式。

效果图：

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./login.css"></link>
</head>
<body><div class="center"><div class="from-item"><input id="username" required type="text" /><span class="bar"></span><label for="username">User Name</label></div><div class="from-item"><input id="password" required type="text" /><span class="bar"></span><label for="password">PassWord</label></div><div class="btn"><p>Login</p></div></div>
</body>
</html>

css代码：

html,
body {height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;
}.center {width: 400px;height: 300px;position: absolute;background-color: gainsboro;
}.from-item {position: relative;width: 300px;margin-top: 50px;margin-left: 50px;
}.from-item input {font-size: 18px;padding: 10px 10px 10px 5px;display: block;width: 300px;border: none;outline: none;border-bottom: 1px solid #757575;
}.from-item label {position: absolute;color: #999;font-size: 18px;transition: 0.4s ease;top: 10px;left: 5px;
}.from-item .bar {position: absolute;width: 0;height: 2px;bottom: 0;left: 50%;transform: translate(-50%, -50%);background: #5264ae;transition: 0.4s ease;
}.from-item input:focus~.bar {width: 100%;
}.from-item input:valid~label,
.from-item input:focus~label {color: #5264ae;transform: translateY(-40px);font-size: 16px;
}.btn {margin-top: 40px;width: 120px;height: 40px;margin-left: 35%;border-radius: 3px;display: flex;justify-content: center;align-items: center;position: relative;overflow: hidden;
}
.btn>p{z-index: 5;
}
.btn::before {content: '';background: #5264ae;position: absolute;height: 200%;width: 200%;border-radius: 3px;animation: border-line 3s infinite linear;z-index: 2;transform-origin: 0 0;top: 50%;left: 50%;
}@keyframes border-line {to {transform: rotate(1turn);}
}.btn::after {content: '';background: #fff;height: calc(100% - 4px);width: calc(100% - 4px);position: absolute;z-index: 3;
}

material文本框与按钮边框旋转效果实现登录页面相关推荐

文本框和按钮对不齐的两种解决方式html
方式一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
一、文本框和按钮不对齐现象(高度得设置一样)
一.文本框和按钮不对齐现象(高度得设置一样) input 设置左浮动 (float:left). 取消input 默认的2px边框和上下1px内边距设置1px的边框设置高 button设置高度比 ...
html 文本框css设置边框圆角
html 文本框css设置边框圆角如下图: css代码如下:input{border:1px solid black;width:295px;height:40px;border-radius:25p ...
html文本框与按钮对不齐，不能挨一起的问题
文本框和按钮利用flex布局横向排列后两个问题 1.文本框.按钮没有对齐 2.文本框.按钮没有贴在一起问题1:文本框.按钮没有对齐解决办法: (1)给文本框添加vertical-align: bo ...
css合并两个文本框,css实现input文本框的双边框美化
css实现input文本框的双边框美化 .input_div{width:250px; height:22px; border-style:solid; border-width:1px 0 1px ...
面试必备：文本框与按钮的最简组合
在家修养了大半年,终于要开始找工作了!因为身体的原因,想着还是在这个小市区找吧,毕竟离家里人近一点.看了一下本地的论坛与招聘网站,大概也就两三家招前端,要么是设计切图一起做,要么是切图,对于javas ...
前端学习（1980）vue之电商管理系统电商系统之实现文本框和按钮的切换
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
安卓TextView文本框与自定义边框
常用属性自定义边框基本使用 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:and ...
去掉文本框默认特效边框样式
如果input{line-height:44px;}光标就会很高,要取掉. 取掉文本框特效边框样式input:focus{outline:none} 转载于:https://www.cnblogs.c ...
html的文本框、按钮美化
input框和按钮美化 input框美化按钮美化有时候一些后端人员,想写一个简单的表单验证的时候,前端美化问题是一个非常头疼的问题,我们直接用html的input标签和按钮会非常丑,这时候我们可以 ...

material文本框与按钮边框旋转效果实现登录页面

material文本框与按钮边框旋转效果实现登录页面相关推荐

最新文章

热门文章