2020,請你平安地,在我身邊

2021-10-02 21:46:56 字數 1637 閱讀 7822

今年的情人節

讓我們比任何時候都更珍惜愛和希望

更懂得那句「一定要注意安全啊~」的肺腑之意

異地戀的依舊異地

同城戀的變成了同城網戀

隔離疫情,但不會隔離愛

我們在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歲的時候,她給你買了球...