七夕愛心
特效
前端工程師的溫柔
前端工程師- 互聯網時代背景下的又一新型職業(yè)！在我看來前端工程師是溫柔而又浪漫的！以己之長，與用戶打交道并為用戶帶來極致體驗。便是他們的工作日常，而正是這種日常，造就了他們的思想是豐富多彩的，性格也會與其他程序猿大有不同！因此前端程序猿便會發(fā)揮他們的才能，顯示他們的可愛，比如下面我們帶來的Css3愛心表白特效。
七夕程序員的禮物 怦然心動
我們看到的動圖是三個愛心圍繞成一個愛心的形狀，然后像心跳一樣，撲通撲通的跳
那么接下來我們就分析，首先我們要把三個愛心做出來然后再給它添加動畫效果
畫愛心 上代碼
首先我們可以弄一個正方形
這樣我們就得到了一個菱形
得到菱形之后我們就可以畫倆個圓
這些都有之后，我們可以以菱形做相對定位，圓形做絕對定位把我們的圓分別放在菱形邊上的左上方和右上方
那么這就是我們一個圓的畫法了，其他圓都是一樣的
接下來就是我們如何把他們擺成一個愛心的形狀了，很簡單還是通過偏移
擺成愛心的形狀之后，接下來就是我們的心跳動畫了
我們定義的動畫跟我們前面盒子里寫的transform：rotate（-45deg）有沖突，我們直接把這個效果寫在定義的動畫里就行了，
好了，這就是這個愛心表白動畫的全部代碼了
無論何時見你 我都怦然心動
程序員的浪漫
關注 我們
聯系客服
