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

最新推荐文章于 2024-04-21 13:29:55 发布
最新推荐文章于 2024-04-21 13:29:55 发布
阅读量1.2k 收藏 10
点赞数
分类专栏： js 文章标签： css javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fujijiajia923/article/details/107014104
版权

一、实现效果：

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

二、源码地址：

三、代码实现：

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
    评论
专栏目录
炫酷科幻粒子动态背景后台登录特效代码
04-27
炫酷科幻粒子动态背景后台登录特效代码下载，带验证弹窗js特效。。 炫酷科幻粒子动态背景后台登录特效代码下载，带验证弹窗js特效。。
Jquery登录框抖动特效
01-09
Jquery登录框抖动特效，复制粘贴就能用 Jquery登录框抖动特效，复制粘贴就能用
使用particles动态粒子效果，优化登录页
码农桃子的博客
05-17 693
书接上回，咱不是做了落日余晖登录页，说白了就是一个背景图，感觉需要进一步优化一下，做一个高大上的效果。所图所示，我想要背后的动态粒子效果vue2和elementUI 打造落日余晖登录页和滑块校验。
106.Web前端网页制作 带粒子背景动画的登录页 网页设计实例 大学生期末作业 html+css+js
最新发布
A240307的博客
04-21 1029
超炫酷的带粒子背景动画的登录页面的完整代码模板，鼠标移动粒子联动效果，应用html+css+js，供大家参考。网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码，点赞收藏博文，您的支持是我创作的动力！3Q！
particles.js粒子特效（常用登录页背景）
weixin_39921970的博客
11-02 2100
particles.js开源地址：GitHub - VincentGarreau/particles.js: A lightweight JavaScript library for creating particles 4、DOM 如果页面没有显示效果，请检查canvas和父层div的高度是否有高度。对应第2点的开源地址的详细文档阅读
2.登录模块—表单和粒子效果
m0_65436732的博客
09-22 164
加上scoped了就不行，因为这个时候的样式它是要唯一属性选择器，就我们这个用的别人的组件而且别人的组件内部那些标签是加不上我们外面这个属性的，那这该怎么办呢？那没有了这个唯一属性，我们所写的样式就影响不了这个标签了，这就造成了scoped不好用的一个原因了。我们把options里面的东西拿出来，因为太多了，在那里放这一堆太难看了，我们就弄一个单独的一个叫粒子配置文件，我们在src文件夹下创建一个util文件夹，里面放工具代码工具逻辑的工具文件夹，再在里面创建config.js。我们换自己的背景图片。
Jquery-canvas动态粒子背景动画-适用于登陆注册页面背景
weixin_42566336的博客
09-05 701
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>粒子动画背景</title> <link rel="stylesheet" media="screen" href="css/css.css"> </head> <body> <div id="particles-js">
unity3D实现摄像机抖动特效
08-25
CameraShake类使用了一个基于随机数的抖动算法来实现摄像机抖动。该算法包括以下步骤： 1. 初始化摄像机的初始状态 2. 生成随机数来确定抖动的方向和幅度 3. 根据抖动的方向和幅度来计算摄像机的当前状态 4. 将摄像...
输入框发生抖动特效
04-02
这是输入框发生抖动特效，当我们输入的不正确时，文本输入框就会发生抖动，从而提醒用户重新输入。该案例中，如果输入的不对时，输入框就会发生抖动，也是很不错的输入框功能。
jQuery鼠标经过边框抖动变形动画特效
06-10
基于HTML5 canvas来制作，可以在鼠标移入和移出HTML元素时，为其边框制作波浪状的抖动效果的jQuery鼠标经过边框抖动变形动画特效。
仿QQ抖动特效.rar
07-04
仿QQ抖动特效
JSP粒子动画canvas效果代码
11-02
javascript粒子动画canvas效果,用JQuery，（凑个字数=_=）
html 3D粒子波浪登录页面
04-10
html 3D粒子波浪登录页面，适用于网页设计登录页面的个性化设计。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
精美的登录页面（粒子特效+登录验证）
03-08
精美的登录页面（粒子特效+登录验证）
粒子背景登录页面
10-08
网页制作、静态页面，带粒子背景的登录页面。炫酷页面。
粒子效果实现简单火焰特效
03-21
粒子效果实现简单火焰特效，资源包包括粒子特效预制体，粒子火焰形状的动画贴图以及制作的材质。（制作时要把场景的光调暗）
vue中使用particles.js实现登录页炫酷粒子动效
wgh0315的博客
01-21 3451
1、安装依赖 yarn add particles.js 或 npm install particles.js 2、src/components下新建particles文件夹，文件夹下新建index.vue和particles.json，代码如下 index.vue <template> <div class="particles-js-box"> <div id="particles-js"></div> </di
vue项目登录页粒子效果显示（vue-particles插件）
往事随风
09-15 882
Vue粒子特效（vue-particles插件） 上图那些类似于星座图的点和线，是由vue-particles插件生成的，不仅自己动，而且能与用户鼠标事件产生互动。 使用教程： 1、先安装 插件 npm install vue-particles --save 2、main.js里加入以下代码： import VueParticles from 'vue-particles' Vue.use(VueParticles) App.vue 文件——一个完整的例子： <template>
引用particlesjs实现背景的动态粒子特效
weixin_33709609的博客
08-25 1634
最近做页面的时候无意发现了一个库，动态粒子效果特别炫，而且还可以根据自己喜好调节，所以就自己记录下来。 方法就是使用particles.js particles.js可以从github网站下载到最新的源码，网址是 github.com/VincentGarr… 先上一张效果图： 使用方法非常简单 第一步，在html中引入脚本文件 particles.min.js，这个文件在下载的压缩包里可以找...
做一个JFrame抖动
04-30
你可以使用以下代码让JFrame抖动： ```java import java.awt.*; import java.awt.event.*; import javax.swing.*; public class JFrameShakeDemo extends JFrame implements ActionListener { private JButton shakeButton; private Timer shakeTimer; private int numShakes = 0; private final int MAX_SHAKES = 10; private final int SHAKE_DISTANCE = 5; private final int SHAKE_DURATION = 50; // in ms public JFrameShakeDemo() { super("JFrame Shake Demo"); shakeButton = new JButton("Shake!"); shakeButton.addActionListener(this); add(shakeButton, BorderLayout.CENTER); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setSize(300, 200); setLocationRelativeTo(null); setVisible(true); } public void actionPerformed(ActionEvent e) { if (e.getSource() == shakeButton) { shakeTimer = new Timer(SHAKE_DURATION, new ActionListener() { int deltaX = 0; int deltaY = 0; long startTime = -1; public void actionPerformed(ActionEvent e) { if (startTime == -1) { startTime = System.currentTimeMillis(); } long elapsed = System.currentTimeMillis() - startTime; if (elapsed < SHAKE_DURATION) { double randX = Math.random() * 2 - 1; double randY = Math.random() * 2 - 1; int dx = (int) (randX * SHAKE_DISTANCE - deltaX); int dy = (int) (randY * SHAKE_DISTANCE - deltaY); setLocation(getX() + dx, getY() + dy); deltaX += dx; deltaY += dy; } else { ((Timer) e.getSource()).stop(); setLocationRelativeTo(null); // reset location numShakes++; if (numShakes < MAX_SHAKES) { shakeTimer.start(); } } } }); shakeTimer.start(); } } public static void main(String[] args) { new JFrameShakeDemo(); } } ``` 这个例子使用了一个定时器来让JFrame抖动。当用户点击“Shake”按钮时，JFrame会随机地在X和Y方向上移动，一直抖动，直到达到指定的最大抖动次数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值