Анимация текста средствами CSS
Качающийся текст средствами CSS
Код
<p>CALCSBOX.COM</p>
body,
html {
height: 100%;
}
body {
position: relative;
display: grid;
overflow: hidden;
grid-template: "body";
place-content: center;
place-items: center;
margin: 0;
background-color: #ffdd40;
}
body > *,
body::before {
grid-area: body;
}
body::before {
content: '';
width: 150vmax;
height: 150vmax;
opacity: 0.4;
background: repeating-conic-gradient(from 0deg, white 0deg 15deg, transparent 15deg 30deg);
-webkit-mask-image: radial-gradient(hsla(0 0% 0% / 1), hsla(0 0% 0% / 0) 50%);
animation: rotate 20s linear infinite;
}
body::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100vw;
height: calc(50vh + 1em);
background-color: inherit;
}
p {
--duration: 1200ms;
--text-shadow-color: hsl(0 0% 100%);
position: relative;
display: inline-block;
z-index: 1;
font-family: "Londrina Solid", sans-serif;
font-size: min(10vw, 10rem);
text-transform: uppercase;
text-shadow:
0.006em -0.006em 0 var(--text-shadow-color),
0.012em -0.012em 0 var(--text-shadow-color),
0.018em -0.018em 0 var(--text-shadow-color),
0.024em -0.024em 0 var(--text-shadow-color),
0.030em -0.030em 0 var(--text-shadow-color),
0.006em 0 0 currentcolor,
0.012em -0.006em 0 currentcolor,
0.018em -0.012em 0 currentcolor,
0.024em -0.018em 0 currentcolor,
0.030em -0.024em 0 currentcolor,
0.036em -0.030em 0 currentcolor,
0.036em -0.036em 0 currentcolor;
perspective: 3em;
transform-origin: bottom center;
transform-style: preserve-3d;
animation: movement var(--duration) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
p::after {
--transform: scaleY(-1) translateY(-30%) rotateX(-35deg) scaleY(1.2) translateY(calc(-30% + 2px));
--transform-alt: scaleY(-1) translateY(-30%) rotateX(-55deg) scaleY(1.4) translateY(calc(-30% + 2px));
content: 'CALCSBOX.COM' / '';
display: block;
position: absolute;
top: 0;
left: 0;
text-shadow: initial;
-webkit-mask-image:
linear-gradient(
to bottom,
hsla(0 0% 0% / 0) 0%,
hsla(0 0% 0% / 0.006) 13.7%,
hsla(0 0% 0% / 0.022) 25.4%,
hsla(0 0% 0% / 0.049) 35.3%,
hsla(0 0% 0% / 0.086) 43.6%,
hsla(0 0% 0% / 0.133) 50.6%,
hsla(0 0% 0% / 0.188) 56.5%,
hsla(0 0% 0% / 0.251) 61.6%,
hsla(0 0% 0% / 0.323) 66%,
hsla(0 0% 0% / 0.402) 70.1%,
hsla(0 0% 0% / 0.487) 74.1%,
hsla(0 0% 0% / 0.579) 78.1%,
hsla(0 0% 0% / 0.677) 82.5%,
hsla(0 0% 0% / 0.780) 87.4%,
hsla(0 0% 0% / 0.888) 93.2%,
hsla(0 0% 0% / 1) 100%
);
opacity: 0.8;
transform: var(--transform);
animation: shadow var(--duration) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes movement {
20% { transform: scaleY(1.4) skew(10deg) }
50% { transform: scaleY(1) skew(0) }
70% { transform: scaleY(1.4) skew(-10deg) }
}
@keyframes shadow {
20% { transform: var(--transform-alt) }
50% { transform: var(--transform) }
70% { transform: var(--transform-alt) }
}
@keyframes rotate {
to { transform: rotate(1turn) }
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation: none !important;
}
}
Результат
100 лет
Код
<main>
<span></span>
<span></span>
<span></span>
<span></span>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</main>
@import url("https://fonts.googleapis.com/css?family=Shrikhand&display=swap");
:root {
--color1: #E71D36;
--color2: #FF9F1C;
--dur: 6s;
--ease: cubic-bezier(0.645, 0.045, 0.355, 1);
--size: 75px;
}
@media (min-width: 700px) {
:root {
--size: 150px;
}
}
* {
box-sizing: border-box;
}
body {
display: grid;
place-content: center;
overflow: hidden;
height: 100vh;
-webkit-animation: color-swap var(--dur) var(--ease) alternate infinite;
animation: color-swap var(--dur) var(--ease) alternate infinite;
}
@-webkit-keyframes color-swap {
0%, 20% {
color: var(--color1);
background-color: var(--color2);
}
80%, 100% {
color: var(--color2);
background-color: var(--color1);
}
}
@keyframes color-swap {
0%, 20% {
color: var(--color1);
background-color: var(--color2);
}
80%, 100% {
color: var(--color2);
background-color: var(--color1);
}
}
main {
display: flex;
align-items: center;
font-size: var(--size);
font-family: "Shrikhand", sans-serif;
-webkit-animation: zoom var(--dur) var(--ease) infinite;
animation: zoom var(--dur) var(--ease) infinite;
}
main div {
display: flex;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
main div span {
-webkit-animation-name: stretch, date-opacity;
animation-name: stretch, date-opacity;
}
span {
position: relative;
display: flex;
width: var(--size);
height: var(--size);
text-align: center;
-webkit-animation: var(--dur) var(--ease) infinite;
animation: var(--dur) var(--ease) infinite;
-webkit-animation-name: stretch, numbers-opacity;
animation-name: stretch, numbers-opacity;
}
span:before {
content: "0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 ";
-webkit-animation: var(--dur) var(--ease) alternate infinite;
animation: var(--dur) var(--ease) alternate infinite;
}
span:nth-child(1):before {
-webkit-animation-name: increment-1;
animation-name: increment-1;
}
span:nth-child(2):before {
-webkit-animation-name: increment-2;
animation-name: increment-2;
}
span:nth-child(3):before {
-webkit-animation-name: increment-3;
animation-name: increment-3;
}
span:nth-child(4):before {
-webkit-animation-name: increment-4;
animation-name: increment-4;
}
@-webkit-keyframes increment-1 {
0%, 20% {
transform: translateY(calc(var(--size) * -11));
}
80%, 100% {
transform: translateY(calc(var(--size) * -22));
}
}
@keyframes increment-1 {
0%, 20% {
transform: translateY(calc(var(--size) * -11));
}
80%, 100% {
transform: translateY(calc(var(--size) * -22));
}
}
@-webkit-keyframes increment-2 {
0%, 20% {
transform: translateY(calc(var(--size) * -9));
}
80%, 100% {
transform: translateY(calc(var(--size) * -40));
}
}
@keyframes increment-2 {
0%, 20% {
transform: translateY(calc(var(--size) * -9));
}
80%, 100% {
transform: translateY(calc(var(--size) * -40));
}
}
@-webkit-keyframes increment-3 {
0%, 20% {
transform: translateY(calc(var(--size) * -12));
}
80%, 100% {
transform: translateY(calc(var(--size) * -32));
}
}
@keyframes increment-3 {
0%, 20% {
transform: translateY(calc(var(--size) * -12));
}
80%, 100% {
transform: translateY(calc(var(--size) * -32));
}
}
@-webkit-keyframes increment-4 {
0%, 20% {
transform: translateY(calc(var(--size) * -10));
}
80%, 100% {
transform: translateY(calc(var(--size) * -50));
}
}
@keyframes increment-4 {
0%, 20% {
transform: translateY(calc(var(--size) * -10));
}
80%, 100% {
transform: translateY(calc(var(--size) * -50));
}
}
@-webkit-keyframes numbers-opacity {
0%, 10% {
opacity: 0.125;
}
25%, 75% {
opacity: 1;
}
90%, 100% {
opacity: 0.125;
}
}
@keyframes numbers-opacity {
0%, 10% {
opacity: 0.125;
}
25%, 75% {
opacity: 1;
}
90%, 100% {
opacity: 0.125;
}
}
@-webkit-keyframes date-opacity {
0%, 15% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
85%, 100% {
opacity: 1;
}
}
@keyframes date-opacity {
0%, 15% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
85%, 100% {
opacity: 1;
}
}
@-webkit-keyframes stretch {
0%, 20% {
transform: scaleY(1.001);
}
50% {
transform: scaleY(2);
}
80%, 100% {
transform: scaleY(1.001);
}
}
@keyframes stretch {
0%, 20% {
transform: scaleY(1.001);
}
50% {
transform: scaleY(2);
}
80%, 100% {
transform: scaleY(1.001);
}
}
@-webkit-keyframes zoom {
0%, 15% {
transform: scale(1.001);
}
25%, 75% {
transform: scale(1.2);
}
85%, 100% {
transform: scale(1.001);
}
}
@keyframes zoom {
0%, 15% {
transform: scale(1.001);
}
25%, 75% {
transform: scale(1.2);
}
85%, 100% {
transform: scale(1.001);
}
}
Результат
Пульсирующий текст
Код
<div class="area">⚠ achtung ⚠</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
background: #111;
font-family: "Open Sans", Impact;
}
.area {
text-align: center;
font-size: 6.5em;
color: #fff;
letter-spacing: -7px;
font-weight: 700;
text-transform: uppercase;
animation: blur .75s ease-out infinite;
text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
}
@keyframes blur {
from {
text-shadow:0px 0px 10px #fff,
0px 0px 10px #fff,
0px 0px 25px #fff,
0px 0px 25px #fff,
0px 0px 25px #fff,
0px 0px 25px #fff,
0px 0px 25px #fff,
0px 0px 25px #fff,
0px 0px 50px #fff,
0px 0px 50px #fff,
0px 0px 50px #7B96B8,
0px 0px 150px #7B96B8,
0px 10px 100px #7B96B8,
0px 10px 100px #7B96B8,
0px 10px 100px #7B96B8,
0px 10px 100px #7B96B8,
0px -10px 100px #7B96B8,
0px -10px 100px #7B96B8;
}
}
Результат
Проявление текста
Код
<h1 class="reveal-text"> calcsbox.com </h1>
:root {
--delay: 0;
--duration: 800ms;
--iterations: 1;
}
/* •·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•· */
body{
background:black;
}
.reveal-text,
.reveal-text::after {
-webkit-animation-delay: var(--animation-delay, 2s);
animation-delay: var(--animation-delay, 2s);
-webkit-animation-iteration-count: var(--iterations, 1);
animation-iteration-count: var(--iterations, 1);
-webkit-animation-duration: var(--duration, 800ms);
animation-duration: var(--duration, 800ms);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}
.reveal-text {
--animation-delay: var(--delay, 0);
--animation-duration: var(--duration, 800ms);
--animation-iterations: var(--iterations, 1);
position: relative;
font-size: 10vw;
-webkit-animation-name: clip-text;
animation-name: clip-text;
color: #FFF;
white-space: nowrap;
cursor: default
}
.reveal-text::after {
content: "";
position: absolute;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f2f98b;
transform: scaleX(0);
transform-origin: 0 50%;
pointer-events: none;
-webkit-animation-name: text-revealer;
animation-name: text-revealer;
}
@-webkit-keyframes clip-text {
from {
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
}
to {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
}
@keyframes clip-text {
from {
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
}
to {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
}
@-webkit-keyframes text-revealer {
0%, 50% {
transform-origin: 0 50%;
}
60%, 100% {
transform-origin: 100% 50%;
}
60% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
@keyframes text-revealer {
0%, 50% {
transform-origin: 0 50%;
}
60%, 100% {
transform-origin: 100% 50%;
}
60% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
Результат
Тени от прожекторов
Код
<div class="css"> <span>C</span> <span>S</span> <span>S</span> </div>
@import url("https://fonts.googleapis.com/css2?family=Gluten:wght@700&display=swap");
html,
body {
height: 100%;
}
body {
--color-dark: 210 55% 8%;
--color-dark-static: 210 55% 25%;
--color-light: 200 60% 90%;
--font-size: min(20vw + 1rem, 12rem);
display: grid;
place-items: center;
overflow: hidden;
background-color: hsl(var(--color-dark));
font-size: var(--font-size);
font-family: "Gluten", sans-serif;
perspective: 40em;
}
.css {
--rotate: 70deg;
--transition: 400ms cubic-bezier(0.25, 1, 0.5, 1);
display: flex;
position: relative;
top: 0.25em;
color: hsl(var(--color-dark-accent));
user-select: none;
perspective: 2em;
transform: scale(0.9);
transform-style: preserve-3d;
transition: var(--transition);
transition-property: perspective, transform;
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>*</text></svg>")
16 0,
auto;
}
.css::before,
.css::after {
--s: calc(var(--font-size) * 2);
content: "";
position: absolute;
left: 50%;
width: var(--s);
height: calc(var(--s) / 2);
background-color: hsl(var(--color-light));
opacity: 0;
transform: translateZ(-1vmin) translateX(-50%) scale(0);
transition: var(--transition);
transition-property: opacity, transform;
pointer-events: none;
}
.css::before {
bottom: 50%;
border-top-left-radius: 360px;
border-top-right-radius: 360px;
transform-origin: bottom center;
}
.css::after {
--s: calc(var(--font-size) * 2);
top: 50%;
transform-origin: top center;
transform: translateX(-50%) rotateX(var(--rotate)) scale(0.001);
background: linear-gradient(
to bottom,
hsl(var(--color-light)) 0%,
hsla(var(--color-light) / 0.951) 6.3%,
hsla(var(--color-light) / 0.888) 12.1%,
hsla(var(--color-light) / 0.815) 17.6%,
hsla(var(--color-light) / 0.734) 22.8%,
hsla(var(--color-light) / 0.647) 27.9%,
hsla(var(--color-light) / 0.557) 33%,
hsla(var(--color-light) / 0.466) 38.3%,
hsla(var(--color-light) / 0.377) 43.8%,
hsla(var(--color-light) / 0.292) 49.7%,
hsla(var(--color-light) / 0.213) 56.1%,
hsla(var(--color-light) / 0.143) 63.1%,
hsla(var(--color-light) / 0.084) 70.9%,
hsla(var(--color-light) / 0.039) 79.5%,
hsla(var(--color-light) / 0.01) 89.2%,
hsla(var(--color-light) / 0) 100%
);
}
.css span {
--rotate-letter: 34deg;
display: flex;
flex-direction: column;
line-height: 0.475;
color: hsl(var(--color-dark-static));
perspective: 1em;
transition: var(--transition);
transition-property: color, transform;
transform-style: preserve-3d;
}
.css span::after {
display: block;
color: hsl(var(--color-dark));
transform-origin: top center;
transform: rotateX(var(--rotate)) scaleY(1.25);
pointer-events: none;
z-index: -1;
}
.css :first-child::after {
content: "c";
}
.css :not(:first-child)::after {
content: "s";
}
.css :first-child {
transform-origin: left center;
}
.css :last-child {
transform-origin: right center;
}
/* Hover */
.css:hover {
transform: scale(1.25);
}
.css:hover::before {
opacity: 1;
transform: translateZ(-1vmin) translateX(-50%) scale(1.05);
}
.css:hover::after {
opacity: 1;
transform: translateZ(-1vmin) translateX(-50%) rotateX(var(--rotate))
scale(1.05);
}
.css:hover span {
color: hsl(var(--color-dark));
transform: translateZ(6vmin);
}
.css:hover :first-child {
transform: translateX(20%) rotateY(calc(var(--rotate-letter) * -1));
}
.css:hover :last-child {
transform: translateX(-20%) rotateY(var(--rotate-letter));
}
Результат
Тень в стиле радуги
Код
<h1>CALCSBOX.COM</h1>
@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");
body {
--bg: #000000;
box-sizing: border-box;
// min-height: 100vh;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
background-color: var(--bg);
}
h1 {
--text: #ffffff;
--red: #d12229;
--orange: #f68a1e;
--yellow: #fde01a;
--green: #007940;
--blue: #24408e;
--purple: #732982;
--font: "Lobster";
color: var(--text);
font-size: 5rem;
font-family: var(--font);
font-weight: 900;
-webkit-font-kerning: normal;
font-kerning: normal;
text-shadow: 10px 10px 2px var(--red), 15px 15px 2px var(--orange), 20px 20px 2px var(--yellow), 25px 25px 2px var(--green), 30px 30px 2px var(--blue), 35px 35px 2px var(--purple);
}
Результат
Космический неон
Код
<div class="neon-effect"> <h1 class="neon-title" data-text="Kosmic">Kosmic</h1> <div class="neon-gradient"></div> <div class="neon-light"></div> </div>
:root {
--primary: #e32833;
--secondary: #ff0c87;
}
body {
box-sizing: border-box;
min-height: 100vh;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
background-color: black;
}
.neon-effect {
font-weight: 700;
font-size: 4rem;
font-family: Montserrat;
overflow: hidden;
}
.neon-title {
position: relative;
font-size: 5rem;
}
.neon-title::before, .neon-title::after {
content: attr(data-text);
color: white;
filter: blur(0.02em);
position: absolute;
top: 0;
left: 0;
}
.neon-title::after {
mix-blend-mode: difference;
}
.neon-gradient, .neon-light {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.neon-gradient {
background: linear-gradient(78deg, var(--primary), var(--secondary));
mix-blend-mode: multiply;
}
.neon-light {
-webkit-animation: light 5s infinite linear;
animation: light 5s infinite linear;
background: radial-gradient(circle, white, transparent 25%) 0 0/25% 25%, radial-gradient(circle, white, black 25%) 50% 50%/12.5% 12.5%;
left: -100%;
mix-blend-mode: color-dodge;
}
@-webkit-keyframes light {
100% {
transform: translate3d(50%, 50%, 0);
}
}
@keyframes light {
100% {
transform: translate3d(50%, 50%, 0);
}
}
Результат
Анимированная заливка текста текстом svg
Код
<svg viewBox="0 0 600 300">
<!-- Symbol-->
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="50%" dy=".35em">Interstellar</text>
</symbol>
<!-- Duplicate symbols-->
<use class="text" xlink:href="#s-text"></use>
<use class="text" xlink:href="#s-text"></use>
<use class="text" xlink:href="#s-text"></use>
<use class="text" xlink:href="#s-text"></use>
<use class="text" xlink:href="#s-text"></use>
</svg>
/* Main styles */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
.text {
fill: none;
stroke-width: 3;
stroke-linejoin: round;
stroke-dasharray: 70 330;
stroke-dashoffset: 0;
-webkit-animation: stroke 6s infinite linear;
animation: stroke 6s infinite linear;
}
.text:nth-child(5n+1) {
stroke: #F2385A;
-webkit-animation-delay: -1.2s;
animation-delay: -1.2s;
}
.text:nth-child(5n+2) {
stroke: #F5A503;
-webkit-animation-delay: -2.4s;
animation-delay: -2.4s;
}
.text:nth-child(5n+3) {
stroke: #E9F1DF;
-webkit-animation-delay: -3.6s;
animation-delay: -3.6s;
}
.text:nth-child(5n+4) {
stroke: #56D9CD;
-webkit-animation-delay: -4.8s;
animation-delay: -4.8s;
}
.text:nth-child(5n+5) {
stroke: #3AA1BF;
-webkit-animation-delay: -6s;
animation-delay: -6s;
}
@-webkit-keyframes stroke {
100% {
stroke-dashoffset: -400;
}
}
@keyframes stroke {
100% {
stroke-dashoffset: -400;
}
}
/* Other styles */
html, body {
height: 100%;
}
body {
background: #111;
background-size: 0.2em 100%;
font: 5em/1 Open Sans, Impact;
text-transform: uppercase;
margin: 0;
}
svg {
position: absolute;
width: 100%;
height: 100%;
}
Результат
Текстовая анимация
Код
<svg viewBox="0 0 960 300"> <symbol id="s-text"> <text text-anchor="middle" x="50%" y="80%">Montserrat</text> </symbol> <g class = "g-ants"> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> </g> </svg>
@import url(https://fonts.googleapis.com/css?family=Montserrat);
html,
body {
height: 100%;
font-weight: 800;
}
body {
background: #030321;
font-family: Arial;
}
svg {
display: block;
font: 10.5em "Montserrat";
width: 960px;
height: 300px;
margin: 0 auto;
}
.text-copy {
fill: none;
stroke: white;
stroke-dasharray: 6% 29%;
stroke-width: 5px;
stroke-dashoffset: 0%;
animation: stroke-offset 5.5s infinite linear;
}
.text-copy:nth-child(1) {
stroke: #4d163d;
animation-delay: -1;
}
.text-copy:nth-child(2) {
stroke: #840037;
animation-delay: -2s;
}
.text-copy:nth-child(3) {
stroke: #bd0034;
animation-delay: -3s;
}
.text-copy:nth-child(4) {
stroke: #bd0034;
animation-delay: -4s;
}
.text-copy:nth-child(5) {
stroke: #fdb731;
animation-delay: -5s;
}
@keyframes stroke-offset {
100% {
stroke-dashoffset: -35%;
}
}
Результат