自动倾卸卡车 | 翻斗车加载动画

Dump Truck，卡车倒土动画

css, truck, car

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2596
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

*,
*:before,
*:after {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    font-size: 20px;
}
body {
    background: #87beff;
    color: #222;
    font: 1em "Anton", sans-serif;
    line-height: 1.5;
    overflow-x: hidden;
}
/* all */

.progress-container,
.progress-state,
.dump-truck,
.dump-truck div {
    position: absolute;
}
/* progress */

.progress-container,
.progress-box {
    width: 6em;
}
.progress-container {
    top: 50%;
    left: calc(50% - 3em);
    height: 7.5em;
    z-index: 2;
}
.progress-box {
    border-radius: 0 0 0.5em 0.5em;
    border: 0.5em solid #505050;
    border-top: 0;
    height: 4em;
}
.progress-fill {
    animation: fillDirt 10s linear forwards;
    background: #643232;
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition: transform 0.5s ease-out;
    width: 100%;
    height: 100%;
}
.progress-state {
    bottom: 0;
    left: 0;
    font-size: 1.5em;
    text-align: center;
}
.state-load {
    animation: hideLoad 20s linear forwards;
}
.state-finish {
    animation: showFinish 0.3s 20s linear forwards;
    visibility: hidden;
}
/* trucks */

