小伙伴們
你們的愛心做出來了嗎？
沒做出來的也 沒關(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,#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
解釋性的東西比較少
干貨都在代碼里了
伙伴們要是有更好地想法
就來動手試一下吧！
