标签：vue 自定义 transform animation webkit circle translate rotate 加载

  一个平平无奇的小功能，塞进component文件夹里就可以引用，可以帮你节省10分钟

呐，看源码：

<template>
  <div class="loading" :class="[date?'':'vanish']">
    <div class="loadOne load">
      <div class="circle-loader">
        <div class="circle-line">
          <div class="circle circle-blue"></div>
          <div class="circle circle-blue"></div>
          <div class="circle circle-blue"></div>
        </div>
        <div class="circle-line">
          <div class="circle circle-yellow"></div>
          <div class="circle circle-yellow"></div>
          <div class="circle circle-yellow"></div>
        </div>
        <div class="circle-line">
          <div class="circle circle-red"></div>
          <div class="circle circle-red"></div>
          <div class="circle circle-red"></div>
        </div>
        <div class="circle-line">
          <div class="circle circle-green"></div>
          <div class="circle circle-green"></div>
          <div class="circle circle-green"></div>
        </div>
      </div>
    </div>
    <button class="btn open" @click="enter">进入</button>
  </div>
</template>
<script>
export default {
  name:"Loading",
  data(){
    return{
      date:true
    }
  },
  methods:{
    enter(){
      this.date = false
    }
  }
}
</script>
<style lang="stylus" scoped>
.loading{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background-color:orange;
  font-family: 'Roboto', sans-serif;
  background-color: #FFD399;
  .load{
    position:absolute;
    top:140px;left:0;right:0;
    margin:auto;
  }
  .loadOne{
    left:16px;
  @-webkit-keyframes rotate-animation {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
	@keyframes rotate-animation {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
	@-webkit-keyframes move-animation {
		0% {
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
		}
		25% {
			-webkit-transform: translate(-64px, 0);
			transform: translate(-64px, 0);
		}
		75% {
			-webkit-transform: translate(32px, 0);
			transform: translate(32px, 0);
		}
		100% {
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
		}
	}
	@-webkit-keyframes move-animation {
	 0%{
		 -webkit-transform: translate(0,0);
		 transform: translate(0,0);
	 }
	 }
	@keyframes move-animation {
		0% {
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
		}
		25% {
			-webkit-transform: translate(-64px, 0);
			transform: translate(-64px, 0);
		}
		75% {
			-webkit-transform: translate(32px, 0);
			transform: translate(32px, 0);
		}
		100% {
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
		}
	}
	body {
		background-color: #F5F5F5;
	}

	.circle-loader {
		display: block;
		width: 64px;
		height: 64px;
		margin-left: -32px;
		margin-top: -32px;
		position: absolute;
		left: 50%;
		top: 50%;
		-webkit-transform-origin: 16px 16px;
		transform-origin: 16px 16px;
		-webkit-animation: rotate-animation 5s infinite;
		animation: rotate-animation 5s infinite;
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
	}
	.circle-loader .circle {
		-webkit-animation: move-animation 2.5s infinite;
		animation: move-animation 2.5s infinite;
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
		position: absolute;
		left: 50%;
		top: 50%;
	}
	.circle-loader .circle-line {
		width: 64px;
		height: 24px;
		position: absolute;
		top: 4px;
		left: 0;
		-webkit-transform-origin: 4px 4px;
		transform-origin: 4px 4px;
	}
	.circle-loader .circle-line:nth-child(0) {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	.circle-loader .circle-line:nth-child(1) {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.circle-loader .circle-line:nth-child(2) {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	.circle-loader .circle-line:nth-child(3) {
		-webkit-transform: rotate(270deg);
		transform: rotate(270deg);
	}
	.circle-loader .circle-line .circle:nth-child(1) {
		width: 8px;
		height: 8px;
		top: 50%;
		left: 50%;
		margin-top: -4px;
		margin-left: -4px;
		border-radius: 4px;
		-webkit-animation-delay: -0.3s;
		animation-delay: -0.3s;
	}
	.circle-loader .circle-line .circle:nth-child(2) {
		width: 16px;
		height: 16px;
		top: 50%;
		left: 50%;
		margin-top: -8px;
		margin-left: -8px;
		border-radius: 8px;
		-webkit-animation-delay: -0.6s;
		animation-delay: -0.6s;
	}
	.circle-loader .circle-line .circle:nth-child(3) {
		width: 24px;
		height: 24px;
		top: 50%;
		left: 50%;
		margin-top: -12px;
		margin-left: -12px;
		border-radius: 12px;
		-webkit-animation-delay: -0.9s;
		animation-delay: -0.9s;
	}
	.circle-loader .circle-blue {
		background-color: #1f4e5a;
	}
	.circle-loader .circle-red {
		background-color: #ff5955;
	}
	.circle-loader .circle-yellow {
		background-color: #ffb265;
	}
	.circle-loader .circle-green {
		background-color: #00a691;
	}
  }

  .btn{
    position:absolute;
    left:0; right:0;
    margin:auto;
    width:140px;
    height:46px;
  }
  .open{
    bottom:120px;
  }
}
@keyframes loadtime{
  from{opacity:1}
  to{opacity:0}
}
.vanish{
  animation:loadtime .7s forwards;
}
</style>

  因为活动详情没有隐藏原生导航栏，所以加载页不是全屏，原理：将组件透明化

标签：vue,自定义,transform,animation,webkit,circle,translate,rotate,加载
来源： https://blog.csdn.net/weixin_45820444/article/details/112647178

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。