今天是520。
一句溫柔的問候,一束美麗的鮮花,一段真情的告白。
但是作為一名與眾不同的程序員,我們可不僅僅擁有上面的傳情方法,別忘了每個人的手上可是都有其他人不具備的神奇技能,就是我們每天辛辛苦苦敲下的代碼。
在這個特殊的日子,就用我們手中的魔法代碼,來給你的她(他)制作出一個與眾不同的禮物吧。
下面,介紹三種CSS畫心形的方法。實現(xiàn)過程都非常簡單,保證你一看就會。
用一個div畫出一個心,核心的方法就是使用偽元素。
首先,我們在頁面上先寫出一個div:
使用CSS,將這個div變?yōu)橐粋€橘紅色的正方形:
div { position:relative; top: 100px; left: 50%; width: 100px; height: 100px; background-color: tomato; }
接著我們利用元素的兩個偽元素:before和:after,畫出一個藍(lán)色的圓和一個黃色的圓,并且將它們的圓心分別定位在正方形的上邊和右邊。
div:before { content: ""; position:absolute; top: -50px; left: 0; width: 100px; height: 100px; border-radius: 50%; background-color: blue; } div:after{ content: ""; position: absolute; top: 0px; left: 50px; width: 100px; height: 100px; background-color: yellow; border-radius: 50%; }
再來,將剛剛實現(xiàn)的兩個圓變成和正方形一樣的顏色:
div:before { ... background-color: tomato; } div:after{ ... background-color: tomato; }
最后,將元素div旋轉(zhuǎn)45度,我們要的心形就實現(xiàn)了!就是這么簡單。
div { position:relative; top: 100px; left: 50%; width: 100px; height: 100px; background-color: tomato; transform: rotate(-45deg); }2.一顆心不夠,那我們就畫一屏
一顆心不夠表達(dá)我的心意,那么就給她畫出一屏幕的心。
????????????
????????????
????????????
????????????
????????????
我對你有表達(dá)不完的心意,就有寫不完的div:
HTML:
愛無處不在...
...
浮動讓它們填滿整個屏幕:
.heart{ position: relative; width: 100px; height: 90px; float: left; }
兩個偽元素代表我的左心房和右心房:
.heart:before, .heart:after{ position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: #fc2e5a; border-radius: 50px 50px 0 0; transform-origin: 0 100%; } .heart:after{ left: 0; transform-origin :100% 100%; }
讓左右心房都旋轉(zhuǎn)45度,就形成了我滿滿的一屏幕心:
.heart:before, .heart:after{ ... transform: rotate(-45deg); } .heart:after{ ... transform: rotate(45deg); }3.我對你的愛有多深
“以前我看事物,是用肉眼去看,但是在我死去的那一剎那,我開始用心眼去看這個世界,所有的事物,真的可以看得前所未有的那么清楚。” -周星馳
無論有多少顆心都不能表達(dá)出我對你的愛意有多深,于是,我要讓你看到我的心都是由每一個愛你的細(xì)胞所組成的:
CSS:
.heart { position: absolute; left: 50%; top: 50%; width: 105px; height: 105px; margin: -52.5px 0 0 -52.5px; }
像素級的世界可以由box-shadow屬性實現(xiàn)(參考文章《CSS3 box-shadow盒陰影圖形生成技術(shù)》):
.heart::before { content: ""; display: block; transition: all 400ms; width: 15px; height: 15px; margin: -15px 0 0 -15px; box-shadow: 30px 15px #8e1a19, 45px 15px #ac0500, 75px 15px #f73f0c, 90px 15px #fa5f27, 15px 30px #740100, 30px 30px #8e0500, 45px 30px #8e1918, 60px 30px #ca1300, 75px 30px #f34f2b, 90px 30px #df351f, 105px 30px #f77c2a, 15px 45px #4b0000, 30px 45px #690100, 45px 45px #8e0f0b, 60px 45px #bf1000, 75px 45px #f84010, 90px 45px #f04222, 105px 45px #fa5724, 15px 60px #451312, 30px 60px #5a0100, 45px 60px #840e0c, 60px 60px #a51d1a, 75px 60px #ed2805, 90px 60px #d9321e, 105px 60px #f44622, 30px 75px #3b0000, 45px 75px #5d1a1b, 60px 75px #8e1a19, 75px 75px #a80700, 90px 75px #b90a00, 45px 90px #3d0000, 60px 90px #551415, 75px 90px #670100, 60px 105px #340000; animation: pulse 1.2s steps(1) infinite; }
就這樣,一個像素級的心形就完成了,接著我們還可以給它添加上一個動畫效果,讓它的每一個細(xì)胞都產(chǎn)生動畫的效果,你可以嘗試一下。
最后,再送你一個CSS心形動畫效果:
獲取上面所有心形的代碼可以:
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/109673.html
showImg(https://segmentfault.com/img/bVbsRlD?w=211&h=184); 今天是520。一句溫柔的問候,一束美麗的鮮花,一段真情的告白。但是作為一名與眾不同的程序員,我們可不僅僅擁有上面的傳情方法,別忘了每個人的手上可是都有其他人不具備的神奇技能,就是我們每天辛辛苦苦敲下的代碼。 在這個特殊的日子,就用我們手中的魔法代碼,來給你的她(他)制作出一個與眾不...
showImg(https://segmentfault.com/img/bVbsRlD?w=211&h=184); 今天是520。一句溫柔的問候,一束美麗的鮮花,一段真情的告白。但是作為一名與眾不同的程序員,我們可不僅僅擁有上面的傳情方法,別忘了每個人的手上可是都有其他人不具備的神奇技能,就是我們每天辛辛苦苦敲下的代碼。 在這個特殊的日子,就用我們手中的魔法代碼,來給你的她(他)制作出一個與眾不...
今天是520。一句溫柔的問候,一束美麗的鮮花,一段真情的告白。但是作為一名與眾不同的程序員,我們可不僅僅擁有上面的傳情方法,別忘了每個人的手上可是都有其他人不具備的神奇技能,就是我們每天辛辛苦苦敲下的代碼。在這個特殊的日子,就用我們手中的魔法代碼,來給你的她(他)制作出一個與眾不同的禮物吧。下面,介紹三種CSS畫心形的方法。實現(xiàn)過程都非常簡單,保證你一看就會。1.一顆div一顆心用一個div畫出一...
今天是520。一句溫柔的問候,一束美麗的鮮花,一段真情的告白。但是作為一名與眾不同的程序員,我們可不僅僅擁有上面的傳情方法,別忘了每個人的手上可是都有其他人不具備的神奇技能,就是我們每天辛辛苦苦敲下的代碼。在這個特殊的日子,就用我們手中的魔法代碼,來給你的她(他)制作出一個與眾不同的禮物吧。下面,介紹三種CSS畫心形的方法。實現(xiàn)過程都非常簡單,保證你一看就會。1.一顆div一顆心用一個div畫出一...
摘要:今天是情人節(jié),據(jù)說直男在每個這樣彌漫著戀愛氣息的日子里都能把禮物送成辣眼睛現(xiàn)場,為了反駁這個觀點,小編特意走訪了網(wǎng)易云的架構(gòu)師工程師產(chǎn)品經(jīng)理程序猿哥哥們。 今天是情人節(jié),據(jù)說IT直男在每個這樣彌漫著戀愛氣息的日子里都能把禮物送成辣眼睛現(xiàn)場,為了反(zheng)駁(shi)這個觀點,小編特意走訪了網(wǎng)易云的架構(gòu)師、工程師、產(chǎn)品經(jīng)理、程序猿哥哥們。 劉超,網(wǎng)易云計算首席架構(gòu)師,江湖人稱超哥,...
閱讀 3737·2021-09-09 09:33
閱讀 3024·2019-08-30 15:56
閱讀 3017·2019-08-30 15:56
閱讀 3307·2019-08-30 15:55
閱讀 499·2019-08-30 15:53
閱讀 2179·2019-08-30 15:52
閱讀 662·2019-08-28 18:16
閱讀 2391·2019-08-26 13:51