手把手教你用css製作一個簡單的心跳效果（程式碼詳解）

之前的文章《手把手教你怎麼使用css3為文字添加動畫效果（附代碼）》中，跟大家介紹怎麼使用css3為文字添加動畫效果。以下這篇文章跟大家介紹怎麼使用css製作一個簡單的心跳效果，我們一起看看怎麼做。

ccs製作一個簡單的心跳效果的方法，添加一個盒子，充分利用ccs展現就可以啦。

1、首先我們在頁面新增一個視覺化的盒子，建立新一個文檔，寫程式碼先用<div class="heart"></div>這串程式碼在框架<div>標籤。 <p>程式碼範例</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;body&gt; &lt;div class=&quot;heart&quot;&gt;&lt;/div&gt; &lt;/body&gt;</pre><div class="contentsignin">登入後複製</div></div><p> Html程式碼完成。 </p><p>2、先將它變成一顆心，使用<code>css設定動畫及字體樣式，heart屬性使用將動畫與div元素綁定，下面給大家怎麼寫程式碼，使用head標籤之間加入<style type"text/css"></style>這串程式碼然後在style標籤中輸入*、 li、a文字的邊框外部和元素距離為0、預設值、掉刪下劃線，程式碼範例。

*{margin:0; padding:0;}
li{list-style:none;}
a{text-decoration:none;}

3、接著，使用head標籤之間加入heart這串程式碼然後在style標籤中輸入文字的相對定位、寬度、高度、外邊距屬性可以有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 匀速 无限循环*/

4、最後設定動畫animation，這裡要說一下animation必須和@keyframes一起用，繼續用head標籤之間在style標籤中輸入絕對定位、寬度、高度、顏色、content屬性、外邊框圓角、旋轉元素，程式碼範例

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

程式碼效果

效果出來了，有點意思，想變成美的伙伴們可以自己去修改，畢竟審美功力有限，大家審美眾口難調，畢竟我也做不到所有人都認可我，我只有努力把作品盡了量的完善。

【完】

推薦學習：

CSS3影片教學#

以上是手把手教你用css製作一個簡單的心跳效果（程式碼詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！