utils-＞css-＞animation

/* 无缝滚动 ------------------------------------------------------------------------
特点:
1.滚动中没有停顿
2.从头至尾再循环播放时没有停顿
<div class="inner-container">
  <p class="text" v-for="(text, index) in arr" :key="index">{{text}}</p>
</div>
*/
.seamless_scrolling {
  animation: seamless_move 5s linear infinite;
  animation-fill-mode: forwards;
}

/*文字无缝滚动------------------------------------------------------------------------
*/
@keyframes seamless_move {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-150px);
  }
}


/*
*停顿滚动------------------------------------------------------------------------
*/
.pause_scrolling {
  animation: pause_move 5s linear infinite;
  animation-fill-mode: forwards;
}

@keyframes pause_move {
  0% {
    transform: translateY(0);
  }

  10% {
    transform: translateY(-30px);
  }

  20% {
    transform: translateY(-30px);
  }

  30% {
    transform: translateY(-60px);
  }

  40% {
    transform: translateY(-60px);
  }

  50% {
    transform: translateY(-90px);
  }

  60% {
    transform: translateY(-90px);
  }

  70% {
    transform: translateY(-120px);
  }

  80% {
    transform: translateY(-120px);
  }

  90% {
    transform: translateY(-150px);
  }

  100% {
    transform: translateY(-150px);
  }
}
/*
控制文本渐变------------------------------------------------------------------------
<h1 class="gradient-text">Full Stack Developer</h1>
*/

.gradient-text {
	background-image: linear-gradient(90deg, $red, $orange);
	background-clip: text;
	line-height: 60px;
	font-size: 60px;
	animation: hue 5s linear infinite;
	-webkit-text-fill-color: transparent;
}
@keyframes hue {
	from {
		filter: hue-rotate(0);
	}
	to {
		filter: hue-rotate(-1turn);
	}
}

/*
*旋转------------------------------------------------------------------------
*/
.rotate3d {
  animation: loading 1s steps(12, end) infinite;
}

