新增第140个小实例：ANIME搭配SVG实现简约酷炫的登录界面
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
d68712071e
commit
c820808ee2
|
|
@ -146,4 +146,5 @@
|
|||
136. HTML5+CSS3小实例：萌翻少女心的发光果冻泡泡
|
||||
137. HTML5+CSS3+Vue小实例：仿制腾讯视频的轮播图
|
||||
138. HTML5+CSS3小实例：月步式的loading加载动画
|
||||
139. HTML5+CSS3小实例：卡片悬停图文遮罩显示特效
|
||||
139. HTML5+CSS3小实例：卡片悬停图文遮罩显示特效
|
||||
140. HTML5+CSS3+JS小实例：ANIME搭配SVG实现简约酷炫的登录界面
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
*{
|
||||
/* 初始化 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
height: 100vh;
|
||||
/* 弹性布局 居中显示 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #e2e2e5;
|
||||
}
|
||||
.container{
|
||||
width: 640px;
|
||||
height: 320px;
|
||||
display: flex;
|
||||
}
|
||||
.left{
|
||||
width: 50%;
|
||||
height: calc(100% - 40px);
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
}
|
||||
.left h1{
|
||||
color: #222;
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 4px;
|
||||
margin: 55px 40px 40px 40px;
|
||||
}
|
||||
.left p{
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
margin: 40px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.right{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background-color: #474a59;
|
||||
color: #f1f1f1;
|
||||
position: relative;
|
||||
box-shadow: 0 0 40px 16px rgba(0,0,0,0.2);
|
||||
}
|
||||
.right svg{
|
||||
position: absolute;
|
||||
width: 320px;
|
||||
}
|
||||
.right path{
|
||||
/* 取消填充 */
|
||||
fill: none;
|
||||
/* 定义一条线,引用定义好的线性渐变 */
|
||||
stroke: url(#linearGradient1);
|
||||
/* 线的厚度 */
|
||||
stroke-width: 4;
|
||||
/* 设置虚线:虚线长度 间距 */
|
||||
stroke-dasharray: 240 1386;
|
||||
}
|
||||
.form{
|
||||
margin: 40px;
|
||||
position: absolute;
|
||||
}
|
||||
.form label{
|
||||
color: #c2c2c2;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.form input{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 20px;
|
||||
color: #f2f2f2;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
text-indent: 2px;
|
||||
}
|
||||
.form button{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
color: #d0d0d0;
|
||||
font-size: 18px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
margin-top: 40px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>ANIME搭配SVG实现简约酷炫的登录界面</title>
|
||||
<link rel="stylesheet" href="140.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="left">
|
||||
<h1>login</h1>
|
||||
<p>欢迎光临, 请输入您的账号和密码进行登录!</p>
|
||||
</div>
|
||||
<div class="right">
|
||||
<!-- SVG提前准备好, 来自互联网 -->
|
||||
<svg viewBox="0 0 320 300">
|
||||
<defs>
|
||||
<!-- 定义线性渐变 -->
|
||||
<linearGradient inkscape:collect="always" id="linearGradient1" x1="13" y1="193.49992" x2="307"
|
||||
y2="193.49992" gradientUnits="userSpaceOnUse">
|
||||
<stop style="stop-color:#0ff;" offset="0" />
|
||||
<stop style="stop-color:#f0f;" offset="1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
d="m 40,120.00016 239.99984,-3.2e-4 c 0,0 24.99263,0.79932 25.00016,35.00016 0.008,34.20084 -25.00016,35 -25.00016,35 h -239.99984 c 0,-0.0205 -25,4.01348 -25,38.5 0,34.48652 25,38.5 25,38.5 h 215 c 0,0 20,-0.99604 20,-25 0,-24.00396 -20,-25 -20,-25 h -190 c 0,0 -20,1.71033 -20,25 0,24.00396 20,25 20,25 h 168.57143" />
|
||||
</svg>
|
||||
<div class="form">
|
||||
<label for="account">账号</label>
|
||||
<input type="text" id="account" autocomplete="off">
|
||||
<label for="password">密码</label>
|
||||
<input type="password" id="password">
|
||||
<button id="submit">登录</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- anime是一个轻量的JavaScript动画库,拥有简单而强大的API,可对CSS属性,SVG,DOM和JavaScript对象进行动画 -->
|
||||
<!-- 官网 https://www.animejs.cn/ -->
|
||||
<!-- 大家可以自己上官网下载,也可以私信找我拿 -->
|
||||
<script src="/js/anime.min.js"></script>
|
||||
<script src="140.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
// 定义一个anime对象
|
||||
var an=null;
|
||||
// 绑定账号输入框的点击事件
|
||||
document.querySelector('#account').addEventListener('click',function(){
|
||||
if(an){
|
||||
// 如果已存在anime动画,先暂停正在运行的动画
|
||||
an.pause();
|
||||
}
|
||||
// 构造一个动画对象
|
||||
an=anime({
|
||||
targets:'path',
|
||||
strokeDashoffset:{
|
||||
value:0,
|
||||
duration:700,
|
||||
easing:'easeOutQuart'
|
||||
},
|
||||
strokeDasharray:{
|
||||
value:'240 1386',
|
||||
duration:700,
|
||||
easing:'easeOutQuart'
|
||||
}
|
||||
});
|
||||
});
|
||||
// 绑定密码输入框的点击事件
|
||||
document.querySelector('#password').addEventListener('click',function(){
|
||||
if(an){
|
||||
// 如果已存在anime动画,先暂停正在运行的动画
|
||||
an.pause();
|
||||
}
|
||||
// 构造一个动画对象
|
||||
an=anime({
|
||||
targets:'path',
|
||||
strokeDashoffset:{
|
||||
value:-336,
|
||||
duration:700,
|
||||
easing:'easeOutQuart'
|
||||
},
|
||||
strokeDasharray:{
|
||||
value:'240 1386',
|
||||
duration:700,
|
||||
easing:'easeOutQuart'
|
||||
}
|
||||
});
|
||||
});
|
||||
// 绑定登录按钮的鼠标移入事件
|
||||
document.querySelector('#submit').addEventListener('mouseover',function(){
|
||||
if(an){
|
||||
// 如果已存在anime动画,先暂停正在运行的动画
|
||||
an.pause();
|
||||
}
|
||||
// 构造一个动画对象
|
||||
an=anime({
|
||||
targets:'path',
|
||||
strokeDashoffset:{
|
||||
value:-730,
|
||||
duration:700,
|
||||
easing:'easeOutQuart'
|
||||
},
|
||||
strokeDasharray:{
|
||||
value:'530 1386',
|
||||
duration:700,
|
||||
easing:'easeOutQuart'
|
||||
}
|
||||
});
|
||||
});
|
||||
// 优化一下,输入框和登录按钮获取焦点也给动画
|
||||
// 绑定账号输入框的获取焦点事件
|
||||
document.querySelector('#account').addEventListener('focus',function(){
|
||||
if(an){
|
||||
// 如果已存在anime动画,先暂停正在运行的动画
|
||||
an.pause();
|
||||
}
|
||||
// 构造一个动画对象
|
||||
an=anime({
|
||||
targets:'path',
|
||||
strokeDashoffset:{
|
||||
value:0,
|
||||
duration:700,
|
||||
easing:'easeOutQuart'
|
||||
},
|
||||
strokeDasharray:{
|
||||
value:'240 1386',
|
||||
duration:700,
|
||||
easing:'easeOutQuart'
|
||||
}
|
||||
});
|
||||
});
|
||||
// 绑定密码输入框的获取焦点事件
|
||||
document.querySelector('#password').addEventListener('focus',function(){
|
||||
if(an){
|
||||
// 如果已存在anime动画,先暂停正在运行的动画
|
||||
an.pause();
|
||||
}
|
||||
// 构造一个动画对象
|
||||
an=anime({
|
||||
targets:'path',
|
||||
strokeDashoffset:{
|
||||
value:-336,
|
||||
duration:700,
|
||||
easing:'easeOutQuart'
|
||||
},
|
||||
strokeDasharray:{
|
||||
value:'240 1386',
|
||||
duration:700,
|
||||
easing:'easeOutQuart'
|
||||
}
|
||||
});
|
||||
});
|
||||
// 绑定登录按钮的获取焦点事件
|
||||
document.querySelector('#submit').addEventListener('focus',function(){
|
||||
if(an){
|
||||
// 如果已存在anime动画,先暂停正在运行的动画
|
||||
an.pause();
|
||||
}
|
||||
// 构造一个动画对象
|
||||
an=anime({
|
||||
targets:'path',
|
||||
strokeDashoffset:{
|
||||
value:-730,
|
||||
duration:700,
|
||||
easing:'easeOutQuart'
|
||||
},
|
||||
strokeDasharray:{
|
||||
value:'530 1386',
|
||||
duration:700,
|
||||
easing:'easeOutQuart'
|
||||
}
|
||||
});
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue