有时候我们在页面上显示的文字有些单调，可以使用ps制作出炫酷的文字效果，今天我们不使用ps而是使用css实现一个3D计数器的动画效果。
<html>
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png"
href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon"
href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
<link rel="mask-icon" type="image/x-icon"
href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
color="#111">
<title>css实现3D计数器动画效果www.woaidaogu.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
html,
body {
width: 100%;
height: 100%;
background-color: #000;
overflow: hidden;
}
.g-number-container {
position: relative;
margin-top: 10vh;
text-align: center;
-webkit-animation: rotateReverse 10s infinite linear;
animation: rotateReverse 10s infinite linear;
z-index: 999;
}
.g-number-rotate {
transform: rotateX(10deg) rotateZ(0);
-webkit-animation: rotate 10s infinite linear;
animation: rotate 10s infinite linear;
}
.preserve {
transform-style: preserve-3d;
perspective: 1000px;
}
.g-number {
position: relative;
width: 3vw;
height: 12vw;
display: inline-block;
margin: 3vw 3vw 0 0;
}
.g-number .g-line {
position: absolute;
top: 0;
left: 0;
width: 3vw;
height: 2px;
background: #181919;
}
.g-number .g-line:nth-child(1) {
transform: translateY(-0.2vw);
}
.g-number .g-line:nth-child(2) {
top: 3.2vw;
}
.g-number .g-line:nth-child(3) {
transform: rotate(180deg) translateY(-0.2vw);
top: 6.4vw;
}
.g-number .g-line:nth-child(4) {
transform: rotate(90deg) translateY(0.2vw);
transform-origin: 0 center;
}
.g-number .g-line:nth-child(5) {
transform: rotate(-90deg) translateY(0.2vw);
transform-origin: 100% center;
}
.g-number .g-line:nth-child(6) {
top: 3.4vw;
transform: rotate(90deg) translateY(0.2vw);
transform-origin: 0 center;
}
.g-number .g-line:nth-child(7) {
top: 3.4vw;
transform: rotate(-90deg) translateY(0.2vw);
transform-origin: 100% center;
}
.g-number .g-line::before,
.g-number .g-line::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
background-color: #34eabc;
box-shadow: 0 0 1vw #0BFDFD, inset 0 0 0.125vmin #0BFDFD;
}
.g-number .g-line::before {
left: 0;
right: 50%;
transition: all 0.5s ease-in;
}
.g-number .g-line::after {
left: 50%;
right: 0;
transition: all 0.5s ease-out;
}
.g-number .translate::before,
.g-number .translate::after {
transform: translateZ(50px);
}
.g-comma {
position: relative;
top: -5.4vw;
display: inline-block;
width: 1vw;
height: 1vw;
background: #181919;
margin: 3vw 3vw 0 -0.8vw;
}
.g-comma::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #34eabc;
transform: translateZ(50px);
}
.g-comma::after {
content: "";
position: absolute;
bottom: -0.8vw;
right: 0.3vw;
border: 0.2vw solid transparent;
border-top: 0.9vw solid #34eabc;
transform: translateZ(50px) rotate(40deg);
}
.g-number[data-digit="1"] .g-line:nth-child(1)::before,
.g-number[data-digit="1"] .g-line:nth-child(1)::after,
.g-number[data-digit="1"] .g-line:nth-child(2)::before,
.g-number[data-digit="1"] .g-line:nth-child(2)::after,
.g-number[data-digit="1"] .g-line:nth-child(3)::before,
.g-number[data-digit="1"] .g-line:nth-child(3)::after,
.g-number[data-digit="1"] .g-line:nth-child(4)::before,
.g-number[data-digit="1"] .g-line:nth-child(4)::after,
.g-number[data-digit="1"] .g-line:nth-child(6)::before,
.g-number[data-digit="1"] .g-line:nth-child(6)::after,
.g-number[data-digit="2"] .g-line:nth-child(4)::before,
.g-number[data-digit="2"] .g-line:nth-child(4)::after,
.g-number[data-digit="2"] .g-line:nth-child(7)::before,
.g-number[data-digit="2"] .g-line:nth-child(7)::after,
.g-number[data-digit="3"] .g-line:nth-child(4)::before,
.g-number[data-digit="3"] .g-line:nth-child(4)::after,
.g-number[data-digit="3"] .g-line:nth-child(6)::before,
.g-number[data-digit="3"] .g-line:nth-child(6)::after,
.g-number[data-digit="4"] .g-line:nth-child(1)::before,
.g-number[data-digit="4"] .g-line:nth-child(1)::after,
.g-number[data-digit="4"] .g-line:nth-child(3)::before,
.g-number[data-digit="4"] .g-line:nth-child(3)::after,
.g-number[data-digit="4"] .g-line:nth-child(6)::before,
.g-number[data-digit="4"] .g-line:nth-child(6)::after,
.g-number[data-digit="5"] .g-line:nth-child(5)::before,
.g-number[data-digit="5"] .g-line:nth-child(5)::after,
.g-number[data-digit="5"] .g-line:nth-child(6)::before,
.g-number[data-digit="5"] .g-line:nth-child(6)::after,
.g-number[data-digit="6"] .g-line:nth-child(5)::before,
.g-number[data-digit="6"] .g-line:nth-child(5)::after,
.g-number[data-digit="7"] .g-line:nth-child(2)::before,
.g-number[data-digit="7"] .g-line:nth-child(2)::after,
.g-number[data-digit="7"] .g-line:nth-child(3)::before,
.g-number[data-digit="7"] .g-line:nth-child(3)::after,
.g-number[data-digit="7"] .g-line:nth-child(4)::before,
.g-number[data-digit="7"] .g-line:nth-child(4)::after,
.g-number[data-digit="7"] .g-line:nth-child(6)::before,
.g-number[data-digit="7"] .g-line:nth-child(6)::after,
.g-number[data-digit="9"] .g-line:nth-child(6)::before,
.g-number[data-digit="9"] .g-line:nth-child(6)::after,
.g-number[data-digit="0"] .g-line:nth-child(2)::before,
.g-number[data-digit="0"] .g-line:nth-child(2)::after {
transform: translateZ(25px);
background: #3c4444;
box-shadow: 0 0 1vw #425454;
}
@-webkit-keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
50% {
transform: rotateX(10deg) rotateY(20deg) rotateZ(180deg);
}
100% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);
}
}
@keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
50% {
transform: rotateX(10deg) rotateY(20deg) rotateZ(180deg);
}
100% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);
}
}
@-webkit-keyframes rotateReverse {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}
@keyframes rotateReverse {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}
</style>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<div class="g-number-container vision preserve">
<div class="g-number-rotate preserve">
<div class="g-number preserve" data-digit="2">
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
</div>
<div class="g-number preserve" data-digit="1">
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
</div>
<div class="g-number preserve" data-digit="1">
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
</div>
<div class="g-comma preserve"></div>
<div class="g-number preserve" data-digit="7">
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
</div>
<div class="g-number preserve" data-digit="5">
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
</div>
<div class="g-number preserve" data-digit="7">
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
<div class="g-line preserve translate"></div>
</div>
</div>
</div>
<script
src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script id="rendered-js">
$(function () {
let numbers = $('.g-number');
setInterval(() => {
Array.prototype.slice.call(numbers).forEach(key => {
$(key).attr('data-digit', parseInt(Math.random() * 9));
});
}, 2000);
});
//# sourceURL=pen.js
</script>
<script
src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-4793b73c6332f7f14a9b6bba5d5e62748e9d1bd0b5c52d7af6376f3d1c625d7e.js"></script>
<div id="xl_chrome_ext_{4DB361DE-01F7-4376-B494-639E489D19ED}" style="display: none;">
<div></div>
<a id="xl_chrome_ext_download" href="javascript:;">下载视频</a>
<a id="xl_chrome_ext_close" href="javascript:;"></a>
</div>
</body>
</html>通过以上内容我们知道了css如何实现3D计数器动画效果？感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！
