整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
是用純粹的css做的Loading小動畫，就像是一個正方形在地上彈跳，碰到地面的時候尖角還會壓縮變圓，陰影的部分也會隨著正方形升高而縮小，下面是效果圖：
首先寫body部分，我們分成上下兩個盒子，一個用于彈動的矩形，另一個是縮放的陰影。（當然，你用偽元素也是可以的）
然后寫基礎樣式
效果如圖：
添加矩形動畫，矩形是上下跳動并旋轉的，所以用到CSS3中的@keyframes，并通過margin-top去做跳動效果、rotate去做旋轉效果。
跳動沒啥說的，旋轉這里有個小技巧：就是落下的時候是0度轉到45度，彈上去的時候從45旋轉到90度，然后在這一瞬間從90度變成0度（100%到0%），如此一來我們就會產生錯覺，感覺好像一直在旋轉了。
為了有那種彈跳、重力擠壓的感覺，我在50%給每次和地面觸碰的角加了圓角加大，然后20%和80%緊接著變小。
然后就是在50%的地方我加了內陰影效果，看起來像聚光的一個效果。
動畫寫好了后，綁定到對應元素
效果如圖：
添加陰影動畫，這個比較簡單，直接添加放大縮小的效果就可以了。
然后綁定動畫
有一個點要注意的是，矩形和陰影動畫時間要設置成一樣，不然落地的時候和影子匹配不上。
最終效果：
好玩、簡單的小動畫就制作完成了！
希望對正在學CSS的朋友有所幫助！
演示視頻在文章底部
1.頁面內容居中顯示方法
將這段代碼<div style="width:50%;margin:auto;">放置在<body>標簽之下。
將</div>放置在</body>之上。
將全部內容包裹在這個div中，就可以實現整個頁面居中。
內容顯示寬度為瀏覽器視窗寬度的50%。
margin（外邊距）是在CSS布局中經常用到的屬性，它指定了該div元素距離四周的距離。使用“auto”值，可以實現居中。
2.導航欄懸停頂端方法
把四個a標簽裝到一個div中。
將<div style="position:fixed; top:0px;">添加到<a style="margin: 0px 30px 0px 10px;" href="#chapter1">試飛進程</a>之上。
將</div>添加到<a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評價</a>之下。
position是css布局中指定位置的屬性，“fixed”值是讓該div懸停于固定位置。
默認下，該div距離視窗頂端有10px左右的距離，因此為了讓它與視窗頂部對齊，添加top：0px。
3.鼠標滑過導航標題或鏈接時改變背景色提示
這就要介紹關于css的寫法了。
簡單來說，就是在<head></head>標簽中添加
<style>
a:hover
{
background-color:#ffff00;
}
</style>
學過HTML頁面中head標簽有啥用？——零基礎自學網頁制作的小伙伴應該知道，CSS腳本是可以添加在head元素中的。
其中，a:hover中的a指的是所有<a></a>標簽。
hover指的是：當鼠標懸停在a上面時的狀態。
使用：連接。
這個狀態下要執行的內容在{}中。
background-color:#ffff00;即背景色為黃色。
3.隱藏滾動條方法
首先，我們要明確一點，就是，滾動條是在內容長度超過視窗高度時產生的。
如果要取消視窗最右側滾動條，就要控制內容高度。
把<p></p>和<img/><map></map>全部裝進<div></div>中，控制該div的高度可以實現。
在<p>標簽色上面添加<div>。
在</map>標簽下面添加</div>。
下面，為div規定尺寸，添加style="width:610px; height:530px;"。
這樣，就不會超出視窗。但是代碼寫完后發現并不是，如圖：
多出的文字內容超出div范圍，右側滾動條依然存在。
這就要在div的style中再增加一條語句"overflow-y:scroll;"
這句話的意思是“overflow-y”（超出最大高度）就顯示滾動條（scroll）。而不是讓內容超出div的邊框。
<div style="width:610px; height:530px; overflow-y:scroll;" >
如圖：
因為圖片寬度的問題，下方的x軸的scroll也出現了，我們不想看到它，影響美觀。
添加“overflow-x：hidden”即可，hidden（隱藏）。
<div style="width:610px; height:530px; overflow-y:scroll; overflow-x:hidden;" >
如圖：hidden之后，將無法滾動或拖動畫面。
最后，我們要把右側的scroll也隱藏掉，因為點擊鼠標，滾動滾輪就夠了，滾動條實在礙眼。
從前面的例子可知，hidden是不行的，有沒有別的辦法？
那就是在蓋div的外部再添加一個div，讓這個div的寬度略小于里面div的寬度，小到剛剛擋住滾動條既可以。如圖：
這個div這樣寫即可
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">
</div>
同時還要給里面的div添加margin來讓它們對齊
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">
<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >
<!--省略了p img map 請自行腦補或參考源碼-->
</div>
</div>
完整代碼：用HTML制作一個簡單頁面（代碼閱讀練習）——零基礎自學網頁制作
果凍公開課，開講啦
修真院傾情奉獻的動畫課堂：
每堂幾分鐘，用趣味生動又邏輯清晰 的方式，為你分享編程學習中的知識點及趣味小故事
本節課為大家帶來第一課：什么是HTML
”
動畫視頻：
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
文字解析：
45年前，北京時間10月29日上午10點，計算機向世界發出了它的第一句話“LOL”，標志著互聯網時代的誕生。
而今天的我們，在享受著互聯網便利的同時，是否產生過這樣的思考：
互聯網中我們最直接接觸的網頁，又是如何誕生的呢？
這個問題，可以追溯到更近的時間，25年前，HTML這門語言第一次誕生的時候。這是因為，網頁的基本構成可以簡單概括為由HTML、CSS和JS三部分構成。
當然，這三部分的出現時間也是有著先后關系的，從僅僅只有HTML，慢慢發展到有了CSS，最后到出現了JS。而我們今天也將簡單向大家介紹一下HTML、CSS和JS這三種網頁支柱語言。
HTML誕生于1993年，經過六年時間，從HTML1.0發展到了HTML4.0這個版本。之后，HTML經過了一個較為爭議的過程，出現了一個分支，XHTML和HTML5。
由于XHTML的不兼容性，造成眾多瀏覽器廠家和開發者的反對：W3C關閉了XHTML項目，合并了HTML5，歷經八年正式誕生了HTML 5這個版本——要知道哪吒也只是懷了3年而已。
HTML這門語言，主要是通過一個個被尖括號<>包裹的標簽對內容進行標記，來告訴瀏覽器如何顯示其中的內容。
例如文字如何處理，畫面如何安排，圖片如何顯示等。其中作為結束的標簽在<>中有一個反斜杠/
HTML中的標簽按照類別主要分為12大類，共119種，其中有30個是HTML 5中新推出的標簽。
我們來看看我們最常用的標簽都有哪些吧~
①基礎類
<title></title> 定義文檔的標題
我們平時看到的瀏覽器上面這個網頁標題就是用這個標簽實現的。
大多數的純文字內容都是用<p>標簽包住的，作用就是很簡單的告訴瀏覽器這一大段都是文字
②格式類
<b>可以將文字加粗
<big>可以將文本變為大號文本
<i>可以將文字傾斜
③表單類
<input>是我們常用的輸入控件，通常在網頁中我們可以進行輸入的地方都是用它進行標注的
<select>我們常見的下拉列表就是用它標注的，可以將所有選項折疊收縮，很方便對吧
<button>就是我們可以點擊的各種按鈕，不管是登錄還是取消，都是這個標簽
④圖像類
<img>用來定義圖像，大多數我們看到的圖片都是用這個標簽定義的
⑤音頻視頻類
<audio>用來定義我們的音頻內容，如果在網頁上看到這個音頻播放的東西，準是這個標簽的功勞
<video>用來定義視頻，網頁中你想放視頻的話，可以用這個標簽
⑥鏈接類
<a >IT修真院</a>
我們經常看到的這個藍色有下劃線的文字就是<a>的作用，點擊它我們可以去到新的頁面
⑦樣式類
<div></div>是用來標記一塊區域，用來告訴瀏覽器，這一塊是一個整體
<header></header>主要用來放頁面頭部的內容
<footer></footer>主要用來放頁面尾部的內容
⑧列表類
<ol>列表標簽，我們能看到的這種列表都是用它來實現
⑨表格類
<table>我們看到的這種表格就是用這個來實現的
大家發現了嗎？
HTML的標簽基本都是它標注內容的英文單詞或者是縮寫，十分的語義化
基本上這個標簽是干嘛的，只要看這個標簽是什么意思你就知道的八九不離十了，是不是很簡單~
本節課的內容就是這些啦，我們來復習一下：
1、網頁由HTML、CSS、JS三部分構成
2、歷經8年，從HTML1.0發展到現行的HTML5
3、HTML語言作為標記語言用標簽來告訴瀏覽器如何顯示內容
4、常用的九類標簽
是不是覺得HTML一下變得簡單明了起來了呢，下節課，我們將向大家分享CSS的相關內容，敬請期待~
這里是果凍公開課，一個用趣味的動畫來分享IT知識的課堂
我們將原本復雜、不易理解的編程知識，轉化為一個個有趣的動畫短視頻，為更多人提供生動有趣的IT內容/服務
無論是大咖還是小白，都可以快速學會并深度了解每一個知識點，讓IT，Q彈可口。
想了解更多就到我們官網看看吧
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
