整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天給大家分享一個酷炫的碎片合成動畫特效，效果如下！
效果圖1
效果圖2
效果圖3
效果圖
喜歡的朋友可以去下載源代碼（http://www.htmleaf.com/jQuery/Image-Effects/201707274652.html）
下載完后解壓
源代碼
這時我們可以將自己喜歡的圖片放入img文件夾，然后右鍵點擊index.html文件，找到background-image: url(img/g1.jpg)
將括號里面的圖片路徑改成你自己需要展示的圖片路徑就可以展示自己的圖片了！其他三個html文件修改方法一樣！
不知道如何發布在自己電腦的同學可以看下我之前發布的文章→（原來自己建網站這么簡單！）
修改源代碼
文章源代碼地址：http://www.htmleaf.com/jQuery/Image-Effects/201707274652.html
HTML 文檔中，標題很重要。
HTML 標題
標題（Heading）是通過 <h1> - <h6> 等標簽進行定義的。
<h1> 定義最大的標題。<h6> 定義最小的標題。
實例
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>請僅僅把標題標簽用于標題文本。不要僅僅為了產生粗體文本而使用它們。請使用其它標簽或 CSS 代替。</p>
</body>
</html>
[/demo]
注釋：瀏覽器會自動地在標題的前后添加空行。
注釋：默認情況下，HTML 會自動地在塊級元素前后添加一個額外的空行，比如段落、標題元素前后。
標題很重要
請確保將 HTML heading 標簽只用于標題。不要僅僅是為了產生粗體或大號的文本而使用標題。
搜索引擎使用標題為您的網頁的結構和內容編制索引。
因為用戶可以通過標題來快速瀏覽您的網頁，所以用標題來呈現文檔結構是很重要的。
應該將 h1 用作主標題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類推。
HTML 水平線
<hr /> 標簽在 HTML 頁面中創建水平線。
hr 元素可用于分隔內容。
實例
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>hr 標簽定義水平線：</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>
</body>
</html>
[/demo]
提示：使用水平線 (<hr> 標簽) 來分隔文章中的小節是一個辦法（但并不是唯一的辦法）。
HTML 注釋
可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會忽略注釋，也不會顯示它們。
注釋是這樣寫的：
實例
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!--這是一段注釋。注釋不會在瀏覽器中顯示。-->
<p>這是一段普通的段落。</p>
</body>
</html>
[/demo]
注釋：開始括號之后（左邊的括號）需要緊跟一個嘆號，結束括號之前（右邊的括號）不需要。
提示：合理地使用注釋可以對未來的代碼編輯工作產生幫助。
HTML 提示 - 如何查看源代碼
您一定曾經在看到某個網頁時驚嘆道 “WOW! 這是如何實現的？”
如果您想找到其中的奧秘，只需要單擊右鍵，然后選擇“查看源文件”（IE）或“查看頁面源代碼”（Firefox），其他瀏覽器的做法也是類似的。這么做會打開一個包含頁面 HTML 代碼的窗口。
來自本頁的實例
標題
如何在 HTML 文檔中顯示標題。
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>請僅僅把標題標簽用于標題文本。不要僅僅為了產生粗體文本而使用它們。請使用其它標簽或 CSS 代替。</p>
</body>
</html>
[/demo]
隱藏的注釋
如何在 HTML 源代碼中插入注釋。
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!--這是一段注釋。注釋不會在瀏覽器中顯示。-->
<p>這是一段普通的段落。</p>
</body>
</html>
[/demo]
水平線
如何插入水平線。
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>hr 標簽定義水平線：</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>
</body>
</html>
[/demo]
HTML 標簽 描述
<html> 定義 HTML 文檔。
<body> 定義文檔的主體。
<h1> to <h6> 定義 HTML 標題
<hr> 定義水平線。
<!--> 定義注釋。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
