整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
次我們展示多個圖標動畫特效！上次有人在問，為什么不寫 font-family，就調用不了圖標。很簡單，你在 @font-face 中，指定 font-family 名字為 'FishC-icon';
@font-face {
font-family:'FishC-icon';
src: url('font/icons.ttf'), url('font/icons.eot'), url('font/icons.woff'), url('font/icons.svg');
}
那么在偽元素中就要告訴腳本，勞資就用'FishC-icon'里的圖標！
這次因為有多個動畫對象，所以用延遲參數形成動畫序列，先寫 5 個 div 吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖標元素2</title>
<style type="text/css">
@font-face {
font-family:'FishC-icon';
src: url('font/icons.ttf'), url('font/icons.eot'), url('font/icons.woff'), url('font/icons.svg');
}
.icon{
display: inline-block;
margin-right: 33px;
}
.android::before{
content: "\e65f";
font-size: 66px;
font-family: 'FishC-icon';
}
.app::before{
content: "\e660";
font-size: 66px;
font-family: 'FishC-icon';
}
.page::before{
content: "\e64d";
font-size: 66px;
font-family: 'FishC-icon';
}
.show::before{
content: "\e647";
font-size: 66px;
font-family: 'FishC-icon';
}
.victor::before{
content: "\e648";
font-size: 66px;
font-family: 'FishC-icon';
}
</style>
</head>
<body>
<div class="android icon">Android</div>
<div class="app icon">Apple</div>
<div class="page icon">Page</div>
<div class="show icon">Show</div>
<div class="victor icon">Victor</div>
</body>
</html>
效果圖：
此時由于沒有隱藏文字，這是上一講的點睛之筆 ，有興趣自己去找。但不同之處在于此處的圖標都設置為“inline-block”，使之能夠橫向排列。現在修改樣式
.icon{
display: inline-block;
cursor: help;
width: 111px;
height: 111px;
font-size: 0px;
line-height: 100px;
border-radius: 50%;/*圓框*/
background:#7FE;
color: #000;
text-align: center;
animation:move 1s
}
效果圖：
例如，使圖標位置向下偏移 -100%。
然后在向上移動回到初始位置，此過程中讓圖標從完全透明化變為完全不透明。
@keyframes move{
from{
opacity: 0;
transform: translateY(100%);
}
to{
opacity: 1;
transform: translateY(0%);
}
}
效果圖：
利用 transform 屬性的 translateY 方法來實現圖標的向下偏移。
然后使用 opacity 屬性設置圖標的透明度，0.0 （完全透明）到 1.0（完全不透明）。
由于未設置單個圖標的延遲，所以一下子 5 個同時出現。
既然提到了延遲，那就設置一下咯～
使用 animation-delay 屬性設置延遲：
.android{
animation-delay: 0s;
}
.app{
animation-delay: .3s;
}
.page{
animation-delay: .6s;
}
.show{
animation-delay: 1.2s;
}
.victor{
animation-delay: 1.5s;
}
效果圖：
光這么直棱棱也不好玩。
然后我們自己設置貝塞爾（cubic-bezier）速度曲線，達到不同速率節奏效果 ～
假設你穿越成功，會看到：
拖動粉點（起始點），藍點（終點）即可以生成坐標。
生成的結果為 cubic-bezier(.86,.15,.18,.9)。
.icon{
animation-fill-mode: both;
animation: move 2s cubic-bezier(.86,.15,.18,.9);
}
效果圖：
其中 animation-fill-mode 屬性用來屬性規定動畫在播放之前或之后，其動畫效果是否可見。。
設置完成后，防止圖標閃現。
學習HTML5開發培訓，到重慶千鋒教育，千鋒重慶HTML5開發培訓怎么樣？千鋒提供兩周免費試聽課程，歡迎你來試聽。
tml5圖標
在HTML5中新增了幾個全局屬性（所謂全局屬性是指所有元素共用的屬性）。
contentEditable屬性（可編輯，是一個布爾值，當為true的時候，表示元素包含內容可編輯，默認是false，不可編輯）。示例
一個文檔
在網頁中就可以重新對它進行編輯
hidden屬性（隱藏顯示，這個屬性可以通過js去控制顯示或隱藏，同樣也是一個布爾值，值為true就是顯示，false就是隱藏）
spellcheck屬性（針對input和textarea，對用戶輸入的內容進行語法檢查，也是一個布爾值,為true就要檢查，如果單詞拼寫錯誤，就會顯示下圖下標帶波浪線的錯誤單詞提示）
單詞拼寫錯誤
tabindex屬性（按鍵盤TAB鍵切換，帶到指定 tab順序的鏈接）
按TAB鍵可以切換指定順序的鏈接上
1.設置文字顏色--text
2.背景顏色屬性--bgcolor
3.背景圖像屬性--background
4.設置鏈接文字屬性--link
5.設置邊距--margin
概述
<body>元素表明是HTML文檔的主體部分。在<body>與</body>之間，通常都會有很多其他元素；這些元素屬性構成HTML文檔的主體部分。
<body>元素中有下列元素屬性：
（1）bgcolor
bgcolor屬性標志HTML文檔的背景顏色。如bgcolor="#CCFFCC"。
（2）background
background屬性標志HTML文檔的背景圖片。如
background=“images/gb.gif"。
可以使用的圖片格式為GIF，JPG
bgcolor代碼實例：
運行效果
background代碼實例
運行效果
想要不重復重疊顯示，添加CSS樣式代碼如下
效果
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
