成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

?520，就用CSS給你的她（他）送顆心?

dockerclub / 1966人閱讀

今天是520。
一句溫柔的問(wèn)候，一束美麗的鮮花，一段真情的告白。
但是作為一名與眾不同的程序員，我們可不僅僅擁有上面的傳情方法，別忘了每個(gè)人的手上可是都有其他人不具備的神奇技能，就是我們每天辛辛苦苦敲下的代碼。

在這個(gè)特殊的日子，就用我們手中的魔法代碼，來(lái)給你的她（他）制作出一個(gè)與眾不同的禮物吧。
下面，介紹三種CSS畫(huà)心形的方法。實(shí)現(xiàn)過(guò)程都非常簡(jiǎn)單，保證你一看就會(huì)。

1.一顆div一顆心

用一個(gè)div畫(huà)出一個(gè)心，核心的方法就是使用偽元素。
首先，我們?cè)陧?yè)面上先寫(xiě)出一個(gè)div：

使用CSS，將這個(gè)div變?yōu)橐粋€(gè)橘紅色的正方形：

div {
  position:relative;
  top: 100px;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: tomato;
}

接著我們利用元素的兩個(gè)偽元素:before和:after，畫(huà)出一個(gè)藍(lán)色的圓和一個(gè)黃色的圓，并且將它們的圓心分別定位在正方形的上邊和右邊。

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%;
}

再來(lái)，將剛剛實(shí)現(xiàn)的兩個(gè)圓變成和正方形一樣的顏色：

div:before {
  ...
  background-color: tomato;
}
div:after{
  ...
  background-color: tomato;
}

最后，將元素div旋轉(zhuǎn)45度，我們要的心形就實(shí)現(xiàn)了！就是這么簡(jiǎn)單。

div {
  position:relative;
  top: 100px;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: tomato;
  transform: rotate(-45deg);
}

2.一顆心不夠，那我們就畫(huà)一屏

一顆心不夠表達(dá)我的心意，那么就給她畫(huà)出一屏幕的心。
????????????
????????????
????????????
????????????
????????????

我對(duì)你有表達(dá)不完的心意，就有寫(xiě)不完的div：

HTML：

愛(ài)無(wú)處不在...

















...

浮動(dòng)讓它們填滿(mǎn)整個(gè)屏幕：

.heart{
  position: relative;
  width: 100px;
  height: 90px;
  float: left;
}

兩個(gè)偽元素代表我的左心房和右心房：

.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度，就形成了我滿(mǎn)滿(mǎn)的一屏幕心：

.heart:before,
.heart:after{
  ...
  transform: rotate(-45deg);
}
.heart:after{
  ...
  transform: rotate(45deg);
}

3.我對(duì)你的愛(ài)有多深 
“以前我看事物，是用肉眼去看，但是在我死去的那一剎那，我開(kāi)始用心眼去看這個(gè)世界，所有的事物，真的可以看得前所未有的那么清楚?！?          -周星馳

無(wú)論有多少顆心都不能表達(dá)出我對(duì)你的愛(ài)意有多深，于是，我要讓你看到我的心都是由每一個(gè)愛(ài)你的細(xì)胞所組成的：

CSS：

.heart {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 105px;
  height: 105px;
  margin: -52.5px 0 0 -52.5px;
}

像素級(jí)的世界可以由box-shadow屬性實(shí)現(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;
}

就這樣，一個(gè)像素級(jí)的心形就完成了，接著我們還可以給它添加上一個(gè)動(dòng)畫(huà)效果，讓它的每一個(gè)細(xì)胞都產(chǎn)生動(dòng)畫(huà)的效果，你可以嘗試一下。

最后，再送你一個(gè)CSS心形動(dòng)畫(huà)效果：

獲取上面所有心形的代碼可以：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53899.html