@-webkit-keyframes loading {
  0% {
    transform: rotate3d(0, 0, 1, 0deg);
  }

  100% {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

@keyframes loading {
  0% {
    transform: rotate3d(0, 0, 1, 0deg);
  }

  100% {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

/*
*自动打字------------------------------------------------------------------------
<div class="bruce flex-ct-x">
	<div class="auto-typing">Do You Want To Know More About CSS Development Skill</div>
</div>
*/
.auto-typing {
  font-weight: bold;
  font-size: 30px;
  color: $blue;
  @include typing(52, 5);
}

@mixin typing($count: 0, $duration: 0, $delay: 0) {
  overflow: hidden;
  border-right: 1px solid transparent;
  width: #{$count + 1}ch;
  font-family: Consolas, Monaco, Monospace;
  white-space: nowrap;
  animation: typing #{$duration}s steps($count + 1) #{$delay}s backwards,
  caret 500ms steps(1) #{$delay}s $duration * 2 forwards;
}

@keyframes typing {
  from {
    width: 0;
  }
}

@keyframes caret {
  50% {
    border-right-color: currentColor;
  }
}


/*倒影加载条，带有渐变倒影的加载条------------------------------------------------------------------------
<div class="bruce flex-ct-x">
	<ul class="reflect-loading">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>*/

// .reflect-loading {
// 	display: flex;
// 	height: 100px;
// 	-webkit-box-reflect: below 0 linear-gradient(rgba(#fff, 0), rgba(#fff, .7));
// 	li {
// 		width: 20px;
// 		@for $i from 0 to $count {
// 			$args: append($color, $i * 100% / ($count - 1));
// 			&:nth-child(#{$i + 1}) {
// 				background-color: mix($args...);
// 				animation: rotate 3s cubic-bezier(.81, .04, .4, .7) infinite;
// 				animation-delay: $i * 50ms;
// 			}
// 		}
// 	}
// }
// @keyframes rotate {
// 	0% {
// 		transform: rotate(-.5turn) rotateX(-1turn);
// 	}
// 	75%,
// 	100% {
// 		transform: none;
// 	}
// }



/*
故障文本------------------------------------------------------------------------
<div class="fault-text_bk flex-ct-x">
	<div class="fault-text" data-text="ERROR">ERROR</div>
</div>
*/
.fault-text_bk {
  background-color: #000;
}

.fault-text {
  position: relative;
  font-weight: bold;
  font-size: 100px;
  color: #fff;

  &::before,
  &::after {
    overflow: hidden;
    position: absolute;
    top: 0;
    background-color: #000;
    clip: rect(0, 900px, 0, 0);
    color: #fff;
    content: attr(data-text);
    animation: shake 3s linear infinite alternate-reverse;
  }

  &::before {
    left: -2px;
    text-shadow: 1px 0 $blue;
  }

  &::after {
    left: 2px;
    text-shadow: -1px 0 $red;
    animation-duration: 2s;
  }
}

@keyframes shake {
  $steps: 20;

  @for $i from 0 through $steps {
    #{percentage($i * (1 / $steps))} {
      clip: rect(random(100) + px, 9999px, random(100) + px, 0);
    }
  }
}



/* 气泡背景墙------------------------------------------------------------------------
<ul class="bubble-bgwall">
  <li>Love</li>
  <li>Love</li>
  <li>Love</li>
  <li>Love</li>
  <li>Love</li>
  <li>Love</li>
  <li>Love</li>
  <li>Love</li>
  <li>Love</li>
  <li>Love</li>
</ul>
*/

.bubble-bgwall {
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  width: 1200px;
  height: 100%;

  li {
    display: flex;
    position: absolute;
    bottom: -200px;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    width: 50px;
    height: 50px;
    background-color: rgba(#fff, .15);
    color: #ccc;
    animation: bubble 15s infinite;

    &:nth-child(1) {
      left: 10%;
    }

    &:nth-child(2) {
      left: 20%;
      width: 90px;
      height: 90px;
      animation-duration: 7s;
      animation-delay: 2s;
    }

    &:nth-child(3) {
      left: 25%;
      animation-delay: 4s;
    }

    &:nth-child(4) {
      left: 40%;
      width: 60px;
      height: 60px;
      background-color: rgba(#fff, .3);
      animation-duration: 8s;
    }

    &:nth-child(5) {
      left: 70%;
    }

    &:nth-child(6) {
      left: 80%;
      width: 120px;
      height: 120px;
      background-color: rgba(#fff, .2);
      animation-delay: 3s;
    }

    &:nth-child(7) {
      left: 32%;
      width: 160px;
      height: 160px;
      animation-delay: 2s;
    }

    &:nth-child(8) {
      left: 55%;
      width: 40px;
      height: 40px;
      font-size: 12px;
      animation-duration: 15s;
      animation-delay: 4s;
    }

    &:nth-child(9) {
      left: 25%;
      width: 40px;
      height: 40px;
      background-color: rgba(#fff, .3);
      font-size: 12px;
      animation-duration: 12s;
      animation-delay: 2s;
    }

    &:nth-child(10) {
      left: 85%;
      width: 160px;
      height: 160px;
      animation-delay: 5s;
    }
  }
}

@keyframes bubble {
  0% {
    opacity: .5;
    transform: translateY(0) rotate(45deg);
  }

  25% {
    opacity: .75;
    transform: translateY(-400px) rotate(90deg);
  }

  50% {
    opacity: 1;
    transform: translateY(-600px) rotate(135deg);
  }

  100% {
    opacity: 0;
    transform: translateY(-1000px) rotate(180deg);
  }
}





/*
蛇形边框------------------------------------------------------------------------
<div class="bruce flex-ct-x">
	<div class="snakelike-border"></div>
</div>
*/
.snakelike-border {
  position: relative;
  width: 190px;
  height: 190px;

  &::before,
  &::after {
    position: absolute;
    left: -5px;
    right: -5px;
    top: -5px;
    bottom: -5px;
    border: 5px solid;
    content: "";
    animation: move 5s linear infinite;
  }

  &::before {
    border-color: red;
  }

  &::after {
    border-color: blue;
    animation-delay: -2.5s;
  }
}

@keyframes move {

  0%,
  100% {
    clip: rect(0 200px 5px 0);
  }

  25% {
    clip: rect(0 200px 200px 195px);
  }

  50% {
    clip: rect(195px 200px 200px 0);
  }

  75% {
    clip: rect(0 5px 200px 0);
  }
}


/*
三维立方体------------------------------------------------------------------------
<div class="td-cube">
  <ul>
    <li class="front">1</li>
    <li class="back">2</li>
    <li class="top">3</li>
    <li class="bottom">4</li>
    <li class="left">5</li>
    <li class="right">6</li>
  </ul>
</div>
*/

$width: 150px;
$height: 150px;
$length: 150px;

.td-cube {
  width: $width;
  height: $height;
  perspective: 1000px;

  ul {
    position: relative;
    width: 100%;
    height: 100%;
    transform: rotateX(-15deg) rotateY(15deg);
    transform-style: preserve-3d;
    animation: rotate 5s infinite linear;
  }

  li {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    width: $width;
    height: $height;
    opacity: .8;
    font-size: 50px;
    color: #fff;
  }

  .front {
    background-color: $red;
    transform: translateZ($length / 2);
  }

  .back {
    background-color: purple;
    transform: rotateY(180deg) translateZ($length / 2);
  }

  .top {
    background-color: $range;
    transform: rotateX(90deg) translateZ($height / 2);
  }

  .bottom {
    background-color: blue;
    transform: rotateX(-90deg) translateZ($height / 2);
  }

  .left {
    background-color: cyan;
    transform: rotateY(-90deg) translateZ($width / 2);
  }

  .right {
    background-color: green;
    transform: rotateY(90deg) translateZ($width / 2);
  }
}

@keyframes rotate {
  from {
    transform: rotateY(0) rotateX(0);
  }

  to {
    transform: rotateY(-1turn) rotateX(-1turn);
  }
}


/*螺纹进度条------------------------------------------------------------------------
<div class="thread-progressbar"></div>
*/ 
.thread-progressbar {
	position: relative;
	padding-right: 200px;
	width: 500px;
	height: calc(1.4142 * 20px);
	background: repeating-linear-gradient(45deg, green, green 10px, transparent 11px, transparent 19px, green 20px) 0 0 content-box;
	animation: twill 1s linear infinite;
	&::after {
		position: absolute;
		width: 100%;
		height: 100%;
		background-image: linear-gradient(rgba(#000, .5), rgba(#fff, .5), rgba(#000, .5));
		content: "";
	}
}
@keyframes twill {
	from {
		background-position-y: 0;
	}
	to {
		background-position-y: calc(-1 * 1.4142 * 40px);
	}
}


/*
状态悬浮球------------------------------------------------------------------------
<div class="state-ball warning">
  <div class="wave"></div>
</div>
*/
.state-ball {
  overflow: hidden;
  position: relative;
  padding: 5px;
  border: 3px solid $green;
  border-radius: 100%;
  width: 150px;
  height: 150px;
  background-color: #fff;

  &::before,
  &::after {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 20;
    margin-left: -100px;
    width: 200px;
    height: 200px;
    content: "";
  }

  &::before {
    margin-top: -150px;
    border-radius: 45%;
    background-color: rgba(#fff, .5);
    animation: rotate 10s linear -5s infinite;
  }

  &::after {
    margin-top: -160px;
    border-radius: 40%;
    background-color: rgba(#fff, .8);
    animation: rotate 15s infinite;
  }

  &.warning {
    border-color: orange;

    .wave {
      background-image: linear-gradient(-180deg, #f0c78a 13%, orange 91%);
    }
  }

  &.danger {
    border-color: $red;

    .wave {
      background-image: linear-gradient(-180deg, #f78989 13%, $red 91%);
    }
  }

  .wave {
    position: relative;
    border-radius: 100%;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(-180deg, #af8 13%, $green 91%);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(1turn);
  }
}