当前位置: 首页 » vue案例集 » 正文

vue火箭发射飞行动画特效

xiaodai8580 4年前 (2020-12-05) 665℃ 0次吐槽

vue火箭发射飞行动画特效

image.png

html:

        <div id="app">
            <div class="wrapper" :class="power">
                <div class="charge-box">
                    <div class="charge-box__box">
                        <div class="charge-box__power" :style="chargeWidth" :class="meterColor"></div>
                    </div>
                    <div class="charge-box__button" @mousedown="mousedown()" @mouseup="mouseup()" @touchstart="mousedown()" @touchend="mouseup()">{{buttonText}}</div>
                </div>
                <div class="rocket">
                    <div class="rocket__body">
                        <div class="rocket__inner"></div>
                    </div>
                    <div class="rocket__wing rocket__wing--center"></div>
                    <div class="rocket__wing rocket__wing--right"></div>
                    <div class="rocket__wing rocket__wing--left"></div>
                    <div class="rocket__fire"></div>
                </div>
                <div class="lines">
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                </div>
            </div>
        </div>

css:

@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Cute+Font&display=swap");
html,
body {
width: 100%;
height: 100%;
margin: 0;overflow: hidden
}

body {
background: #333;
color: #fff;
font-family: "Cute Font", cursive;
}

#app {
width: 100%;
height: 100%;
padding: 30px;
box-sizing: border-box;
}

* {
-webkit-transition: 0.8s;
transition: 0.8s;
}
*:before, *:after {
content: "";
position: absolute;
}

.wrapper {
position: relative;
width: 100%;
height: 100%;
}

.rocket {
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 35px);
width: 70px;
height: 110px;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation: 1s alternate infinite rocket;
animation: 1s alternate infinite rocket;
}
.rocket__body {
position: absolute;
top: 0;
left: 10px;
width: 50px;
height: 100px;
overflow: hidden;
border-radius: 90% 90% 0 0;
z-index: 10;
}
.rocket__inner {
width: 50px;
height: 115px;
border-radius: 90%;
background: #fff;
overflow: hidden;
}
.rocket__inner:before {
top: 35px;
left: 14px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 3px solid #aaa;
background: #71b2ce;
box-sizing: border-box;
}
.rocket__inner:after {
top: -5px;
left: 10px;
width: 30px;
height: 25px;
border-radius: 50%;
background: #f05e5e;
}
.rocket__wing {
position: absolute;
top: 70px;
background: #f05e5e;
width: 45px;
height: 20px;
}
.rocket__wing--right {
right: -10px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-radius: 0 90% 0 0;
}
.rocket__wing--left {
left: -10px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
border-radius: 90% 0 0 0;
}
.rocket__wing--center {
top: 70px;
left: 28px;
width: 12px;
height: 40px;
border-radius: 50%;
z-index: 10;
}
.rocket__fire {
position: absolute;
top: 122px;
left: 15px;
background: #f05e5e;
width: 40px;
height: 40px;
border-radius: 90% 0 90% 90%;
-webkit-transform: scale(0.6) translateY(10px) rotate(-45deg);
transform: scale(0.6) translateY(10px) rotate(-45deg);
}
.rocket__fire:before {
top: 7px;
left: 14px;
background: orange;
width: 20px;
height: 20px;
border-radius: 90% 0 90% 90%;
z-index: 10;
-webkit-animation: 1s alternate infinite fire2;
animation: 1s alternate infinite fire2;
}
.rocket__fire:after {
top: -2px;
left: -4px;
width: 44px;
height: 48px;
border-radius: 50%;
background: #f05e5e;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: 1s alternate infinite fire;
animation: 1s alternate infinite fire;
}

