Vue.js制作的活塞运动机械引擎动画

engines with vuejs

vue, engine, machine

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Poppins");
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
input[type="range"] {
    -webkit-appearance: none;
    background-color: #1B998B;
    width: 120px;
    height: 1px;
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #E71D36;
    border: 1px solid #E71D36;
    width: 30px;
    height: 15px;
    border-radius: 5px;
}
.application {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.application__controlls {
    position: absolute;
    z-index: 1000;
    border: 1px solid rgba(231, 29, 54, 0.2);
    border-radius: 10px;
    background-color: rgba(231, 29, 54, 0.1);
    padding: 6px;
    top: -90px;
    left: 49%;
    transform: translateX(-50%);
    box-shadow: 1px 1px 15px rgba(231, 29, 54, 0.7);
}
.label span {
    display: block;
    padding: 0;
    line-height: 20px;
    font-size: 12px;
    color: #3A405A;
}
.board {
    width: 420px;
    height: 420px;
    position: relative;
}
.engine-crank {
    position: absolute;
    width: 84px;
    height: 84px;
    background-color: #3A405A;
    border-radius: 50% 50% 52% 48%/72% 72% 28% 28%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: 0% 0%;
    animation: crank_go 0.4s linear infinite;
}
.engine-crank:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1.5px;
    background-color: #464d6c;
    top: 50%;
    transform: translateY(-50%);
}
.engine-item {
    position: absolute;
    height: 150px;
    top: 32%;
    left: 50%;
    transform-origin: 50% 100%;
}
.engine-item__body {
    position: absolute;
    width: 144px;
    height: 144px;
    border: 3px solid rgba(27, 153, 139, 0.2);
    background-color: rgba(27, 153, 139, 0.1);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}
.engine-item__head {
    width: 60px;
    height: 84px;
    border: 4px solid #3A405A;
    border-bottom: none;
    position: relative;
    background-color: rgba(27, 153, 139, 0.1);
}
.engine-item__fire {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8.5714285714px;
    background: #FF8419;
    transform-origin: 50% 0;
    animation: fire_go 0.4s ease infinite;
}
.engine-item__piston {
    position: absolute;
    width: 100%;
    top: 8.5714285714px;
    height: 27.2727272727px;
    background-color: #232636;
    transform-origin: 50% 0;
    animation: piston_go 0.4s ease infinite;
}
.engine-item__spark-plug {
    position: absolute;
    height: 20px;
    width: 6px;
    left: calc(50% - 3px);
    top: -17.1428571429px;
    background-color: #464d6c;
}
.engine-item__spark-plug-fire {
    position: absolute;
    width: 7.5px;
    height: 7.5px;
    border-radius: 50%;
    bottom: -7.5px;
    transform-origin: center center;
    left: calc(50% - 3.75px);
    animation: spark_plug_go 0.4s ease infinite;
}
.engine-item__gate {
    position: absolute;
    width: 3.75px;
    height: 20px;
    background-color: #222222;
    top: -17.1428571429px;
    z-index: 3000;
    animation: gate_go 0.4s ease infinite;
}
.engine-item__gate:before {
    content: "";
    position: absolute;
    width: 8.5714285714px;
    height: 3.75px;
    background-color: #222222;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.engine-item__gate--in {
    left: 8.5714285714px;
}
.engine-item__gate--out {
    right: 8.5714285714px;
}
.engine-item__rod {
    position: absolute;
    height: 114.6px;
    width: 4.2857142857px;
    background: #232636;
    top: 20px;
    left: calc(50% - 2px);
    transform-origin: 50% 0;
    transition: 0.3s linear;
    animation: rod_go 0.4s linear infinite;
}
.engine-item__rod:before {
    content: "";
    position: absolute;
    width: 8.5714285714px;
    height: 100%;
    transform: rotate(3deg) translateX(-6px);
    background: #232636;
}
.engine-item__rod:after {
    content: "";
    position: absolute;
    width: 8.5714285714px;
    height: 100%;
    transform: rotate(-3deg) translateX(2.6086956522px);
    background: #232636;
}
@keyframes piston_go {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(35.2941176471px);
    }
}
@keyframes crank_go {
    0% {
        transform: rotate(0deg) translate(-50%, -50%);
    }
    100% {
        transform: rotate(360deg) translate(-50%, -50%);
    }
}
@keyframes rod_go {
    0%, 100% {
        transform: rotate(0deg) translateY(0);
    }
    25% {
        transform: rotate(-10deg) translate(-4.2857142857px, 17.6470588235px);
    }
    50% {
        transform: rotate(0deg) translate(0px, 35.2941176471px);
    }
    75% {
        transform: rotate(10deg) translate(4.2857142857px, 17.6470588235px);
    }
}
@keyframes fire_go {
    0%, 100% {
        opacity: 0;
        transform: scaleY(0);
    }
    60% {
        background-color: #E71D36;
    }
    60% {
        opacity: 1;
        transform: scaleY(6.3);
    }
    90% {
        background-color: #3A405A;
    }
}
@keyframes gate_go {
    0%, 49%, 55%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(5.8823529412px);
    }
}
@keyframes spark_plug_go {
    0%, 100% {
        opacity: 0;
        transform: scale(0);
    }
    20% {
        background-color: #E71D36;
    }
    20% {
        opacity: 1;
        transform: scale(1.3);
    }
}

HTML

<template id="engine-item-self">
    <div class="engine-item" :style="{ transform: `translate(-50%, -50%) rotate(${angle}deg)` }">
        <div class="engine-item__head">
            <div class="engine-item__in-pipe engine-item__in-pipe--f"></div>
            <div class="engine-item__spark-plug">
                <span class="engine-item__spark-plug-fire" :style="{animationDelay: `${delay}s`, animationDuration: `${speed}s`}"></span>
            </div>
            <div class="engine-item__gate engine-item__gate--in" :style="{animationDelay: `${delay+0.3}s`, animationDuration: `${speed}s`}"></div>
            <div class="engine-item__gate engine-item__gate--out" :style="{animationDelay: `${delay}s`, animationDuration: `${speed}s`}"></div>
            <div class="engine-item__fire" :style="{animationDelay: `${ delay }s`, animationDuration: `${speed}s`}"></div>
            <div class="engine-item__piston" :style="{animationDelay: `${ delay }s`, animationDuration: `${speed}s`}"></div>
            <div class="engine-item__rod" :style="{animationDelay: `${ delay }s`, animationDuration: `${speed}s`}"></div>
        </div>
    </div>
</template>
<div id="application">
    <div class="application">
        <div class="application__controlls" :style="{ backgroundColor: `rgba(231,29,54,${getOpacity})` }">
            <label class="label label--speed">
                <input class="speed" type="range" min="0.1" max="1.5" step="0.1" @input="getSpeed" />
                <span>speed</span>
            </label>
            <label class="label label--amount">
                <input class="amount" type="range" min="1" max="8" step="1" @input="changeAmount" />
                <span>amount</span>
            </label>
        </div>
        <div class="board">
            <engine-item v-for="(item, index) in amount" :angle='index * getAngle' :delay='index * ( speed / amount * 2 )' :speed="speed"></engine-item>
            <div class="engine-item__body"></div>
            <div class="engine-crank" :style="{animationDuration: `${speed}s`}"></div>
        </div>
    </div>
</div>

engines with vuejs

vue, engine, machine

编辑器支持Emmet

快捷键

engines with vuejs

vue, engine, machine

使用Vue.js制作的陶笛乐器

基于Vue.js实现的轮播动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：