css实现钢铁文字数字三维摇摆动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现钢铁文字数字三维摇摆动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        @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;
        	.........完整代码请登录后点击上方下载按钮下载查看