前幾天看到乙個企業招聘的動畫覺得很炫，裡面有個企業介紹的文字是用飛入的效果做出來的，今天嘗試了寫了一下，感覺還不錯~\(≧▽≦)/~啦啦啦
下面來看我做的動態效果：
其實上面的效果很簡單的，我的截圖軟體有問題，所以不是很清晰，但是大概的效果出現了~~~螢幕顏色從紅變白是因為我把滑鼠從頁面上移到截圖軟體上關閉截圖，不要被這個干擾~~~~
一、頁面的主體布局
doctype html上面就不用說了吧~~~~就四句話布局就完成了~~~我實在太懶了，乙個多餘的美觀性布局我都不願意寫qaq，最直接的**是為了方便我以後複製。>
<
html
>
<
head
>
<
meta
charset
="utf-8"
/>
<
title
>左右淡入的企業介紹
title
>
<
link
type
="text/css"
rel="stylesheet"
href
="css/animate.css"
/>
head
>
<
body
>
<
div
class
="company"
>
<
h2 class
="company_name"
>上海世茂集團企業招聘
h2>
<
h5 class
="company_introduce"
>世茂集團，是以房地產開發為主的國際化企業集群，房地產界領袖企業之一。
h5>
div>
body
>
html
>
二、css樣式（主要是css3）
body額，我覺得上面的很小兒科，注釋我也寫的很清楚，需要注意的是剛開始就要給body新增乙個overflow: hidden; 設定溢位隱藏，否則文字起始位移超過頁面大小就會在頁面下方出現橫的滾動條，這個也是我最後才發現的小問題，一句話就解決了~~~~~.company
/*定義乙個名字為lefteaseinanimate動畫，實現從頁面的左邊淡入頁面效果*/
@keyframes lefteaseinanimate /*在0%時設定文字在想x軸-2000px位移處（左邊），透明度為0，也就是看不見文字*/
100% /*在100%時設定文字在想x軸0px位移處，也就是原始布局的位置，透明度為1，也就是文字可以看見了*/
}@-webkit-keyframes lefteaseinanimate
100%
}@-o-keyframes lefteaseinanimate
100%
}@-ms-keyframes lefteaseinanimate
100%
}@-moz-keyframes lefteaseinanimate
100%
}.company_name
/*定義乙個名字為righteaseinanimate動畫，實現從頁面的右邊淡入頁面效果*/
@keyframes righteaseinanimate /*在0%時設定文字在想x軸2000px位移處（右邊），透明度為0，也就是看不見文字*/
100% /*在100%時設定文字在想x軸0px位移處，也就是原始布局的位置，透明度為1，也就是文字可以看見了*/
}@-webkit-keyframes righteaseinanimate
100%
}@-o-keyframes righteaseinanimate
100%
}@-ms-keyframes righteaseinanimate
100%
}@-moz-keyframes righteaseinanimate
100%
}.company_introduce
CSS3學習筆記（2） 左右跳動的紅心
還在為無法表達內心澎湃的心情而著急嗎？還在為製作跳動的心而煩惱嗎？哈哈,今天我就把 全部奉上，為你們追妹子添點貢獻，下面來看最終的動態效果 事先說明一下 我用的截圖gif製作軟體是綠色版的，所以gif動態圖心的抖動效果會有點慢而且卡卡的，但是實際效果很棒,不信你可以貼上 看看唄 下面把心的png圖也...
css3學習筆記
1.為什麼分許多模組進行管理？為了避免產生瀏覽器對於某個模組支援不完全的情況。2.使用元素的class屬性的缺點 第一，class屬性本身沒有語義，褚翠是用來為css樣式服務的，屬於多餘屬性。第二，使用屬性的話，並沒有把樣式與元素繫結起來，針對同乙個class屬性文字框，下拉框，按鈕都可使用。這樣很...
CSS3學習筆記
一.選擇符 二.屬性 溢位隱藏 div4 p文字陰影 text shadow 2px 1px rgba 255,255,255,1 圓角效果 border radius邊框陰影 box shadow 2px 2px 5px 5px inset 內陰影透明度 div for ie8 and earli...