"Металлическая" анимация текста - пример html js css

• HTML код


• CSS код
• Результат кода

<div class="container">



	<div class="thanks">

		<div>Thank You</div>

	</div>

	

	<div class="box">

		<div class="side"></div>

		<div class="side"></div>

		<div class="side"></div>

		<div class="side"></div>

		<div class="side"></div>

	</div>

	

	<div class="numbers">

	

		<div class="number">7</div>

		<div class="number">0</div>

		<div class="number">0</div>	

		

		<div class="shadow">

			<span>7</span>

			<span>0</span>

			<span>0</span>

		</div>

		

		<div class="hinges">

			<span>7<span></span></span>

			<span>0<span></span></span>

			<span>0<span></span></span>

		</div>

	

	</div>

	

	<div class="followers">

		<div>Followers</div>

	</div>

	

	<div class="overlay"></div>



</div>

@import url('https://fonts.googleapis.com/css2?family=Exo:wght@900&family=Open+Sans:wght@800&display=swap');





* {

	box-sizing: border-box;

	transform-style: preserve-3d;

}



body {

	margin: 0;

	width: 100vw;

	height: 100vh;

	overflow: hidden;

	background-color: #000000;

	font-family: 'Open Sans', Arial Helvetica serif;

}



.container {

	width: 100vw;

	height: 100vh;

	position: absolute;

	overflow: hidden;

	left: 0;

	top: 0;

	perspective: 100vmin;

	cursor: default;

}





/*** NUMBER ***/



.numbers {

	height: 40vh;

	display: flex;

	justify-content: center;

	align-items: center;

	font-size: 50vmin;

	transform-style: preserve-3d;

	font-family: 'Exo', sans-serif;

	line-height: 30vh;

}



