今年的情人節
讓我們比任何時候都更珍惜愛和希望
更懂得那句「一定要注意安全啊~」的肺腑之意
異地戀的依舊異地
同城戀的變成了同城網戀
隔離疫情,但不會隔離愛
我們在medium上為大家找到了乙個可以傳送愛心的教程
作者把**也放到裡面了
隔離疫情,但不會隔離愛
2020,依舊【愛你愛你】
每年2月14日,很多人都會選擇用交換卡片、糖果、禮物或鮮花來向喜歡的人表達心意。
但是程式設計師在情人節可以為他們的愛人做什麼呢?
我的答案是:使用css並發揮創造力!
所以,讓我們開始吧。如何建立具有純幾何形狀的桃心?
由正方形和兩個圓圈組成的心
可以看到,其實我們只需要乙個正方形和兩個圓形。
借助::after和::before偽元素,我們可以使用單個元素進行繪製。說到偽元素,::after是乙個偽元素,它使你可以將內容從css插入頁面(不需要在html中)。::befor也是一樣的,只是它content在html中的其他任何內容之前而不是之後插入。
對於這兩個偽元素,最終結果實際上並不是在dom中,而是在頁面上顯示,就好像它是在頁面上一樣。
接下來,就讓我們來建立自己的小桃心吧~
.heart
.heart:before,
.heart:after
.heart:before
.heart:after
用css創造一顆心
可以看到,通過使用主要的「心」類以及帶有::before和::after偽元素的兩個圓來定義正方形及其位置。圓圈實際上只是另外2個正方形,其邊界半徑減小了一半。
但是心怎麼能不跳動呢?
讓我們建立乙個脈衝。在這裡,我們將使用@關鍵幀規則。@關鍵幀 css規則用於定義css動畫乙個週期的行為。
使用關鍵幀規則時,我們可以將時間段劃分為較小的部分,並通過將其分成多個步驟來建立轉換/動畫(每個步驟對應於該時間段完成的百分比)。
建立心跳動畫包括3個步驟:
@keyframes heartbeat
20%
40%
}
建立心跳動畫
1、在0%的時間段內,我們不進行任何轉換。
2、在20%的時間段內,我們將形狀縮放到其初始大小的125%。
3、在40%的時間段內,我們將形狀縮放到其初始大小的150%。在剩下的60%的時間裡,我們留出時間讓心臟恢復到初始狀態。
最後,我們必須將動畫分配給我們。
.heart
會動的小心心
好啦~這就是一顆會一直跳動著的心。
別了,易科士,平安夜,我真正地屬於中國平安了!
昨天是2012年12月24日,周一,我正在專心地研究arm7中液晶模組的漢字顯示問題呢,突然接到部門經理肖國輝通知,說 研發中心張總找我。心裡就納悶。張總的辦公室離我很近,出來進去不直接喊我,還要找人捎話。進去之後,果不其然,幾句寒暄後,讓我馬上離職吧。立刻就去填寫辭職單。真的讓人寒心。之前,他讓我...
隨筆 寫在2023年的聖誕平安夜
突然想提筆寫些什麼。顧於找不到紙筆,想著就開啟筆記本敲幾行字。這種脫節對我來說並不會帶來不適,恰恰相反,我卻感覺在自己的節奏裡,往前探索,不受干擾,倒也自在。因為年底靠近聖誕,公司提前放假一周,我也正好返鄉一趟。這次回家和往常不太一樣,雖也有需要適應的地方,但並沒有特別佔據精力的事情,整體氣氛令人放...
爸爸媽媽請你們在健康50年!!!
當你1歲的時候,她喂你吃奶並給你洗澡 而作為報答,你整晚的哭著 當你3歲的時候,她憐愛的為你做菜 而作為報答,你把一盤她做的菜扔在地上 當你4歲的時候,她給你買下彩筆 而作為報答,你塗了滿牆的抽象畫 當你5歲的時候,她給你買了漂亮的衣服 而作為報答,你穿著它到泥坑裡玩耍 當你7歲的時候,她給你買了球...