css+javascript网页抖动图标、抖动制作教程，输入抖动命令js执行命令让网页抖动起来（详细版）

最新推荐文章于 2024-08-01 18:00:31 发布

置顶

前端hacker97

最新推荐文章于 2024-08-01 18:00:31 发布

阅读量3.2k

点赞数 1

分类专栏： html历史网页历史 web标准 html+css+js 文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_24928451/article/details/44836393

版权

本文提供了一种详细的教程，教你如何使用CSS和JavaScript实现网页元素的抖动效果。首先，介绍了网页的基础架构，并强调了CSS样式与网页的存放位置。接着，展示了如何通过添加class应用CSS抖动样式。为了增强交互性，文章还讲解了如何使用JavaScript创建输入框和按钮，通过用户输入触发元素的抖动效果，涉及的关键属性包括input的onchange和onclick，以及submit按钮的onclick。

摘要由CSDN通过智能技术生成

首先我想说关于网页中做css抖动不难，用js命令也不难，下面我将为大家详细介绍具体做法。

一、我们要先有个网页代码的基本架构，比如

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>抖动网页的基本框架</title>
</head>
<body>
	<div>
	<h1>我们先随便建一点标签</h1>
	<p>我们先随便建一点标签</p>
	<span></span>
	<p>我们先随便建一点标签</p>
	<p>我们先随便建一点标签</p>
	<p>我们先随便建一点标签</p>
	<span></span>
	</div>
</body>
</html>

二、为了使我们的抖动更加明显我们可以在网页中插入几张图片，比如

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>抖动网页的基本框架</title>
</head>
<body>
	<div>
	<h1>我们先随便建一点标签</h1>
	<p>我们先随便建一点标签</p>
	<span><img src="2.jpg" height="100" width="200" alt=""></span>
	<p>我们先随便建一点标签</p>
	<p>我们先随便建一点标签</p>
	<p>我们先随便建一点标签</p>
	<span><img src="5.jpg" height="100" width="200" alt=""></span>
	</div>
</body>
</html>

三、要想产生抖动样式，css当然是少不了的，css抖动样式我们可以自己写，我们也可以直接去网上下载，由于网上大神制作的css抖动样式比较全面和好玩，我就从网上下载了。我可以直接把网站的地址给大家。下载css抖动样式网站地址：http://elrumordelaluz.github.io/csshake/css/csshake.min.css

大家可以直接把网页另存为桌面上，到时候就可以直接调用css样式了。但是要注意一点的是要把css样式和所制作的网页放在同一个文件夹，也可以都放在电脑桌面上。

要是大家不会下载css样式，还有另外一种方法，大家可以直接在网上调用css样式，就是直接把网站的地址当做链接，比如（建议大家css样式下载使用）

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>抖动网页的基本框架</title>
	<link rel="stylesheet" href="http://elrumordelaluz.github.io/csshake/css/csshake.min.css">
</head>
<body>
	<div>
	<h1>我们先随便建一点标签</h1>
	<p>我们先随便建一点标签</p>
	<span><img src="2.jpg" height="100" width="200" alt=""></span>
	<p>我们先随便建一点标签</p>
	<p>我们先随便建一点标签</p>
	<p>我们先随便建一点标签</p>
	<span><img src="5.jpg" height="100" width="200" alt=&