.charge-box {
position: absolute;
bottom: 10px;
left: calc(50% - 102px);
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-flow: column;
-webkit-box-align: center;
align-items: center;
}
.charge-box__box {
width: 200px;
height: 46px;
border: 2px solid #fff;
overflow: hidden;
margin-bottom: 20px;
}
.charge-box__box:after {
content: "MAX";
top: -30px;
right: -15px;
font-size: 25px;
}
.charge-box__power {
position: absolute;
top: 2px;
left: 2px;
width: 0;
height: 46px;
background: #fff;
-webkit-transition: 1s;
transition: 1s;
}
.charge-box__power--full {
background: #d24d4d;
}
.charge-box__power--large {
background: #f09f5e;
}
.charge-box__power--normal {
background: #f0d55e;
}
.charge-box__power--small {
background: #afd24d;
}
.charge-box__button {
width: 150px;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
padding: 10px;
background: #f05e5e;
color: #fff;
font-size: 30px;
cursor: pointer;
box-sizing: border-box;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.charge-box__button:hover {
opacity: 0.8;
}

.small-power .rocket__fire {
-webkit-transform: scale(1) translateY(10px) rotate(-45deg);
transform: scale(1) translateY(10px) rotate(-45deg);
}
.small-power .line:nth-of-type(1), .small-power .line:nth-of-type(4) {
-webkit-animation: 3s ease-in-out 0.6s infinite line;
animation: 3s ease-in-out 0.6s infinite line;
}
.small-power .line:nth-of-type(2), .small-power .line:nth-of-type(7) {
-webkit-animation: 3s ease-in-out 1.8s infinite line;
animation: 3s ease-in-out 1.8s infinite line;
}
.small-power .line:nth-of-type(3), .small-power .line:nth-of-type(9) {
-webkit-animation: 3s ease-in-out 2.7s infinite line;
animation: 3s ease-in-out 2.7s infinite line;
}
.small-power .line:nth-of-type(5),
.small-power .line :nth-of-type(10) {
-webkit-animation: 3s ease-in-out 1.2s infinite line;
animation: 3s ease-in-out 1.2s infinite line;
}
.small-power .line:nth-of-type(6), .small-power .line:nth-of-type(8) {
-webkit-animation: 3s ease-in-out 0.3s infinite line;
animation: 3s ease-in-out 0.3s infinite line;
}

.normal-power .rocket {
-webkit-animation: 3.5s alternate moveNormal;
animation: 3.5s alternate moveNormal;
}
.normal-power .rocket__fire {
-webkit-transform: scale(1.1) translateY(10px) rotate(-45deg);
transform: scale(1.1) translateY(10px) rotate(-45deg);
}
.normal-power .line:nth-of-type(1), .normal-power .line:nth-of-type(4) {
-webkit-animation: 2s ease-in-out 0.4s infinite line;
animation: 2s ease-in-out 0.4s infinite line;
}
.normal-power .line:nth-of-type(2), .normal-power .line:nth-of-type(7) {
-webkit-animation: 2s ease-in-out 1.2s infinite line;
animation: 2s ease-in-out 1.2s infinite line;
}
.normal-power .line:nth-of-type(3), .normal-power .line:nth-of-type(9) {
-webkit-animation: 2s ease-in-out 1.8s infinite line;
animation: 2s ease-in-out 1.8s infinite line;
}
.normal-power .line:nth-of-type(5),
.normal-power .line :nth-of-type(10) {
-webkit-animation: 2s ease-in-out 0.8s infinite line;
animation: 2s ease-in-out 0.8s infinite line;
}
.normal-power .line:nth-of-type(6), .normal-power .line:nth-of-type(8) {
-webkit-animation: 2s ease-in-out 1.6s infinite line;
animation: 2s ease-in-out 1.6s infinite line;
}

.large-power .rocket {
-webkit-animation: 3s alternate moveLarge;
animation: 3s alternate moveLarge;
}
.large-power .rocket__fire {
-webkit-transform: scale(1.2) translateY(10px) rotate(-45deg);
transform: scale(1.2) translateY(10px) rotate(-45deg);
}
.large-power .line:nth-of-type(1), .large-power .line:nth-of-type(4) {
-webkit-animation: 1s ease-in-out 0.2s infinite line;
animation: 1s ease-in-out 0.2s infinite line;
}
.large-power .line:nth-of-type(2), .large-power .line:nth-of-type(7) {
-webkit-animation: 1s ease-in-out 0.6s infinite line;
animation: 1s ease-in-out 0.6s infinite line;
}
.large-power .line:nth-of-type(3), .large-power .line:nth-of-type(9) {
-webkit-animation: 1s ease-in-out 0.3s infinite line;
animation: 1s ease-in-out 0.3s infinite line;
}
.large-power .line:nth-of-type(5),
.large-power .line :nth-of-type(10) {
-webkit-animation: 1s ease-in-out 0.4s infinite line;
animation: 1s ease-in-out 0.4s infinite line;
}
.large-power .line:nth-of-type(6), .large-power .line:nth-of-type(8) {
-webkit-animation: 1s ease-in-out 0.8s infinite line;
animation: 1s ease-in-out 0.8s infinite line;
}

.fill-power .rocket {
-webkit-animation: 1s alternate moveFull;
animation: 1s alternate moveFull;
}
.fill-power .rocket__fire {
-webkit-transform: scale(1.5) translateY(10px) rotate(-45deg);
transform: scale(1.5) translateY(10px) rotate(-45deg);
}
.fill-power .line:nth-of-type(1), .fill-power .line:nth-of-type(4) {
-webkit-animation: 0.5s ease-in-out 0.1s infinite line;
animation: 0.5s ease-in-out 0.1s infinite line;
}
.fill-power .line:nth-of-type(2), .fill-power .line:nth-of-type(7) {
-webkit-animation: 0.5s ease-in-out 0.3s infinite line;
animation: 0.5s ease-in-out 0.3s infinite line;
}
.fill-power .line:nth-of-type(3), .fill-power .line:nth-of-type(9) {
-webkit-animation: 0.5s ease-in-out 0.5s infinite line;
animation: 0.5s ease-in-out 0.5s infinite line;
}
.fill-power .line:nth-of-type(5),
.fill-power .line :nth-of-type(10) {
-webkit-animation: 0.5s ease-in-out 0.2s infinite line;
animation: 0.5s ease-in-out 0.2s infinite line;
}
.fill-power .line:nth-of-type(6), .fill-power .line:nth-of-type(8) {
-webkit-animation: 0.5s ease-in-out 0.4s infinite line;
animation: 0.5s ease-in-out 0.4s infinite line;
}

.line {
position: absolute;
top: -90px;
width: 1px;
height: 60px;
background: #fff;
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
.line:nth-of-type(1) {
left: 10%;
-webkit-animation: 5s ease-in-out 0s infinite line;
animation: 5s ease-in-out 0s infinite line;
}
.line:nth-of-type(2) {
left: 20%;
-webkit-animation: 5s ease-in-out 3s infinite line;
animation: 5s ease-in-out 3s infinite line;
}
.line:nth-of-type(3) {
-webkit-animation: 5s ease-in-out 5s infinite line;
animation: 5s ease-in-out 5s infinite line;
left: 30%;
}
.line:nth-of-type(4) {
-webkit-animation: 5s ease-in-out 1s infinite line;
animation: 5s ease-in-out 1s infinite line;
left: 40%;
}
.line:nth-of-type(5) {
-webkit-animation: 5s ease-in-out 2s infinite line;
animation: 5s ease-in-out 2s infinite line;
left: 50%;
}
.line:nth-of-type(6) {
-webkit-animation: 5s ease-in-out 4s infinite line;
animation: 5s ease-in-out 4s infinite line;
left: 60%;
}
.line:nth-of-type(7) {
-webkit-animation: 5s ease-in-out 3s infinite line;
animation: 5s ease-in-out 3s infinite line;
left: 70%;
}
.line:nth-of-type(8) {
-webkit-animation: 5s ease-in-out 1s infinite line;
animation: 5s ease-in-out 1s infinite line;
left: 80%;
}
.line:nth-of-type(9) {
-webkit-animation: 5s ease-in-out 5s infinite line;
animation: 5s ease-in-out 5s infinite line;
left: 90%;
}
.line:nth-of-type(10) {
-webkit-animation: 5s ease-in-out 2s infinite line;
animation: 5s ease-in-out 2s infinite line;
left: 100%;
}

@keyframes line {
0% {
-webkit-transform: translateY(-90px);
transform: translateY(-90px);
}
100% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
}
}
@-webkit-keyframes line {
0% {
-webkit-transform: translateY(-90px);
transform: translateY(-90px);
}
100% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
}
}
@keyframes fire {
0% {
-webkit-transform: rotate(45deg) translateY(0px);
transform: rotate(45deg) translateY(0px);
}
100% {
-webkit-transform: rotate(45deg) translateY(5px);
transform: rotate(45deg) translateY(5px);
}
}
@-webkit-keyframes fire {
0% {
-webkit-transform: rotate(45deg) translateY(0px);
transform: rotate(45deg) translateY(0px);
}
100% {
-webkit-transform: rotate(45deg) translateY(5px);
transform: rotate(45deg) translateY(5px);
}
}
@keyframes fire2 {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes fire2 {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes rocket {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
}
@-webkit-keyframes rocket {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
}
@keyframes moveFull {
0% {
-webkit-transform: translateY(0) rotate(0);
transform: translateY(0) rotate(0);
}
10% {
-webkit-transform: translateY(-30px) rotate(10deg);
transform: translateY(-30px) rotate(10deg);
}
45% {
-webkit-transform: translateY(-20px) rotate(-10deg);
transform: translateY(-20px) rotate(-10deg);
}
65% {
-webkit-transform: translateY(50px) rotate(0);
transform: translateY(50px) rotate(0);
}
100% {
-webkit-transform: translateY(0) rotate(0);
transform: translateY(0) rotate(0);
}
}
@-webkit-keyframes moveFull {
0% {
-webkit-transform: translateY(0) rotate(0);
transform: translateY(0) rotate(0);
}
10% {
-webkit-transform: translateY(-30px) rotate(10deg);
transform: translateY(-30px) rotate(10deg);
}
45% {
-webkit-transform: translateY(-20px) rotate(-10deg);
transform: translateY(-20px) rotate(-10deg);
}
65% {
-webkit-transform: translateY(50px) rotate(0);
transform: translateY(50px) rotate(0);
}
100% {
-webkit-transform: translateY(0) rotate(0);
transform: translateY(0) rotate(0);
}
}
@keyframes moveLarge {
0% {
-webkit-transform: translateY(0) rotate(0);
transform: translateY(0) rotate(0);
}
10% {
-webkit-transform: translateY(-30px) rotate(10deg);
transform: translateY(-30px) rotate(10deg);
}
45% {
-webkit-transform: translateY(-20px) rotate(-10deg);
transform: translateY(-20px) rotate(-10deg);
}
65% {
-webkit-transform: translateY(50px) rotate(0);
transform: translateY(50px) rotate(0);
}
100% {
-webkit-transform: translateY(0) rotate(0);
transform: translateY(0) rotate(0);
}
}
@-webkit-keyframes moveLarge {
0% {
-webkit-transform: translateY(0) rotate(0);
transform: translateY(0) rotate(0);
}
10% {
-webkit-transform: translateY(-30px) rotate(10deg);
transform: translateY(-30px) rotate(10deg);
}
45% {
-webkit-transform: translateY(-20px) rotate(-10deg);
transform: translateY(-20px) rotate(-10deg);
}
65% {
-webkit-transform: translateY(50px) rotate(0);
transform: translateY(50px) rotate(0);
}
100% {
-webkit-transform: translateY(0) rotate(0);
transform: translateY(0) rotate(0);
}
}
@keyframes moveNormal {
0% {
-webkit-transform: translateY(0) rotate(0);
transform: translateY(0) rotate(0);
}
10% {
-webkit-transform: translateY(-30px) rotate(10deg);
transform: translateY(-30px) rotate(10deg);
}
45% {
-webkit-transform: translateY(-20px) rotate(-10deg);
transform: translateY(-20px) rotate(-10deg);
}
65% {
-webkit-transform: translateY(50px) rotate(0);
transform: translateY(50px) rotate(0);
}
100% {
-webkit-transform: translateY(0) rotate(0);
transform: translateY(0) rotate(0);
}
}
@-webkit-keyframes moveNormal {
0% {
-webkit-transform: translateY(0) rotate(0);
transform: translateY(0) rotate(0);
}
10% {
-webkit-transform: translateY(-30px) rotate(10deg);
transform: translateY(-30px) rotate(10deg);
}
45% {
-webkit-transform: translateY(-20px) rotate(-10deg);
transform: translateY(-20px) rotate(-10deg);
}
65% {
-webkit-transform: translateY(50px) rotate(0);
transform: translateY(50px) rotate(0);
}
100% {
-webkit-transform: translateY(0) rotate(0);
transform: translateY(0) rotate(0);
}
}

vuejs:

   <script src="js/vue.js"></script>
        <script>
        var vm = new Vue({
                el: '#app',
                data(){
                    return{
                        powerDown: null,
                        powerUp: null,
                        clicking: false,
                        charge: 0,
                        buttonText: "按下按钮"
                    };
                },
                watch:{
                    charge: function(val){
                        if (val >= 100) {
                            this.charge = 100;
                        }
                        if (val <= 0) {
                            clearInterval(this.powerDown);
                        }
                    }
                },
                computed:{
                    power(){
                        if (this.charge === 0 || this.clicking == true) return "";
                        if (this.charge >= 90 && this.charge < 100) {
                            return "fill-power";
                        } else if (this.charge >= 60 && this.charge < 90) {
                            return "large-power";
                        } else if (this.charge >= 30 && this.charge < 60) {
                            return "normal-power";
                        } else if (this.charge >= 10 && this.charge < 30) {
                            return "small-power";
                        } else {
                            return "minimum-power";
                        }
                    },
                    meterColor(){
                        if (this.charge >= 100) {
                            return "charge-box__power--full";
                        } else if (this.charge >= 60 && this.charge < 100) {
                            return "charge-box__power--large";
                        } else if (this.charge >= 30 && this.charge < 60) {
                            return "charge-box__power--normal";
                        } else if (this.charge >= 10 && this.charge < 30) {
                            return "charge-box__power--small";
                        } else {
                            return "minimum-power";
                        }
                    },
                    chargeWidth(){
                        const meter = this.charge * 2;
                        return {
                            width: meter + "px"
                        };
                    }
                },
                methods: {
                    mousedown:function(){
                        clearInterval(this.powerDown);
                        this.clicking = true;
                        this.buttonText = "充电中...";
                        this.powerUp = setInterval(() => {
                            this.charge++;
                        }, 100);
                    },
                    mouseup:function(){
                        this.buttonText = "按下按钮";
                        this.clicking = false;
                        clearInterval(this.powerUp);
                        this.powerDown = setInterval(() => {
                            this.charge--;
                        }, 100);
                    }
                }
            })
        </script>


xiaodai8580
版权声明：无特别说明，本站文章皆为原创，本文于，由 xiaodai8580 发表。
转载请注明：vue火箭发射飞行动画特效-H5前端开发，注重积累的过程，快速锁定问题解决问题 写博客，在积累源码,持续更新技术博客,最好的投资是自己，最好的开始就是现在！你以为的顿悟，可能只是别人的基本功！

还没有留言，还不快点抢沙发？

发表评论:


网站分类
标签列表
备案号：皖ICP备18018054号-2
H5前端开发-WEB前端124454479@qq.com  
H5前端开发博客 基于Z-BlogPHP