整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
們經常看到許多網站或者H5的動畫都做成了整屏切換的形式，為提高用戶體驗，會在首屏頁面下方放上一個動態的向下箭頭來提示用戶切換至下一屏。
動態箭頭的效果圖如下：
那么這種效果是如何實現的呢？
其實非常簡單，在CSS3中提供了animation屬性，專門用于動畫。要使用這個屬性，需要先了解@keyframes的創建規則，在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。
在這個動畫中，我們能夠看出在整個動畫中改變的是箭頭的位置，所以我們在創建動畫時，只需要給定箭頭的起始位置，利用animation讓他動起來就可以了。
接下來，我們一步一步完成。
1、首先找到你所需要的箭頭圖片，將他利用定位的方式放在首屏的底部。
a)html代碼（將圖片以背景或者插入圖片的形式放入標簽內，demo以背景形式展示）
b)css代碼（利用定位將箭頭放在首屏的底部適當位置，網站中大部分情況會進行左右居中）
2、然后進行動畫創建，最簡單的方式就是只給定初始的以及結束的css樣式即可。
css 代碼
標注出來的為動畫的自定義名稱，可以根據你的動畫行為來定義。
0%為初始狀態，即剛開始動畫時。
100%為結束狀態，即動畫進行到100%時。
動畫改變了箭頭的底部位置，由距離底部80像素變到了距離底部0像素。
3、接下來利用animation屬性讓他具有動畫效果
css代碼：
第一個參數表示你所使用的動畫的名稱（即我們創建的動畫的動畫名稱），
第二個參數表示動畫完成的時間（即由0%到100%所用的時間），
第三個參數表示動畫執行的次數（可以為任意數字，infinite表示規定動畫無限次播放），因此造成了一個動態的箭頭的視覺效果。
通過以上三個步驟即可完成這個簡單的動畫效果，很多的動畫效果都可以通過創建動畫的方式來實現。
原文地址北京市盛世陽光文化傳播有限責任公司：http://www.gonet.com.cn/webduirshow-140.html
心箭頭
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>實心箭頭</title>
<style>
.con{
width: 300px;
height: 300px;
border: 1px solid #ccc;
margin: 50px auto;
background-color:#ccc;
}
.arrow-top{
border-bottom: 10px solid #fff;
border-right: 10px solid #fff;
border-left: 10px solid #fff;
border-top: 10px solid #ccc;
width: 0px;
height: 0px;
position: relative;
top:-40px;
left:100px;
}
.arrow-bottom{
border-bottom: 10px solid #fff;
border-right: 10px solid #fff;
border-left: 10px solid #fff;
border-top: 10px solid #ccc;
width: 0px;
height: 0px;
position: relative;
top:-40px;
left:100px;
}
</style>
</head>
<body>
<div class="con">
<div class="arrow-top"> </div>
</div>
</body>
</html>非實心箭頭
TML 符號實體
HTML 符號是不呈現在標準的鍵盤上，比如數學運算符、箭頭符號、技術符號和形狀。
如需向 HTML 頁面添加這些符號，您可以使用 HTML 實體名稱。
如果不存在實體名稱，您可以使用實體編號。
如果字符沒有實體名稱，您可以使用十進制（或十六進制）引用。
實例
<p>我將顯示 €</p>
<p>我將顯示 €</p>
<p>我將顯示 €</p>
結果如下：
我將顯示 €
我將顯示 €
我將顯示 €
HTML 支持的數學符號
如果您使用的是一個 HTML 實體名稱或一個十六進制編號，字符總是能正確顯示。
這是與您頁面使用的字符集相互獨立的！
| 字符 | 編號 | 實體 | 描述 |
|---|---|---|---|
| ? | ∀ | ∀ | 所有（for all） |
| ? | ∂ | ∂ | 部分（part） |
| ? | ∃ | ∃ | 存在（exists） |
| ? | ∅ | ∅ | 空（empty） |
| ? | ∇ | ∇ | 倒三角（nabla） |
| ∈ | ∈ | ∈ | 屬于（isin） |
| ? | ∉ | ∉ | 不屬于（notin） |
| ? | ∋ | ∋ | 包含的成員（ni） |
| ∏ | ∏ | ∏ | 連乘（prod） |
| ∑ | ∑ | ∑ | 總和（sum） |
完整的數學（Math）參考手冊
HTML 支持的希臘字母
| 字符 | 編號 | 實體 | 描述 |
|---|---|---|---|
| Α | Α | Α | Alpha（中文注音：阿耳法） |
| Β | Β | Β | Beta（中文注音：貝塔） |
| Γ | Γ | Γ | Gamma（中文注音：伽馬） |
| Δ | Δ | Δ | Delta（中文注音：德耳塔） |
| Ε | Ε | Ε | Epsilon（中文注音：艾普西?。?/td> |
| Ζ | Ζ | Ζ | Zeta（中文注音：截塔） |
完整的希臘（Greek）參考手冊
HTML 支持的其他實體
| 字符 | 編號 | 實體 | 描述 |
|---|---|---|---|
| ? | © | © | 版權所有（REGISTERED SIGN） |
| ? | ® | ® | 注冊商標（REGISTERED SIGN） |
| € | € | € | 歐元符號（EURO SIGN） |
| ? | ™ | ™ | 商標（trademark） |
| ← | ← | ← | 向左箭頭（LEFTWARDS ARROW） |
| ↑ | ↑ | ↑ | 向上箭頭（UPWARDS ARROW） |
| → | → | → | 向右箭頭（RIGHTWARDS ARROW） |
| ↓ | ↓ | ↓ | 向下箭頭（DOWNWARDS ARROW） |
| ? | ♠ | ♠ | 黑桃（BLACK SPADE SUIT） |
| ? | ♣ | ♣ | 黑梅花（BLACK CLUB SUIT） |
| ? | ♥ | ♥ | 黑心（BLACK HEART SUIT） |
| ? | ♦ | ♦ | 黑方塊（BLACK DIAMOND SUIT） |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
