作者：JowayYoung

轉發鏈接：https://mp.weixin.qq.com/s/pGAVZYvm3YGqnsJuc41shw

前言

以下程序猿通通指男性程序猿哈

今天是一年一度的七夕，估計各位程序猿同行都不得不對心儀的妹紙吟詩作對了。

「銀燭秋光冷畫屏，輕羅小扇撲流螢。天街夜色涼如水，臥看牽牛織女星。」

雖然吟唱了唐朝杜牧大師的「七夕」，但好歹筆者也能倒背如流。

單身的程序猿或準備脫單的程序猿怎么辦，常規操作是const girl = new Object()，沒對象就自己創建一個對象過節唄。可是筆者今天想用純CSS為單調的七夕做一些點綴呢。

pig

以下全程純玩CSS，沒有一段JS，簡單的CSS也能點綴出在七夕里你對心儀妹紙的心意。

Meet You

當你遇見心儀妹紙時，心里噗通噗通地跳動，此時此刻可用純CSS描繪你的心情。

使用單個

結合兩個偽元素::before和::after通過錯位疊加的方式合并成一個心形。聲明的尺寸為一個正方形并以中心順時針旋轉45deg聲明兩個偽元素繼承的尺寸并實行絕對定位聲明兩個偽元素的圓角率為100%并平移到相應位置

巧妙利用了transform將兩個偽元素平移到相應位置產生疊加錯覺。

meet

