CSS3中的動畫效果能夠讓我們輕松地實現許多有趣的效果，比如心電圖。心電圖模擬了人體心臟的跳動，非常形象的展示了圖形渲染和動畫效果的結合。

/*首先，需要先定一個容器*/
.electrocardiogram {
position: relative;
width: 600px;
height: 200px;
margin: 50px auto;
background-color: #333;
}
/*接著，畫出基準線*/
.electrocardiogram .baseline {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #fff;
}
/*然后，創建每一個心電圖小格子*/
.electrocardiogram .unit-grid {
position: absolute;
bottom: 0;
width: 0.5%;
height: 100%;
background-color: #fff;
animation: electrocardiogram 0.5s linear infinite;
}
/*接下來，寫出動畫效果*/
@keyframes electrocardiogram {
0% {
height: 2px;
transform: translateY(-1px);
}
50% {
height: 8px;
transform: translateY(-4px);
}
100% {
height: 2px;
transform: translateY(-1px);
}
}

以上代碼中，通過設置動畫關鍵幀，確定了每一次心電圖小格子的高度和位移，從而讓整個效果看起來更加真實。在容器內，通過創建基準線和小格子，實現了整個心電圖效果的展現。