Како створити срце које удара чистим ЦСС-ом за своју заљубљену

Сваке године 14. фебруара многи људи размењују картице, бомбоне, поклоне или цвеће са својим посебним „валентином“. Дан романтике који зовемо Дан заљубљених назван је по хришћанском мученику и потиче из 5. века, али потиче из римског празника Луперцалиа.

Ок, засад добро. Али шта програмер може учинити за своје Валентиново?

Мој одговор је: користите ЦСС и будите креативни!

Заиста волим ЦСС. То није заиста софистицирани језик (већину времена се чак ни не сматра програмским језиком). Али уз мало геометрије, математике и неких основних ЦСС правила, можете свој прегледач претворити у платно своје креативности!

Па кренимо. Како бисте створили срце чистом геометријом?

Требају вам само квадрат и два круга. Јел тако?

А то можемо нацртати једним елементом, захваљујући ::afterи ::beforeпсеудо елементима. Говорећи о псеудо елементима, ::afterпсеудо елемент вам омогућава уметање садржаја на страницу из ЦСС-а (без потребе да буде у ХТМЛ-у). ::beforeје потпуно исти, само што умеће contentпре него било који други садржај у ХТМЛ уместо после.

За оба псеудо елемента, крајњи резултат заправо није у ДОМ-у, али се на страници појављује као да би био.

Па креирајмо своје срце.

.heart { background-color: red; display: inline-block; height: 50px; margin: 0 10px; position: relative; top: 0; transform: rotate(-45deg); position: absolute; left: 45%; top: 45%; width: 50px; } .heart:before, .heart:after { content: ""; background-color: red; border-radius: 50%; height: 50px; position: absolute; width: 50px; } .heart:before { top: -25px; left: 0; } .heart:after { left: 25px; top: 0; }

Можете лако приметити да квадрат дефинишемо и његово позиционирање користећи главну класу 'срце' и два круга са ::beforeи ::afterпсеудо елементима. Кружнице су заправо само још 2 квадрата којима је радијус границе смањен на половину.

Али шта је срце без куцања?

Створимо пулс. Овде ћемо користити правило @кеифрамес. ЦСС-правило @кеифрамес се користи за дефинисање понашања једног циклуса ЦСС анимације.

Када користимо правило кључних оквира, временски период можемо поделити на мање делове и створити трансформацију / анимацију тако што ћемо га поделити у кораке (сваки корак одговара проценту завршетка временског периода).

Па креирајмо откуцаје срца. Наша анимација откуцаја срца састоји се од 3 корака:

@keyframes heartbeat { 0% { transform: scale( 1 ); } 20% { transform: scale( 1.25 ) translateX(5%) translateY(5%); } 40% { transform: scale( 1.5 ) translateX(9%) translateY(10%); } }

1. У 0% временског периода почињемо без трансформације.
2. У 20% временског периода ми обликујемо свој облик на 125% од његове почетне величине.
3. У 40% временског периода ми обликујемо свој облик на 150% од његове почетне величине.

Преосталих 60% временског периода остављамо времену да се наше срце врати у почетно стање.

Коначно, анимацију морамо доделити свом срцу.

.heart { animation: heartbeat 1s infinite; // our heart has infinite heartbeat :) ... }

То је то!

Имамо куцајуће срце које ће куцати заувек.

Или можда док траје ваша љубав ...

Слободно погледајте повезани Цодепен:

Желим вам диван дан заљубљених!