相關(guān)文章

  • ?520，就用CSS給你的她（他）送顆心?

    showImg(https://segmentfault.com/img/bVbsRlD?w=211&h=184); 今天是520。一句溫柔的問(wèn)候，一束美麗的鮮花，一段真情的告白。但是作為一名與眾不同的程序員，我們可不僅僅擁有上面的傳情方法，別忘了每個(gè)人的手上可是都有其他人不具備的神奇技能，就是我們每天辛辛苦苦敲下的代碼。 在這個(gè)特殊的日子，就用我們手中的魔法代碼，來(lái)給你的她（他）制作出一個(gè)與眾不...

    Donne 評(píng)論0 收藏0

  • ?520，就用CSS給你的她（他）送顆心?

    showImg(https://segmentfault.com/img/bVbsRlD?w=211&h=184); 今天是520。一句溫柔的問(wèn)候，一束美麗的鮮花，一段真情的告白。但是作為一名與眾不同的程序員，我們可不僅僅擁有上面的傳情方法，別忘了每個(gè)人的手上可是都有其他人不具備的神奇技能，就是我們每天辛辛苦苦敲下的代碼。 在這個(gè)特殊的日子，就用我們手中的魔法代碼，來(lái)給你的她（他）制作出一個(gè)與眾不...

    Tangpj 評(píng)論0 收藏0

  • ?520，就用CSS給你的她（他）送顆心?

    今天是520。一句溫柔的問(wèn)候，一束美麗的鮮花，一段真情的告白。但是作為一名與眾不同的程序員，我們可不僅僅擁有上面的傳情方法，別忘了每個(gè)人的手上可是都有其他人不具備的神奇技能，就是我們每天辛辛苦苦敲下的代碼。在這個(gè)特殊的日子，就用我們手中的魔法代碼，來(lái)給你的她（他）制作出一個(gè)與眾不同的禮物吧。下面，介紹三種CSS畫(huà)心形的方法。實(shí)現(xiàn)過(guò)程都非常簡(jiǎn)單，保證你一看就會(huì)。1.一顆div一顆心用一個(gè)div畫(huà)出一...

    番茄西紅柿 評(píng)論0 收藏0

  • ?520，就用CSS給你的她（他）送顆心?

    今天是520。一句溫柔的問(wèn)候，一束美麗的鮮花，一段真情的告白。但是作為一名與眾不同的程序員，我們可不僅僅擁有上面的傳情方法，別忘了每個(gè)人的手上可是都有其他人不具備的神奇技能，就是我們每天辛辛苦苦敲下的代碼。在這個(gè)特殊的日子，就用我們手中的魔法代碼，來(lái)給你的她（他）制作出一個(gè)與眾不同的禮物吧。下面，介紹三種CSS畫(huà)心形的方法。實(shí)現(xiàn)過(guò)程都非常簡(jiǎn)單，保證你一看就會(huì)。1.一顆div一顆心用一個(gè)div畫(huà)出一...

    mzlogin 評(píng)論0 收藏0

  • 準(zhǔn)備情人節(jié)禮物比寫(xiě)代碼難？來(lái)看看IT直男給女友們的禮物

    摘要：今天是情人節(jié)，據(jù)說(shuō)直男在每個(gè)這樣彌漫著戀愛(ài)氣息的日子里都能把禮物送成辣眼睛現(xiàn)場(chǎng)，為了反駁這個(gè)觀點(diǎn)，小編特意走訪了網(wǎng)易云的架構(gòu)師工程師產(chǎn)品經(jīng)理程序猿哥哥們。 今天是情人節(jié)，據(jù)說(shuō)IT直男在每個(gè)這樣彌漫著戀愛(ài)氣息的日子里都能把禮物送成辣眼睛現(xiàn)場(chǎng)，為了反（zheng）駁（shi）這個(gè)觀點(diǎn)，小編特意走訪了網(wǎng)易云的架構(gòu)師、工程師、產(chǎn)品經(jīng)理、程序猿哥哥們。 劉超，網(wǎng)易云計(jì)算首席架構(gòu)師，江湖人稱(chēng)超哥，...

    Flink_China 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<