feat: добавить лоадеры Dots, Rotating Text и DNA Strain
— Добавлен dots-pulsating (минимализм на CSS-переменных) — Добавлен rotating-text (эффект переворота букв с использованием JS) — Добавлен dna-strain (научная анимация цепочки ДНК) — Обновлен общий README.md: коллекция расширена до 8 элементов
This commit is contained in:
Executable
+59
@@ -0,0 +1,59 @@
|
||||
@import url(https://fonts.googleapis.com/css?family=Lato:600);
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.rotating-text {
|
||||
font-family: Lato, sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 36px;
|
||||
color: white;
|
||||
transform: translateX(-80px);
|
||||
}
|
||||
.rotating-text p {
|
||||
display: inline-flex;
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
.rotating-text p .word {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
opacity: 0;
|
||||
}
|
||||
.rotating-text p .word .letter {
|
||||
transform-origin: center center 25px;
|
||||
}
|
||||
.rotating-text p .word .letter.out {
|
||||
transform: rotateX(90deg);
|
||||
transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);
|
||||
}
|
||||
.rotating-text p .word .letter.in {
|
||||
transition: 0.38s ease;
|
||||
}
|
||||
.rotating-text p .word .letter.behind {
|
||||
transform: rotateX(-90deg);
|
||||
}
|
||||
|
||||
.alizarin {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.wisteria {
|
||||
color: #8e44ad;
|
||||
}
|
||||
|
||||
.peter-river {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.emerald {
|
||||
color: #2ecc71;
|
||||
}
|
||||
|
||||
.sun-flower {
|
||||
color: #f1c40f;
|
||||
}
|
||||
Reference in New Issue
Block a user