站長資訊網(wǎng)
之前的文章《手把手教你怎么使用css3給文字添加動畫效果（附代碼）》中，給大家介紹怎么使用css3給文字添加動畫效果。下面本篇給大家介紹怎么使用css制作一個簡單的心跳效果，我們一起看看怎么做。
ccs制作一個簡單的心跳效果的方法，添加一個盒子，充分利用ccs展現(xiàn)就可以啦。
1、首先我們在頁面添加一個可視化的盒子，創(chuàng)建新一個文檔，寫代碼先用<div class="heart"></div>這串代碼在框架<div>標(biāo)簽。
代碼示例
<body> <div class="heart"></div> </body>
Html代碼完成。
2、將它先變成一顆心，使用css設(shè)置動畫及字體樣式，heart屬性使用將動畫與div元素綁定，下面給大家怎么寫代碼，使用head標(biāo)簽之間加入<style type"text/css"></style>這串代碼然后在style標(biāo)簽中輸入*、li、a文本的邊框外部和元素距離為0、默認(rèn)值、掉刪下劃線，代碼示例。
*{margin:0; padding:0;} li{list-style:none;} a{text-decoration:none;}
3、接著，使用head標(biāo)簽之間加入heart這串代碼然后在style標(biāo)簽中輸入文本的相對定位、寬度、高度、外邊距屬性可以有1到4個值、過渡動畫，代碼示例
*{margin:0; padding:0;} li{list-style:none;} a{text-decoration:none;} .heart{ position:relative; width:100px; height:100px; margin:100px; animation:scale 1s linear infinite; /*名稱 1s 勻速 無限循環(huán)*/
4、最后設(shè)置一下動畫animation，這里要說一下animation必須和@keyframes一起用，繼續(xù)用head標(biāo)簽之間在style標(biāo)簽中輸入絕對定位、寬度、高度、顏色、content屬性、外邊框圓角、旋轉(zhuǎn)元素，代碼示例
.heart:after, .heart:before{ position:absolute; width:70px; height:100%; background-color:red; content:""; border-radius:50% 50% 0 0; } .heart:before{ left:0; transform:rotate(-52deg); } .heart:after{ right:0; transform:rotate(49deg);
代碼效果
5、我們讓它水平垂直兩倍縮放
代碼示例
@keyframes scale{ /*動畫幀*/ 50%{transform:scale(2)} }
代碼效果
效果出來了，有點意思，想變成美的伙伴們可以自己去修改，畢竟審美功力有限，大家審美眾口難調(diào)，畢竟我也做不到所有人都認(rèn)可我，我只有努力把作品盡了量的完善。
【完】
推薦學(xué)習(xí)：CSS3視頻教程
