前言：今天我們就不寫js代碼，我們利用css來實現一個跳動的愛心。有喜歡的人趕緊用它去表白吧。

具體效果：

1.html代碼

這是有史以來最簡單的html代碼了，只有一個div，這也不難理解，頁面上只有一個愛心，當然只有一個div了

<div class="heart"></div>


2.CSS代碼

這才是我們的重頭戲，跟著我一起來一步一步實現吧：

<style>
/* 設置一個初始的寬高 */
html,body {
width: 100%;
height: 100%;
}
/* 給body初始化一些樣式，並且設置為flex盒子 */
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(190, 153, 153);
}
/* 給我們的愛心設置一下樣式，並且初始化動畫 */
.heart {
width: 60px;
height: 60px;
background-color: rgb(221, 35, 35);
position: relative;
animation: beat .6s infinite ease-in;
}
/* 利用為元素,分別添加兩個圓，為了看出差別，顏色先不一樣*/
.heart:before,.heart:after{
content: ;
position: absolute;
width: 60px;
height: 60px;
background-color: rgb(206, 99, 99);
border-radius: 50%;
}
/* 設置兩個偽元素的位置 */
.heart:before{
left: 30px;
}
.heart:after {
top: -30px;
}
</style>


這裡我們對愛心進行了一些初步的設置，可是這啥效果也沒有啊！別急，後面的動畫才是我們的重頭戲：

擴展：

animation動畫：這是css3的動畫屬性，不熟悉的同學可以了解一下。

偽元素：CSS 偽元素用於向某些選擇器設置特殊效果。

好了，我們繼續寫代碼，實現我們的動畫：

<style>
/* 設置一個初始的寬高 */
html,body {
width: 100%;
height: 100%;
}
/* 給body初始化一些樣式，並且設置為flex盒子 */
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(190, 153, 153);
}
/* 給我們的愛心設置一下樣式，並且初始化動畫 */
.heart {
width: 60px;
height: 60px;
background-color: rgb(221, 35, 35);
position: relative;
animation: beat .6s infinite ease-in;
}
/* 利用為元素,分別添加兩個圓，為了看出差別，顏色先不一樣*/
.heart:before,.heart:after{
content: ;
position: absolute;
width: 60px;
height: 60px;
background-color: rgb(221, 35, 35);
border-radius: 50%;
}
/* 設置兩個偽元素的位置 */
.heart:before{
left: 30px;
}
.heart:after {
top: -30px;
}
/* 定義beat動畫 */
@keyframes beat {
0%{
transform:scale(1) rotate(-45deg);
}

40%{
transform:scale(1) rotate(-45deg);
}

55%{
transform:scale(1.3) rotate(-30deg);
}

70%{
transform:scale(1) rotate(-45deg);
}

85%{
transform:scale(1.3) rotate(-60deg);
}

100%{
transform:scale(1) rotate(-45deg);
}
}
</style>

注釋：0% 是動畫的開始，100% 是動畫的完成。

結束語：到這裡我們就完成了小愛心的製作，這裡面涉及到的幾個我認為主要的點如下：

1.偽元素的使用

2.css3動畫的使用

需要源代碼的小夥伴請移步這裡：

Hacker233/JavaScript?

github.com
推薦閱讀：

相关文章