如何做一个简单漂亮的粒子抖动特效登录页

最新推荐文章于 2024-04-21 23:41:29 发布

小冰块啊

最新推荐文章于 2024-04-21 23:41:29 发布

阅读量1.3k

点赞数

分类专栏： js 文章标签： css javascript jquery

本文链接：https://blog.csdn.net/fujijiajia923/article/details/107014104

版权

一、实现效果：

在这里插入图片描述
首先分析这个页面用到了背景粒子效果，登录窗口的抖动，以及按钮的圆圈动效。粒子效果以及抖动效果都有脚本插件。

二、源码地址：

粒子插件：https://github.com/VincentGarreau/particles.js
抖动插件：https://github.com/NiklasKnaack/jquery-wobblewindow-plugin

三、代码实现：

html部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="CSS/login.css">
	</head>
	<body>
		<div id="bg">
			<div id="window" class="login">
				<div class="login_title">
					<div class="login_title_img">
						<img src="img/LOGO.png" />
					</div>
					<div class="login_title_text">
						<p>XXX后台管理系统</p>
					</div>
				</div>
				<div class="login_cont">
					<div style="width: 100%;height: 100%;">
						<div class="login_box">
							<input class="login_input" type="text" id="username" autocomplete="off" placeholder="请输入用户名" tabindex="1" maxlength="15" />	
							<div class="login_img">
								<img src="img/人员.svg"/>	
							</div>
						</div>
						<div class="login_box">
							<input class="login_input" type="text" id="password" autocomplete="off" placeholder="请输入密码" tabindex="1" maxlength="15" />
							<div class="login_img">
								<img src="img/锁.svg"/>
							</div>
							<div class="psw_img">
								<img  src="img/隐藏.svg" alt="" id="eyesHide">
								<img style="display: none;" src="img/显示.svg" alt="" id="eyesShow">
							</div>
						</div>
					</div>
				</div>
				<div class="forget">
					<a href="#" class="forget_click" >忘记密码</a>
				</div>
				<div class

最低0.47元/天解锁文章

小冰块啊

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
如何做一个简单漂亮的粒子抖动特效登录页

一、实现效果：首先分析这个页面用到了背景粒子效果，登录窗口的抖动，以及按钮的圆圈动效。粒子效果以及抖动效果都有脚本插件。二、源码地址：粒子插件：https://github.com/VincentGarreau/particles.js抖动插件：https://github.com/NiklasKnaack/jquery-wobblewindow-plugin三、代码实现：html部分：<!DOCTYPE html><html> <head>
复制链接

扫一扫