小伙伴們

你們的愛心做出來了嗎？

沒做出來的也 沒關系

咱們今天就來一起做一下

制作跳動的愛心

首先來分析一下繪制愛心的思路

先來創建 3 個正方形，讓他們有一半是重疊的，然后給外面的兩個矩形圓角的屬性，就可以形成一個愛心的圖形。如下圖所示：

我們把這個圖形旋轉 45 度，就可以變成一個愛心的形狀了，怎么樣？你想到這一點了嗎？現在我們用代碼來實現一下~

先來制作三個矩形，中間添加上文字『?I LOVE YOU?』，愛心一般這是配這種文字的。

看一下效果：

現在修改圖形的形狀：

看我們的正方形就變成愛心了。

下面給愛心添加動畫

白底看著不是那么美觀哈~換個底色：

完整代碼奉上：

Title

*{margin:0;padding:0;}

body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{?margin:0;}

a{text-decoration:none;color: inherit;}

img{display: block;border:none;}

ol,ul{list-style:none;}

.clearfix:after?{content:?"";display: block;clear: both;}

.fl{?float: left;}

.fr{?float: right;}

html{

height:?100%;

background:?-webkit-radial-gradient(center,#153170,#000);

}

.heart{?position: relative;?width:?300px;?height:?300px;?margin:?200px?auto;transform:?rotate(45deg);

animation: move?2s?infinite alternate ;}

.heart?div{?position: absolute;?width:?200px;?height:?200px;?background: red;}

.heart?.middle{?right:?0;?bottom:?0;?width:?200px;?height:?200px;}

.heart?.left{?left:?0;?bottom:?0;?border-radius:?50%;}

.heart?.right{?top:?0;?right:?0;border-radius:?50%;}

.heart?p{?width:?200px;?height:?30px;?font: bold?25px/30px?"";text-align:center;?color:?#fff;}

.heart?p{?position: absolute;?right:?0;?bottom:?85px;?transform:?rotate(-45deg);}

@-webkit-keyframes?move{

10%{?transform:?rotate(45deg)?scale(1.1);?text-shadow:?0?0?5px?#fff; }

20%{?transform:?rotate(45deg)?scale(1.2);?text-shadow:?0?0?5px?#fff; }

30%{?transform:?rotate(45deg)?scale(1.3);?text-shadow:?0?0?5px?#fff; }

40%{?transform:?rotate(45deg)?scale(1.2);?text-shadow:?0?0?5px?#fff; }

50%{?transform:?rotate(45deg)?scale(1.3);?text-shadow:?0?0?5px?#fff; }

60%{?transform:?rotate(45deg)?scale(1.2);?text-shadow:?0?0?5px?#fff; }

70%{?transform:?rotate(45deg)?scale(1.3);?text-shadow:?0?0?5px?#fff; }

80%{?transform:?rotate(45deg)?scale(1.2);?text-shadow:?0?0?10px?#fff;}

90%{?transform:?rotate(45deg)?scale(1.1);?text-shadow:?0?0?5px?#fff; }

}

I Love You

解釋性的東西比較少

干貨都在代碼里了

伙伴們要是有更好地想法

就來動手試一下吧！