小伙伴們
你們的愛心做出來了嗎莫杈？
沒做出來的也 沒關(guān)系
咱們今天就來一起做一下
制作跳動的愛心
首先來分析一下繪制愛心的思路
先來創(chuàng)建 3 個正方形，讓他們有一半是重疊的欺劳，然后給外面的兩個矩形圓角的屬性，就可以形成一個愛心的圖形铅鲤。如下圖所示：
我們把這個圖形旋轉(zhuǎn) 45 度划提，就可以變成一個愛心的形狀了，怎么樣邢享？你想到這一點了嗎鹏往？現(xiàn)在我們用代碼來實現(xiàn)一下~
先來制作三個矩形，中間添加上文字『I LOVE YOU』骇塘，愛心一般這是配這種文字的伊履。
看一下效果：
現(xiàn)在修改圖形的形狀：
看我們的正方形就變成愛心了。
下面給愛心添加動畫
白底看著不是那么美觀哈~換個底色：
完整代碼奉上：
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:0}},#000);
}
.heart{position: relative;width:300px;height:300px;margin:200pxauto;transform:rotate(45deg);
animation: move2sinfinite alternate ;}
.heartdiv{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%;}
.heartp{width:200px;height:30px;font: bold25px/30px"";text-align:center;color:#fff;}
.heartp{position: absolute;right:0;bottom:85px;transform:rotate(-45deg);}
@-webkit-keyframesmove{
10%{transform:rotate(45deg)scale(1.1);text-shadow:005px#fff; }
20%{transform:rotate(45deg)scale(1.2);text-shadow:005px#fff; }
30%{transform:rotate(45deg)scale(1.3);text-shadow:005px#fff; }
40%{transform:rotate(45deg)scale(1.2);text-shadow:005px#fff; }
50%{transform:rotate(45deg)scale(1.3);text-shadow:005px#fff; }
60%{transform:rotate(45deg)scale(1.2);text-shadow:005px#fff; }
70%{transform:rotate(45deg)scale(1.3);text-shadow:005px#fff; }
80%{transform:rotate(45deg)scale(1.2);text-shadow:0010px#fff;}
90%{transform:rotate(45deg)scale(1.1);text-shadow:005px#fff; }
}
I Love You
解釋性的東西比較少
干貨都在代碼里了
伙伴們要是有更好地想法
就來動手試一下吧款违！
學(xué)習(xí)Java的同學(xué)注意了Ｌ破佟！插爹！學(xué)習(xí)過程中遇到什么問題或者想獲取學(xué)習(xí)資源的話哄辣，歡迎加入Java學(xué)習(xí)交流群：253772578，我們一起學(xué)Java！