.meet?{????position:?relative;????width:?200px;????height:?200px;????background-color:?#f66;????transform:?rotate(45deg);????&::before,????&::after?{????????position:?absolute;????????left:?0;????????top:?0;????????border-radius:?100%;????????width:?100%;????????height:?100%;????????background-color:?#f66;????????content:?"";????}????&::before?{????????transform:?translateX(-100px);????}????&::after?{????????transform:?translateY(-100px);????}}

meet

Love You

當你真的愛上心儀妹紙時，心里就會產生愛的荷爾蒙，慢慢布滿曾經受傷而變得有棱角的心(前提是你曾經受過傷害，不然心也是圓圓的)。

使用clip-path的polygon()裁剪出一個棱角心形，實質上是一個多邊形。

.love?{????width:?300px;????height:?300px;????background-image:?linear-gradient(to?bottom,?#f66,?#66f);????clip-path:?polygon(25%?0,?50%?20%,?75%?0,?100%?20%,?100%?60%,?50%?95%,?0?60%,?0?20%);}

love

Miss You

當你和心儀妹紙在一起后都日想夜念，恨不得每天都膩在一起，心情就像過山車那樣隨時帶著驚喜。

前段時間看到「陳大魚頭兄」的心形加載條，覺得挺漂亮的，很帶感覺。

miss

通過動圖分析，發現每條線條的背景色和動畫時延不一致，另外動畫運行時的高度也不一致。細心的你可能還會發現，第1條和第9條的高度一致，第2條和第8條的高度一致，以此類推，得到高度變換相同類的公式：對稱index = 總數 + 1 - index。

背景色使用了濾鏡的色相旋轉hue-rotate()，目的是為了讓顏色過渡得更自然。

.miss?{????display:?flex;????justify-content:?center;????align-items:?center;????width:?200px;????height:?200px;????ul?{????????display:?flex;????????justify-content:?space-between;????????width:?150px;????????height:?10px;????}????li?{????????--Θ:?calc(var(--line-index)?/?var(--line-count)?*?.5turn);????????--time:?calc((var(--line-index)?-?1)?*?40ms);????????border-radius:?5px;????????width:?10px;????????height:?10px;????????background-color:?#3c9;????????filter:?hue-rotate(var(--Θ));????????animation-duration:?1s;????????animation-delay:?var(--time);????????animation-iteration-count:?infinite;????????&.line-1,????????&.line-9?{????????????animation-name:?beat-1;????????}????????&.line-2,????????&.line-8?{????????????animation-name:?beat-2;????????}????????&.line-3,????????&.line-7?{????????????animation-name:?beat-3;????????}????????&.line-4,????????&.line-6?{????????????animation-name:?beat-4;????????}????????&.line-5?{????????????animation-name:?beat-5;????????}????}}@keyframes?beat-1?{????0%,????10%,????90%,????100%?{????????height:?10px;????}????45%,????55%?{????????height:?30px;????????transform:?translate3d(0,?-15px,?0);????}}@keyframes?beat-2?{????0%,????10%,????90%,????100%?{????????height:?10px;????}????45%,????55%?{????????height:?60px;????????transform:?translate3d(0,?-30px,?0);????}}@keyframes?beat-3?{????0%,????10%,????90%,????100%?{????????height:?10px;????}????45%,????55%?{????????height:?80px;????????transform:?translate3d(0,?-40px,?0);????}}@keyframes?beat-4?{????0%,????10%,????90%,????100%?{????????height:?10px;????}????45%,????55%?{????????height:?90px;????????transform:?translate3d(0,?-30px,?0);????}}@keyframes?beat-5?{????0%,????10%,????90%,????100%?{????????height:?10px;????}????45%,????55%?{????????height:?90px;????????transform:?translate3d(0,?-20px,?0);????}}

一波操作后就有了以下效果。和陳大魚頭兄的心形加載條相比，顏色、波動曲線和跳動頻率有點不一樣，在暖色調的蔓延和腎上腺素的飆升下，這是一種心動的感覺。對著你心儀妹紙說：I Miss You。

miss

CSS變量怎樣玩，可回顧筆者曾經的文章《妙用CSS變量，讓你的CSS變得更心動》。

Marry You

當你娶到心儀妹紙后，在你眼里整個世界都是她。也許，你會感激曾經在某一天某一刻某一地遇上那個對的她。寫到最后，送給各位同學一個大大的彩蛋，一個暖心彩虹色調搭配的愛心點贊按鈕。

marry

????$heart-color:?#f66;$easing:?cubic-bezier(.7,?0,?.3,?1);$duration:?500ms;.marry?{????position:?relative;????z-index:?1;????border:?none;????border-radius:?100%;????width:?1em;????height:?1em;????appearance:?none;????background-color:?#fff;????cursor:?pointer;????font-size:?200px;????transition:?all?$duration?$easing;????&::before?{????????position:?absolute;????????left:?0;????????top:?0;????????z-index:?-1;????????border-radius:?inherit;????????width:?100%;????????height:?100%;????????box-shadow:?0?.3em?.6em?rgba(#000,?.3);????????content:?"";????????transition:?inherit;????}????&::after?{????????position:?absolute;????????left:?0;????????top:?0;????????z-index:?-1;????????border-radius:?inherit;????????width:?100%;????????height:?100%;????????background-color:?#fff;????????content:?"";????}????&:active?{????????&::before?{????????????animation:?depress-shadow?$duration?$easing?both;????????}????}????&:focus::after?{????????animation:?depress?$duration?$easing?both;????}}.like-wrapper?{????display:?grid;????justify-content:?center;????align-items:?center;????>?*?{????????grid-area:?1/1;????????margin:?auto;????}}.like-ripple?{????overflow:?hidden;????position:?relative;????border-radius:?100%;????width:?1em;????height:?1em;????&::before?{????????position:?absolute;????????left:?0;????????top:?0;????????border:?.4em?solid?$heart-color;????????border-radius:?inherit;????????width:?100%;????????height:?100%;????????content:?"";????????transform:?scale(0);????}????.marry:focus?&?{????????&::before?{????????????animation:?ripple-out?$duration?$easing;????????}????}}.like-heart?{????display:?block;????width:?.5em;????height:?.5em;????transform-origin:?center?80%;????path?{????????transition:?all?$duration?$easing;????????stroke:?$heart-color;????????stroke-width:?2;????????fill:?transparent;????????.marry:focus?&?{????????????fill:?$heart-color;????????}????}????.marry:focus?&?{????????animation:?heart-bounce?$duration?$easing;????}}.like-particle?{????position:?relative;????width:?1px;????height:?1px;}.like-particle-item?{????--Θ:?calc(var(--line-index)?/?var(--line-count)?*?1turn);????$color-list:?#f66?#66f?#f90?#09f?#9c3?#3c9;????position:?absolute;????left:?0;????top:?0;????border-radius:?.05em;????width:?.1em;????height:?.1em;????transform:?translate(-50%,?-50%)?rotate(var(--Θ))?translateY(0)?scaleY(0);????transition:?all?$duration?$easing;????@each?$v?in?$color-list?{????????$index:?index($color-list,?$v);????????&:nth-child(#{$index})?{????????????background-color:?$v;????????}????}????.marry:focus?&?{????????animation:?particle-out?calc(#{$duration}?*?1.2)?$easing?forwards;????}}.marry:focus?{????cursor:?normal;????pointer-events:?none;}@keyframes?depress?{????0%,????100%?{????????transform:?none;????}????50%?{????????transform:?translateY(5%)?scale(.9);????}}@keyframes?depress-shadow?{????0%,????100%?{????????transform:?none;????}????50%?{????????transform:?scale(.5);????}}@keyframes?heart-bounce?{????0%,????80%,????100%?{????????transform:?scale(1);????}????40%?{????????transform:?scale(.7);????}}@keyframes?particle-out?{????50%?{????????height:?.3em;????}????50%,????60%?{????????height:?.3em;????????transform:?translate(-50%,?-50%)?rotate(var(--Θ))?translateY(.8em)?scale(1);????}????60%?{????????height:?.2em;????}????100%?{????????transform:?translate(-50%,?-50%)?rotate(var(--Θ))?translateY(1em)?scale(0);????}}@keyframes?ripple-out?{????from?{????????transform:?scale(0);????}????to?{????????transform:?scale(5);????}}

七夕快樂

最后，祝天下有情人終成眷屬，也祝未脫單的兄弟們在未來會遇到那個對的她，也懇請單身姑娘們多給一些機會追你的男生，相信也能找到一個疼愛你一輩子的男生。

作者：JowayYoung

轉發鏈接：https://mp.weixin.qq.com/s/pGAVZYvm3YGqnsJuc41shw

總結

以上是生活随笔為你收集整理的before css 旋转_七夕，当然少不了纯CSS的点缀啦的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。