最近學了一點css動畫的屬性，看了課程之後，重新做了一下心跳跳動的小demo。
absolute
生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed
生成絕對定位的元素，相對於瀏覽器視窗進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative
生成相對定位的元素，相對於其正常位置進行定位。
因此，"left:20" 會向元素的 left 位置新增 20 畫素。
static
預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。
inherit
規定應該從父元素繼承 position 屬性的值。值描述
animation-name
規定需要繫結到選擇器的 keyframe 名稱。。
animation-duration
規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function
規定動畫的速度曲線。
animation-delay
規定在動畫開始之前的延遲。
animation-iteration-count
animation-direction
通過 @keyframes 規則，您能夠建立動畫。
建立動畫的原理是，將一套 css 樣式逐漸變化為另一套樣式。
在動畫過程中，您能夠多次改變這套 css 樣式。
0% 是動畫的開始時間，100% 動畫的結束時間。
為了獲得最佳的瀏覽器支援，您應該始終定義 0% 和 100% 選擇器。
以上內容均來自菜鳥教程（css3教程）
body
.heart
.heart div
.topleft,
.topright
/* */
.topleft
.topright
.bottom
/* 定義動畫 */
@keyframes shake
to }/* 改變心跳顏色時這部分要同時進行改變 */
@keyframes shadow
to }
原生js實現貪吃蛇 snake demo
原始碼見我github(github.jackyjk_gamejs)
心形函式 封心
這個是 html5實驗室 canvas世界 中的乙個例子，最大的收穫當然是心形函式 x 2 y 2 1 x 2 y 3 0。有了前面幾個動畫做鋪墊，這個還是比較容易就完成了，沒有遇到什麼奇特的問題。不過也因為比較輕鬆，的組織不是很認真，也不想去改了。值得一提的是這個動畫很容易另行發揮，我在除錯的過程...
Shader學習 1跳動的心
學習參考 關於心的形狀 首先，我們來看心形線的定義 乙個圓上的固定一點在它繞著與其相切且半徑相同的另外乙個圓周滾動時所形成的軌跡。下面進入正文，分為背景和心形兩部分進行學習。背景部分 background color fixed3 background fixed3 1.0,0.8,0.7 0.07...
animation心形 表白
animation心形線 表白 去除預設外邊距 內邊距 body heart3d display heart3d class rib heart3d class 0 heart3d class 1 heart3d class 2 heart3d class 3 heart3d class 4 hea...