標籤：html css javascript
首先我想說關於網頁中做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樣式，就是直接把網站的地址當做連結，比如（建議大家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=""></span></div></body></html>
利用類標籤的方法，在標籤中插入class類標籤導用抖動樣式比如可以這樣<h1 class="shake">我們先隨便建一點標籤</h1>
<!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 class="shake">我們先隨便建一點標籤</h1><p class="shake">我們先隨便建一點標籤</p><span class="shake"><img src="2.jpg" height="100" width="200" alt=""></span><p class="shake">我們先隨便建一點標籤</p><p class="shake">我們先隨便建一點標籤</p><p class="shake">我們先隨便建一點標籤</p><span class="shake"><img src="5.jpg" height="100" width="200" alt=""></span></div></body></html>
然而對於這個css抖動樣式表我們有好多種不同的抖動樣式，我用代碼為大家展示
<div class="shake shake-hard"></div>
<div class="shake shake-slow"></div>
<div class="shake shake-little"></div>
<div class="shake shake-horizontal"></div>
<div class="shake shake.vertical"></div>
<div class="shake shake-rotate"></div>
<div class="shake shake-opacity"></div>
<div class="shake shake-crazy"></div>一共有九種。
匯入了css抖動樣式後你的網頁坑定就會產生抖動了。
五、要是想讓你的網頁更加高大上的話，當然少不了js這一部分吧。
要想產生js命令，首先要先在你想要命令的地區塊內定義一個id，比如
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>抖動網頁的基本架構</title><link rel="stylesheet" href="csshake.min.css"></head><body><div id="a"><h1 class="shake">我們先隨便建一點標籤</h1><p class="shake">我們先隨便建一點標籤</p><span class="shake"><img src="2.jpg" height="100" width="200" alt=""></span><p class="shake">我們先隨便建一點標籤</p><p class="shake">我們先隨便建一點標籤</p><p class="shake">我們先隨便建一點標籤</p><span class="shake"><img src="5.jpg" height="100" width="200" alt=""></span></div></body></html>
js代碼被包在script標籤內
我們要產生的效果就是在命令框內輸入抖動指令，讓網頁執行命令，讓原本不抖的網頁抖動起來。
主要涉及到的屬性標籤有input onclick onchange
先將代碼展示再解釋吧
<!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 id="a"><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><script> function dou(){ var x=document.getElementById('b').value; if(x=="抖動"){ var y=document.getElementById('a').className="preview-item big shake shake-hard shake-constant hover-stop"; } }</script><p>請輸入抖動，網頁即可抖</p><input id="b" type="text" onchange="dou()" /><input type="submit" onclick="dou()"/ ></body></html>
這個標籤顯示了一個輸入框id表示這個輸入框的id，與上面的js命令有關，onchang標籤表示 使用者改變輸入欄位內容時執行 JavaScript 代碼 所以後面的等號內容與js內容相同
接下來介紹
<input type="submit" onclick="dou()"/ >
這個標籤表示提交框 onclick 屬性當按鈕被單擊時執行js命令 所以等號後面的內容也與js內容相同
function表示一個函數
var 後面表示定義的變數，後面還有個if函數，起判斷作用 後面的className才是最不可缺少的，這個對對象起命令作用
下面是我另外做的抖動頁面和代碼
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>抖動網頁的基本架構</title><link rel="stylesheet" href="csshake.min.css"></head><body><div id="a"><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><script> function dou(){ var x=document.getElementById('b').value; if(x=="抖動"){ var y=document.getElementById('a').className="preview-item big shake shake-hard shake-constant hover-stop"; } }</script><p>請輸入抖動，網頁即可抖</p><input id="b" type="text" onchange="dou()" /><input type="submit" onclick="dou()"/ ></body></html>
css+javascript網頁抖動表徵圖、抖動製作教程，輸入抖動命令js執行命令讓網頁抖動起來（詳細版）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
