skong
/
html_css_demo
mirror of https://gitee.com/wyanhui02/html_css_demo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

新增第238个小实例：炫彩荧光线条登录框

This commit is contained in:
DESKTOP-BM6RJU5\wyanh 2024-01-29 15:59:03 +08:00
parent 666221b517
commit fe9d5a50e7
3 changed files with 139 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -245,6 +245,7 @@
235. HTML5+CSS3+JS小实例：图片切换特效之模糊变清晰
236. HTML5+CSS3小实例：荧光图标悬停效果
237. HTML5+CSS3小实例：菜单按钮的三种切换动画
238. HTML5+CSS3小实例：炫彩荧光线条登录框
#### 赞赏作者
![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)

106
code/238/238.css Normal file
View File

@ -0,0 +1,106 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
background-color: #111;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.ring{
position: relative;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.ring i{
position: absolute;
border: 2px solid #fff;
inset: 0;
transition: all 0.5s;
}
.ring i:nth-child(1){
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
animation: animate 6s linear infinite;
}
.ring i:nth-child(2){
border-radius: 41% 44% 56% 59% / 38% 62% 63% 37%;
animation: animate 4s linear infinite;
}
.ring i:nth-child(3){
border-radius: 41% 44% 56% 59% / 38% 62% 63% 37%;
animation: animate 10s linear infinite reverse;
}
.ring:hover i{
border: 6px solid var(--clr);
filter: drop-shadow(0 0 20px var(--clr));
}
.login{
position: absolute;
width: 300px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
}
.login h2{
color: #fff;
font-size: 32px;
letter-spacing: 16px;
text-indent: 16px;
margin-bottom: 16px;
}
.login .ipt-box{
position: relative;
width: 100%;
}
.login .ipt-box input{
position: relative;
width: 100%;
padding: 12px 20px;
background-color: transparent;
border: 2px solid #fff;
border-radius: 40px;
font-size: 18px;
color: #fff;
box-shadow: none;
outline: none;
}
.login .ipt-box input[type="submit"]{
width: 100%;
background: linear-gradient(45deg,#ff357a,#fff172);
border: none;
cursor: pointer;
}
.login .ipt-box input::placeholder{
color: rgba(255,255,255,0.75);
}
.login .links{
position: relative;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.login .links a{
color: #fff;
text-decoration: none;
}
@keyframes animate {
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}

32
code/238/238.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>炫彩荧光线条登录框</title>
<link rel="stylesheet" href="238.css">
</head>
<body>
<div class="ring">
<i style="--clr:#00ff0a;"></i>
<i style="--clr:#ff0057;"></i>
<i style="--clr:#fffd44;"></i>
<div class="login">
<h2>登录</h2>
<div class="ipt-box">
<input type="text" placeholder="账号">
</div>
<div class="ipt-box">
<input type="password" placeholder="密码">
</div>
<div class="ipt-box">
<input type="submit" value="登录">
</div>
<div class="links">
<a href="#">忘记密码</a>
<a href="#">注册</a>
</div>
</div>
</div>
</body>
</html>