CSS3學習筆記（2） 左右跳動的紅心

還在為無法表達內心澎湃的心情而著急嗎？還在為製作跳動的心而煩惱嗎？哈哈,今天我就把**全部奉上，為你們追妹子添點貢獻，下面來看最終的動態效果（事先說明一下：我用的截圖gif製作軟體是綠色版的，所以gif動態圖心的抖動效果會有點慢而且卡卡的，但是實際效果很棒,不信你可以貼上**看看唄）

下面把心的png圖也貼出來，感興趣的可以右鍵另存為試試.

其實上面的動畫類似於我們小時候蕩的鞦韆，也叫作「鞦韆動畫」，一般用在想讓使用者點選這個圖示的時候，不僅僅限制於表白用o(∩_∩)o，比如企業招聘時想讓求職者點選投簡歷的圖示進入另乙個頁面等。

書寫這段程式的思路：

（1）先要定義乙個動畫，在10%，20%，30%.......100%時心形圖的不同狀態，當然時間段和狀態都是看自己的需要設定

一、先來看看html**：

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
/>
<
title
>心動時左右搖擺
title
>
<
link 
type
="text/css"
rel="stylesheet"
href
="css/animate.css"
/>
head
>
<
body
>
<
img 
class
="heart"
src="img/heart.png"
/>
body
>
html
>

/*定義乙個名字叫heartanimate的動畫，實現心形圖的放大以及旋轉效果*/

@keyframes heartanimate /*0%,100%時保持圖形的原大小且不旋轉*/
10%,30% /*10%,30%時圖形縮小成0.9倍，並且順時針旋轉3度*/
20%,40%,60%,80% /*20%,40%,60%,80%時圖形擴大成1.1倍，並且逆時針旋轉3度*/
50%,70% /*50%,70%時圖形擴大成1.1倍，並且順時針旋轉3度*/
}@-webkit-keyframes heartanimate
10%,30%
20%,40%,60%,80%
50%,70%
}@-moz-keyframes heartanimate
10%,30%
20%,40%,60%,80%
50%,70%
}@-o-keyframes heartanimate
10%,30%
20%,40%,60%,80%
50%,70%
}@-ms-keyframes heartanimate
10%,30%
20%,40%,60%,80%
50%,70%
}.heart

CSS3學習筆記（3） 左右飛入的文字

前幾天看到乙個企業招聘的動畫覺得很炫，裡面有個企業介紹的文字是用飛入的效果做出來的，今天嘗試了寫了一下，感覺還不錯 啦啦啦 下面來看我做的動態效果 其實上面的效果很簡單的，我的截圖軟體有問題，所以不是很清晰，但是大概的效果出現了 螢幕顏色從紅變白是因為我把滑鼠從頁面上移到截圖軟體上關閉截圖，不要被這...

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...