.number {

	transform: rotateX(80deg);

	transform-origin: center bottom;

	transition: all 0.5s ease-in-out 0s;

	animation: wake-up 1s ease 0s 1, stand-up 2s ease 1s infinite, gradient 2s ease 0s infinite;

	animation-fill-mode: forwards;

	height: 100%;

	line-height: 34vmin;

	background: -webkit-linear-gradient(135deg, #262626,#eaeaea,#262626);

	-webkit-background-clip: text;

	-webkit-text-fill-color: transparent;

	background-size: 400% 400%;

	filter: drop-shadow(0px 2px 0px #333) drop-shadow(1px 0px 0px #444) drop-shadow(-1px 0px 0px #fff) drop-shadow(0px -1px 0px #fff);

	display: flex;

	align-content: flex-end;

	flex-wrap: wrap;

}



.number:nth-child(2) {

	animation-delay: 0.25s, 1.25s, 0.25s;

	animation-duration: 1s, 2s, 2s;

}

.number:nth-child(3) {

	animation-delay: 0.5s, 1.5s, 0.5s;

	animation-duration: 1s, 2s, 2s;

}



@keyframes gradient {

	  0% { background-position: 0% 50%; }

	 50% { background-position: 100% 50%; }

	100% { background-position: 0% 50%;	}

}



@keyframes wake-up {

	  0% { transform: rotateX(80deg); }

	100% { transform: rotateX(-15deg); }

}



@keyframes stand-up {

	0%, 100% { transform: rotateX(-15deg); }

	50% { transform: rotateX(15deg); }

}





/*** BOX ***/



.box {

	position: absolute;

	height: 40vh;

	top: 30vh;

	width: 100%;

}



.box .side {

	position: absolute;

	width: 100%;

	height: 40vh;

}



.box .side:nth-child(1) {

	background: linear-gradient(245deg,  #090c10, #687ba5);

	transform: rotateX(90deg) translateZ(110vh);

	transform-origin: center bottom;

	height: 150vh;

}



.box .side:nth-child(2) {

	background: linear-gradient(167deg,  #0e1d30, #090e13 60%, #000000);

	transform: rotateX(-90deg);

	transform-origin: center top;

	height: 150vh;

}



.box .side:nth-child(3) {

	background: linear-gradient(270deg,  #000000, #4e6494);

	transform: rotateY(90deg);

	transform-origin: left center;

	width: 150vh !important;

}



.box .side:nth-child(4) {

	background: linear-gradient(-45deg, #243452, #090e13 60%, #000000);

	transform: rotateY(-90deg);

	transform-origin: right center;

	width: 150vh;

	right: 0;

}





/*** SHADOW ***/



.shadow {

	position: absolute;

	transform: rotateX(80deg) translateY(2vmin) translateZ(-0.1vmin);

	transform-origin: center bottom;

	color: #000;

	opacity: 0.5;

	text-shadow: 0 0 2px #fff;

	text-align: center;

	height: 100%;

	display: flex;

	justify-content: center;

	align-items: center;

}



.shadow span {

	transform: scaleY(1) skewX(5deg);

	transform-origin: center bottom;

	animation: shadow-move 2s ease 0s infinite;

	text-shadow: 0 1vmin 1vmin #000;

	opacity: 0.75;

	height: 100%;

	padding-top: 5vh;

	filter: blur(10px);

}



.shadow span + span {

	animation-delay: 0.25s;

}



.shadow span + span + span {

   animation-delay: 0.5s;

}



@keyframes shadow-move {

	50% { transform: scaleY(1.5) skewX(-15deg); }

}





/*** HINGES ***/



.hinges {

	display: flex;

	justify-content: center;

	align-items: center;

	position: absolute;

	width: 100%;

	transform: translateZ(0.5vmin) !important;

	overflow: hidden;

	height: 4% !important;

	top: 39.25vh;

}



.hinges span {

  height: 100%;

	line-height: 200vh;

}



.hinges span > span {

	content: "";

	width: 38%;

	height: 100%;

	position: absolute;

	background: linear-gradient(90deg, transparent 0 35%, #00000036 37% 70%, #fff0 0 100%), repeating-linear-gradient(90deg, #fff0 0% 33%, #333 34% 36%), linear-gradient(180deg, #7d7d7d 0%, #fff 30%, #4a4a4a 70%);

	bottom: -2%;

	left: 19%;

	border-radius: 0.25vmin;

}



.hinges span + span > span {

  left: 30%;

}



.hinges span + span + span > span {

  left: 31%;

}



.hinges span > span:before, .hinges span > span:after {

	content: "";

	width: 10%;

	height: 100%;

	position: absolute;

	background: linear-gradient(90deg, transparent 0 35%, #00000036 37% 70%, #fff0 0 100%), repeating-linear-gradient(90deg, #fff0 0% 33%, #333 34% 36%), linear-gradient(180deg, #7d7d7d 0%, #fff 30%, #4a4a4a 70%);

	bottom: -2%;

	left: 100%;

	border-radius: 100%;

	border-right: 1px solid #000;

}



.hinges span > span:after {

  left: -10%;

	transform: rotate(180deg) rotateX(180deg);

}



.hinges span + span > span:before {

  left: 100%;

}





/*** THANKS / FOLLOWERS ***/



.thanks {

	height: 30vh;

	line-height: 30vh;

	background: linear-gradient(215deg, #061525, #3c4d75);

}



.followers {

	height: 30vh;

	line-height: 30vh;

	z-index: -1;

	position: relative;

	height: 30vh;

	line-height: 30vh;

	background: linear-gradient(325deg, #061525, #3c4d75);

}



.thanks div , .followers div {

	font-size: 15vmin;

	margin: 0 auto;

	width: 100%;

	height: 100%;

	text-align: center;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	mix-blend-mode: screen;

	background: -webkit-linear-gradient( 135deg, #a5a5a5 45%, #bef8ff 49%, #fff 50%, #bef8ff 51% ,#929292 55%);

	-webkit-background-clip: text;

	-webkit-text-fill-color: transparent;

	filter: drop-shadow(0px 2px 0px #333) drop-shadow(1px 0px 0px #444) drop-shadow(-1px 0px 0px #fff) drop-shadow(0px -1px 0px #fff);

	background-size: 105% 100%;

	text-shadow: 0 0 0.2vmin #fff8;

	background-size: 300% 300%;

	animation: gradient 4s ease 0s infinite;

}



.followers div {

	animation-delay: 0.75s;

}



.overlay {

	position: absolute;

	bottom: 0;

	width: 100%;

	height: 30vh;

}





/*** HOVER ***/



.number:hover, .number:hover ~ .shadow span {

    animation-play-state: paused, paused, paused;

}





/*** PORTRAIT ***/



@media only screen and (orientation: portrait) {

	.shadow span {

		padding-top: 15vh;

	}

}