.dump-truck {
    opacity: 0;
    top: calc(50% - 4em);
    width: 14em;
    height: 8em;
}
.dump-truck:nth-of-type(2) {
    animation: backupL 10s ease-in-out 2 forwards;
    right: 50%;
    transform: scaleX(-1) translateX(5em);
}
.dump-truck:nth-of-type(2) .bucket {
    animation: dump 10s linear 2;
}
.dump-truck:nth-of-type(2) .dirt {
    animation: rotateDirt 10s linear 2;
}
.dump-truck:nth-of-type(2) .dirt-spill {
    animation: pourDirt 10s linear 2;
}
.dump-truck:nth-of-type(2) .wheel {
    animation: spinL 10s ease-in-out 2;
}
.dump-truck:last-of-type {
    animation: backupR 10s 5s ease-in-out 2 forwards;
    left: 50%;
    transform: translateX(5em);
}
.dump-truck:last-of-type .bucket {
    animation: dump 10s 5s linear 2;
}
.dump-truck:last-of-type .dirt {
    animation: rotateDirt 10s 5s linear 2;
}
.dump-truck:last-of-type .dirt-spill {
    animation: pourDirt 10s 5s linear 2;
}
.dump-truck:last-of-type .wheel {
    animation: spinR 10s 5s ease-in-out 2;
}
.front {
    background: linear-gradient(#ff3f30, #ff3f30) 2.7em 0.75em/0.2em 2em, linear-gradient(#a0a0a0, #a0a0a0) 1em 3.5em/0.8em 0.2em, linear-gradient(#505050, #505050) 3.3em 6.1em/0.5em 0.2em, linear-gradient(#505050, #505050) 3.3em 6.8em/0.5em 0.2em, linear-gradient(83deg, #282828 49%, rgba(40, 40, 40, 0) 50%) 1em 0.75em/5em 2em, radial-gradient(3.4em 4.6em at 33% 100%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 59%, rgba(255, 255, 255, 0) 60%), radial-gradient(3.4em 4.6em at 33% 100%, rgba(255, 63, 48, 0) 49%, #ff3f30 50%);
    background-repeat: no-repeat;
    border-radius: 10% 20% 5% 25% / 10% 50% 5% 100%;
    top: 0.4em;
    left: 10.1em;
    width: 3.9em;
    height: 7em;
}
.bucket {
    background: repeating-linear-gradient(95deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 0.85em, rgba(0, 0, 0, 0.15) 0.9em, rgba(0, 0, 0, 0.15) 1.75em, rgba(0, 0, 0, 0.15) 1.8em) 0.1em 1.6em/7.8em 3.2em, linear-gradient(#505050, #505050) 8em 0/2em 0.5em, linear-gradient(95deg, rgba(80, 80, 80, 0) 0.45em, #505050 0.5em, #505050 1.45em, rgba(80, 80, 80, 0) 1.5em) 7em 0/1.6em 5.5em, linear-gradient(rgba(80, 80, 80, 0) 1em, #505050 1em) 0 0/7.5em 5.5em;
    background-repeat: no-repeat;
    border-radius: 0 0 0 25% / 0 0 0 15%;
    top: 0;
    left: 0;
    width: 10em;
    height: 5.5em;
    transform: rotate(0deg);
    transform-origin: 22% 100%;
}
.dirt {
    background: #643232;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    top: 1.1em;
    left: -3.2em;
    width: 7.4em;
    height: 3em;
    transform: rotate(-25deg);
    transform-origin: 50% 0;
    z-index: -1;
}
.dirt-spill {
    background: #643232;
    border-radius: 0.4em;
    top: 0;
    left: -5.25em;
    transform: rotate(-40deg) scale(1, 1);
    transform-origin: 5.25em 0em;
    width: 5.5em;
    height: 0.8em;
}
.base {
    background: #7f5b58;
    border-radius: 0.25em;
    top: 5.5em;
    left: 2em;
    width: 8.3em;
    height: 1.5em;
}
.wheel {
    background: radial-gradient(100% 100%, #282828 9%, rgba(40, 40, 40, 0) 10%), radial-gradient(100% 100%, #a0a0a0 29%, rgba(160, 160, 160, 0) 30%), linear-gradient(90deg, rgba(255, 255, 255, 0.15) 49%, rgba(255, 255, 255, 0) 50%), radial-gradient(100% 100%, #282828 49%, rgba(40, 40, 40, 0) 50%);
    border-radius: 50%;
    bottom: 0;
    width: 2.4em;
    height: 2.4em;
}
.wheel-front {
    left: 10.4em;
}
.wheel-middle {
    left: 4.5em;
}
.wheel-back {
    left: 2em;
}
/* animations */

@keyframes backupL {
    from, 50%, to {
        opacity: 0;
        transform: scaleX(-1) translateX(20em);
    }
    12.5%,
    37.5% {
        opacity: 1;
        transform: scaleX(-1) translateX(5em);
    }
}
@keyframes backupR {
    from, 50%, to {
        opacity: 0;
        transform: translateX(20em);
    }
    12.5%,
    37.5% {
        opacity: 1;
        transform: translateX(5em);
    }
}
@keyframes dump {
    from, 12.5%, 37.5%, to {
        transform: rotate(0deg);
    }
    20%,
    30% {
        transform: rotate(-40deg);
    }
}
@keyframes rotateDirt {
    from, 19.9%, 30.1%, to {
        opacity: 0;
    }
    20%,
    30% {
        opacity: 1;
        transform: rotate(-40deg);
    }
    25% {
        transform: rotate(-25deg);
    }
}
@keyframes pourDirt {
    from, 20% {
        transform: rotate(-40deg) scale(0, 0);
    }
    25% {
        transform: rotate(-40deg) scale(1, 1);
    }
    30%,
    to {
        transform: rotate(-25deg) scale(0.8, 0);
    }
}
@keyframes spinL {
    from, 50%, to {
        transform: rotate(-0.5turn);
    }
    12.5%,
    37.5% {
        transform: rotate(-2.5turn);
    }
}
@keyframes spinR {
    from, 50%, to {
        transform: rotate(0);
    }
    12.5%,
    37.5% {
        transform: rotate(-2turn);
    }
}
@keyframes hideLoad {
    from {
        visibility: visible;
    }
    to {
        visibility: hidden;
    }
}
@keyframes showFinish {
    from {
        transform: scale(0);
        visibility: visible;
    }
    80% {
        transform: scale(1.2);
    }
    to {
        transform: scale(1);
        visibility: visible;
    }
}

HTML

Dump Truck，卡车倒土动画

css, truck, car

编辑器支持Emmet

快捷键

Dump Truck，卡车倒土动画

css, truck, car

three.js gltf模型加载代码示例（带动画和阴影效果）：园区、办公楼和行驶的车辆

CSS3 七彩蚯蚓 | 舞龙灯加载动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：