分享實現地鐵車輛側面圖

簡介

通過偽類和關鍵幀動畫實現地鐵車輛側面圖
在線演示

偽元素和關鍵幀動畫
實現代碼

<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta content="always" name="referrer"><meta name="theme-color" content="#ffffff">
<meta name="description" content="">
<title>偽元素和關鍵幀動畫</title>
<style>
.loading{--ballSize: 10px;--containerSize: 150px;--duration: 2s;--barderWidth: 3px;width: var(--containerSize);height: var(--containerSize);border: 1px solid #12332100;margin: 50px auto;position: relative;border-radius:50%;
}
.loading:before{content: '';position: absolute;left: calc( 50% - var(--ballSize) / 2 - var(--barderWidth) );top: calc( 40% - var(--ballSize) / 2 - var(--barderWidth)  );width: var(--ballSize);height: var(--ballSize);border-radius: 50%;background: transparent;border-top: 0 solid gray;border-left: var(--barderWidth) solid gray;border-right:  var(--barderWidth) solid gray;border-bottom:  0 solid gray;animation: run 3s ease-in infinite;
}
.loading:after{content: '';position: absolute;left: calc( 50% - var(--ballSize) / 2 - var(--barderWidth) / 10 );top: calc( 50% - var(--ballSize) / 2 - 4*var(--barderWidth) );width: calc( var(--ballSize) / 2 );height: calc( var(--ballSize) / 2 );border-radius: 50%;background: transparent;border-top: 0 solid gray;border-left: var(--barderWidth) solid gray;border-right: var(--barderWidth) solid gray;border-bottom: 0 solid gray;animation: run 2s ease-out infinite;
}
@keyframes run {0%{border-color: #00ff0022;}25%{border-color: #00ff0044;}50%{border-color: #00ff0088;}75%{border-color: #00ff00aa;}100%{border-color: #00ff00;}
}
.dot{position: absolute;left: 50%;top: 0;width: var(--ballSize);height: var(--ballSize);margin-left: calc( var(--ballSize) / (-2) );margin-top: calc( var(--ballSize) / (-2) );background: #65432123;transform-origin: center calc( var(--containerSize) / 2 +  var(--ballSize) / 2 );perspective: 70px;transform-style: preserve-3d;
}.dot:nth-child(1){transform: rotate(0deg);
}
.dot:nth-child(1)::before,.dot:nth-child(1)::after{animation-delay: calc( var(--duration) / 36 * ( 1 - 1)*6*-1 );
}.dot:nth-child(2){transform: rotate(10deg);
}
.dot:nth-child(2)::before,.dot:nth-child(2)::after{animation-delay: calc( var(--duration) / 36 * ( 2 - 1 )*6*-1 );
}
.dot:nth-child(3){transform: rotate(20deg);
}
.dot:nth-child(3)::before,.dot:nth-child(3)::after{animation-delay: calc( var(--duration) / 36 * ( 3 - 1 )*6*-1 );
}
.dot:nth-child(4){transform: rotate(30deg);
}
.dot:nth-child(4)::before,.dot:nth-child(4)::after{animation-delay: calc( var(--duration) / 36 * ( 4 - 1 )*6*-1 );
}
.dot:nth-child(5){transform: rotate(40deg);
}
.dot:nth-child(5)::before,.dot:nth-child(5)::after{animation-delay: calc( var(--duration) / 36 * ( 5 - 1 )*6*-1 );
}
.dot:nth-child(6){transform: rotate(50deg);
}
.dot:nth-child(6)::before,.dot:nth-child(6)::after{animation-delay: calc( var(--duration) / 36 * ( 6 - 1 )*6*-1 );
}
.dot:nth-child(7){transform: rotate(60deg);
}
.dot:nth-child(7)::before,.dot:nth-child(7)::after{animation-delay: calc( var(--duration) / 36 * ( 7 - 1 )*6*-1 );
}
.dot:nth-child(8){transform: rotate(70deg);
}
.dot:nth-child(8)::before,.dot:nth-child(8)::after{animation-delay: calc( var(--duration) / 36 * ( 8 - 1 )*6*-1 );
}
.dot:nth-child(9){transform: rotate(80deg);
}
.dot:nth-child(9)::before,.dot:nth-child(9)::after{animation-delay: calc( var(--duration) / 36 * ( 9 - 1 )*6*-1 );
}
.dot:nth-child(10){transform: rotate(90deg);
}
.dot:nth-child(10)::before,.dot:nth-child(10)::after{animation-delay: calc( var(--duration) / 36 * ( 10 - 1 )*6*-1 );
}
.dot:nth-child(11){transform: rotate(100deg);
}
.dot:nth-child(11)::before,.dot:nth-child(11)::after{animation-delay: calc( var(--duration) / 36 * ( 11 - 1 )*6*-1 );
}
.dot:nth-child(12){transform: rotate(110deg);
}
.dot:nth-child(12)::before,.dot:nth-child(12)::after{animation-delay: calc( var(--duration) / 36 * ( 12 - 1 )*6*-1 );
}
.dot:nth-child(13){transform: rotate(120deg);
}
.dot:nth-child(13)::before,.dot:nth-child(13)::after{animation-delay: calc( var(--duration) / 36 * ( 13 - 1 )*6*-1 );
}
.dot:nth-child(14){transform: rotate(130deg);
}
.dot:nth-child(14)::before,.dot:nth-child(14)::after{animation-delay: calc( var(--duration) / 36 * ( 14 - 1 )*6*-1 );
}
.dot:nth-child(15){transform: rotate(140deg);
}
.dot:nth-child(15)::before,.dot:nth-child(15)::after{animation-delay: calc( var(--duration) / 36 * ( 15 - 1 )*6*-1 );
}
.dot:nth-child(16){transform: rotate(150deg);
}
.dot:nth-child(16)::before,.dot:nth-child(16)::after{animation-delay: calc( var(--duration) / 36 * ( 16 - 1 )*6*-1 );
}
.dot:nth-child(17){transform: rotate(160deg);
}
.dot:nth-child(17)::before,.dot:nth-child(17)::after{animation-delay: calc( var(--duration) / 36 * ( 17 - 1 )*6*-1 );
}
.dot:nth-child(18){transform: rotate(170deg);
}
.dot:nth-child(18)::before,.dot:nth-child(18)::after{animation-delay: calc( var(--duration) / 36 * ( 18 - 1 )*6*-1 );
}
.dot:nth-child(19){transform: rotate(180deg);
}
.dot:nth-child(19)::before,.dot:nth-child(19)::after{animation-delay: calc( var(--duration) / 36 * ( 19 - 1 )*6*-1 );
}
.dot:nth-child(20){transform: rotate(190deg);
}
.dot:nth-child(20)::before,.dot:nth-child(20)::after{animation-delay: calc( var(--duration) / 36 * ( 20 - 1 )*6*-1 );
}
.dot:nth-child(21){transform: rotate(200deg);
}
.dot:nth-child(21)::before,.dot:nth-child(21)::after{animation-delay: calc( var(--duration) / 36 * ( 21 - 1 )*6*-1 );
}
.dot:nth-child(22){transform: rotate(210deg);
}
.dot:nth-child(22)::before,.dot:nth-child(22)::after{animation-delay: calc( var(--duration) / 36 * ( 22 - 1 )*6*-1 );
}
.dot:nth-child(23){transform: rotate(220deg);
}
.dot:nth-child(23)::before,.dot:nth-child(23)::after{animation-delay: calc( var(--duration) / 36 * ( 23 - 1 )*6*-1 );
}
.dot:nth-child(24){transform: rotate(230deg);
}
.dot:nth-child(24)::before,.dot:nth-child(24)::after{animation-delay: calc( var(--duration) / 36 * ( 24 - 1 )*6*-1 );
}
.dot:nth-child(25){transform: rotate(240deg);
}
.dot:nth-child(25)::before,.dot:nth-child(25)::after{animation-delay: calc( var(--duration) / 36 * ( 25 - 1 )*6*-1 );
}
.dot:nth-child(26){transform: rotate(250deg);
}
.dot:nth-child(26)::before,.dot:nth-child(26)::after{animation-delay: calc( var(--duration) / 36 * ( 26 - 1 )*6*-1 );
}
.dot:nth-child(27){transform: rotate(260deg);
}
.dot:nth-child(27)::before,.dot:nth-child(27)::after{animation-delay: calc( var(--duration) / 36 * ( 27 - 1 )*6*-1 );
}
.dot:nth-child(28){transform: rotate(270deg);
}
.dot:nth-child(28)::before,.dot:nth-child(28)::after{animation-delay: calc( var(--duration) / 36 * ( 28 - 1 )*6*-1 );
}
.dot:nth-child(29){transform: rotate(280deg);
}
.dot:nth-child(29)::before,.dot:nth-child(29)::after{animation-delay: calc( var(--duration) / 36 * ( 29 - 1 )*6*-1 );
}
.dot:nth-child(30){transform: rotate(290deg);
}
.dot:nth-child(30)::before,.dot:nth-child(30)::after{animation-delay: calc( var(--duration) / 36 * ( 30 - 1 )*6*-1 );
}
.dot:nth-child(31){transform: rotate(300deg);
}
.dot:nth-child(31)::before,.dot:nth-child(31)::after{animation-delay: calc( var(--duration) / 36 * ( 31 - 1 )*6*-1 );
}
.dot:nth-child(32){transform: rotate(310deg);
}
.dot:nth-child(32)::before,.dot:nth-child(32)::after{animation-delay: calc( var(--duration) / 36 * ( 32 - 1 )*6*-1 );
}
.dot:nth-child(33){transform: rotate(320deg);
}
.dot:nth-child(33)::before,.dot:nth-child(33)::after{animation-delay: calc( var(--duration) / 36 * ( 33 - 1 )*6*-1 );
}
.dot:nth-child(34){transform: rotate(330deg);
}
.dot:nth-child(34)::before,.dot:nth-child(34)::after{animation-delay: calc( var(--duration) / 36 * ( 34 - 1 )*6*-1 );
}
.dot:nth-child(35){transform: rotate(340deg);
}
.dot:nth-child(35)::before,.dot:nth-child(35)::after{animation-delay: calc( var(--duration) / 36 * ( 35 - 1 )*6*-1 );
}
.dot:nth-child(36){transform: rotate(350deg);
}
.dot:nth-child(36)::before,.dot:nth-child(36)::after{animation-delay: calc( var(--duration) / 36 * ( 36 - 1 )*6*-1 );
}.dot::before,.dot::after{content: '';position: absolute;left: 0;top: 0;width: var(--ballSize);height: var(--ballSize);border-radius: 50%;
}
.dot::before{background: #123456;top: -100%;animation: rotate-black var(--duration) infinite;}
@keyframes rotate-black{0%{animation-timing-function: ease-in;}25%{transform: translate3d(0,100%,10px);animation-timing-function: ease-out;}50%{transform: translate3d(0,200%,0);animation-timing-function: ease-in;}75%{transform: translate3d(0,100%,-10px);animation-timing-function: ease-out;}}.dot::after{background: red;top: 100%;animation: rotate-red var(--duration) infinite;
}
@keyframes rotate-red{0%{animation-timing-function: ease-in;}25%{transform: translate3d(0,-100%,-10px);animation-timing-function: ease-out;}50%{transform: translate3d(0,-200%,0);animation-timing-function: ease-in;}75%{transform: translate3d(0,-100%,10px);animation-timing-function: ease-out;}}.train {--speed: 1s;display: black;align-items: center;box-sizing: border-box;flex: 1;height: 100px;padding: 0 60px;padding-top: 20px;flex-wrap: wrap;
}
.content_item {display: flex;align-items: center;justify-content: space-between;flex: 1;padding: 0 8px;
}
.carriageUp {background: #eaeaeb;box-shadow: 0px 20px 20px 5px #01071788;height: 100%;display: flex;align-items: center;justify-content: space-around;color: #a2a7b5;font-size: 14px;font-weight: bold;border-top-left-radius: 5px;border-top-right-radius: 5px;width: calc( ( 100% - (8 - 1) * 8px) / 8);cursor: pointer;
}
.carriageUp::before{content: "";position: relative;z-index: 1;width: 40px;height: 20px;border-radius: 2px;background-color: #dbdbe6;box-shadow: 1px -1px 1px 1px #0000004d;top: 0px;left: 0px;
}
.carriageUp::after{content: "";position: relative;z-index: 1;width: 40px;height: 20px;border-radius: 2px;background-color: #dbdbe6;box-shadow: 1px -1px 1px 1px #0000004d;top: 0px;right: 0px;
}
.carriageUp:first-child{border-top-left-radius: 80px;
}
.carriageUp:last-child{border-top-right-radius: 80px;
}
.carriageUp:first-child::before{left: -5px;border-top-left-radius: 20px;border-bottom-left-radius: 5px;width: 40px;
}
.carriageUp.openmc1:first-child::before{background: #4ebe11;
}
.carriageUp:last-child::after{right: -5px;border-top-right-radius: 20px;border-bottom-right-radius: 5px;width: 40px;
}
.carriageUp.openmc2:last-child::after{background: #4ebe11;
}
.carriageDown {background: #eaeaeb;height: 100%;display: flex;align-items: center;justify-content: center;color: #a2a7b5;font-size: 20px;font-weight: bold;border-radius: 1px;border-top: 10px solid #dbdbe6;width: calc( ( 100% - (8 - 1) * 8px) / 8);
}
.carriageDown::before{content: "";position: relative;z-index: 1;width: 40px;height: 40px;border-radius: 20px;background-color: #dbdbe6;box-shadow: 0px -1px 1px 1px #0000004f;top: 0px;left: -20px;animation: runRight calc( var(--speed)/24 ) linear infinite;
}
.carriageDown::after{content: "";position: relative;z-index: 1;width: 40px;height: 40px;border-radius: 20px;background-color: #dbdbe6;box-shadow: 0px -1px 1px 1px #0000004f;top: 0px;right: -20px;animation: runRight calc( var(--speed)/24 ) linear infinite;
}
.carriageDown:first-child{border-bottom-left-radius: 80px;
}
.carriageDown:last-child{border-bottom-right-radius: 80px;
}.content_item:first-child{height: 80%;
}
.content_item:last-child{height: 20%;
}@keyframes runRight{0%{transform: rotate(0deg) scale(0.96);}25%{transform: rotate(-90deg) scale(0.98);}50%{transform: rotate(-180deg) scale(1);}75%{transform: rotate(-270deg) scale(0.98);}100%{transform: rotate(-360deg) scale(0.96);}
}@keyframes runLeft{0%{transform: rotate(0deg) scale(0.96);}25%{transform: rotate(90deg) scale(0.98);}50%{transform: rotate(180deg) scale(1);}75%{transform: rotate(270deg) scale(0.98);}100%{transform: rotate(360deg) scale(0.96);}
}</style>
</head><body><div class="loading"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>
</div><div class="train"><div class="content_item"><div class="carriageUp openmc1"></div><div class="carriageUp"></div><div class="carriageUp"></div><div class="carriageUp"></div><div class="carriageUp"></div><div class="carriageUp"></div><div class="carriageUp"></div><div class="carriageUp"></div></div><div class="content_item"><div class="carriageDown"></div><div class="carriageDown"></div><div class="carriageDown"></div><div class="carriageDown"></div><div class="carriageDown"></div><div class="carriageDown"></div><div class="carriageDown"></div><div class="carriageDown"></div></div>
</div><div style="width: 100%;height: 30px;background:#123456;"></div><script></script></body></html>