【分享】破坏风时钟动画

于 2024-07-29 13:31:26 发布
阅读量213 收藏 3
点赞数 3
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44070058/article/details/140768952
版权

今天分享一个很有趣的动画：破坏风时钟动画

在这里插入图片描述

完整源码：

源码地址：https://code.juejin.cn/pen/7355385801644965938

<template>
  <div class="container">
    <a class="switcher" href="#"></a>
    <div class="screen glitch">
      <div class="clock is-off">
        <span class="time">{{ date }}</span>
      </div>
      <div class="figure"></div>
      <div class="figure-mask"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const updateDate = () => {
  const newDate = new Date();
  newDate.setDate(newDate.getDate());

  const hours = new Date().getHours();
  const seconds = new Date().getSeconds();
  const minutes = new Date().getMinutes();

  const realTime =
    (hours < 10 ? '0' : '') +
    hours +
    ' : ' +
    (minutes < 10 ? '0' : '') +
    minutes +
    ' : ' +
    (seconds < 10 ? '0' : '') +
    seconds;
  date.value = realTime;
};

const date = ref('');

onMounted(() => {
  updateDate();
  setInterval(() => {
    updateDate();
  }, 1000);
});
</script>

<style scoped>
.container {
  position: relative;
  height: 200px;
  color: #fff;
}
a.switcher {
  display: block;
  position: fixed;
  text-decoration: none;
  z-index: 999999999999;
  right: 20px;
  bottom: 20px;
  width: 16px;
  height: 16px;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 50%;
  opacity: 0.15;
  transition: opacity 0.15s;
}
a.switcher:hover {
  opacity: 1;
}
a.switcher:before {
  display: block;
  content: '';
  position: absolute;
  border-radius: 4px;
  width: 2px;
  height: 5px;
  background: #fff;
  top: 0;
  left: 5px;
}
.screen {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.clock {
  display: block;
  position: absolute;
  z-index: 9;
  width: 720px;
  height: 128px;
  text-align: center;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  cursor: default;
}
.clock span {
  display: block;
  position: relative;
  font-size: 128px;
  line-height: 1;
}
.clock.is-off {
  -webkit-animation: is-off 2s linear infinite !important;
  animation: is-off 2s linear infinite !important;
}
.glitch:before {
  position: absolute;
  z-index: 999999;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation: bg-move 2s linear infinite;
  animation: bg-move 2s linear infinite;
  background-size: 100% 8px;
  background-image: linear-gradient(
    0,
    rgba(255, 255, 255, 0.05) 10%,
    transparent 10%,
    transparent 50%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.05) 60%,
    transparent 60%,
    transparent
  );
}
.glitch .figure,
.glitch .figure-mask {
  -webkit-transform: skewX(0deg) scaleY(1);
  transform: skewX(0deg) scaleY(1);
  -webkit-animation: tr-bag 4s linear infinite;
  animation: tr-bag 4s linear infinite;
}
.glitch .clock {
  -webkit-transform: skewX(0deg) scaleY(1);
  transform: skewX(0deg) scaleY(1);
  -webkit-animation: clock-bag 4s linear infinite;
  animation: clock-bag 4s linear infinite;
}
.glitch .clock span:before,
.glitch .clock span:after {
  display: block;
  content: attr(data-time);
  position: absolute;
  top: 0;
  color: #fff;
  background: #111;
  overflow: hidden;
  width: 720px;
  height: 128px;
  clip: rect(0, 900px, 0, 0);
}
.glitch .clock span:before {
  left: -2px;
  text-shadow: 2px 0 #00f;
  animation: c2 1s infinite linear alternate-reverse;
}
.glitch .clock span:after {
  left: 3px;
  text-shadow: -2px 0 #f00;
  animation: c1 2s infinite linear alternate-reverse;
}
@-webkit-keyframes is-off {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  56% {
    opacity: 0;
  }
  57% {
    opacity: 0;
  }
  58% {
    opacity: 1;
  }
  71% {
    -webkit-transform: scaleY(1) skewX(0deg);
    transform: scaleY(1) skewX(0deg);
  }
  72% {
    -webkit-transform: scaleY(3) skewX(-60deg);
    transform: scaleY(3) skewX(-60deg);
  }
  73% {
    -webkit-transform: scaleY(1) skewX(0deg);
    transform: scaleY(1) skewX(0deg);
  }
  80% {
    opacity: 1;
  }
  81% {
    opacity: 0;
  }
  84% {
    opacity: 0;
  }
  85% {
    opacity: 1;
  }
  91% {
    -webkit-transform: scaleX(1) scaleY(1) skewX(0deg);
    transform: scaleX(1) scaleY(1) skewX(0deg);
    color: #fff;
  }
  92% {
    -webkit-transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
    transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
    color: #008000;
  }
  93% {
    -webkit-transform: scaleX(1) scaleY(1) skewX(0deg);
    transform: scaleX(1) scaleY(1) skewX(0deg);
    color: #fff;
  }
}
@keyframes is-off {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  56% {
    opacity: 0;
  }
  57% {
    opacity: 0;
  }
  58% {
    opacity: 1;
  }
  71% {
    -webkit-transform: scaleY(1) skewX(0deg);
    transform: scaleY(1) skewX(0deg);
  }
  72% {
    -webkit-transform: scaleY(3) skewX(-60deg);
    transform: scaleY(3) skewX(-60deg);
  }
  73% {
    -webkit-transform: scaleY(1) skewX(0deg);
    transform: scaleY(1) skewX(0deg);
  }
  80% {
    opacity: 1;
  }
  81% {
    opacity: 0;
  }
  84% {
    opacity: 0;
  }
  85% {
    opacity: 1;
  }
  91% {
    -webkit-transform: scaleX(1) scaleY(1) skewX(0deg);
    transform: scaleX(1) scaleY(1) skewX(0deg);
    color: #fff;
  }
  92% {
    -webkit-transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
    transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
    color: #008000;
  }
  93% {
    -webkit-transform: scaleX(1) scaleY(1) skewX(0deg);
    transform: scaleX(1) scaleY(1) skewX(0deg);
    color: #fff;
  }
}
@-webkit-keyframes c1 {
  0% {
    clip: rect(45px, 9999px, 38px, 0);
  }
  5% {
    clip: rect(39px, 9999px, 78px, 0);
  }
  10% {
    clip: rect(13px, 9999px, 55px, 0);
  }
  15.000000000000002% {
    clip: rect(20px, 9999px, 17px, 0);
  }
  20% {
    clip: rect(58px, 9999px, 75px, 0);
  }
  25% {
    clip: rect(98px, 9999px, 62px, 0);
  }
  30.000000000000004% {
    clip: rect(43px, 9999px, 15px, 0);
  }
  35.00000000000001% {
    clip: rect(10px, 9999px, 97px, 0);
  }
  40% {
    clip: rect(28px, 9999px, 48px, 0);
  }
  45% {
    clip: rect(92px, 9999px, 53px, 0);
  }
  50% {
    clip: rect(21px, 9999px, 95px, 0);
  }
  55% {
    clip: rect(88px, 9999px, 74px, 0);
  }
  60.00000000000001% {
    clip: rect(84px, 9999px, 34px, 0);
  }
  65% {
    clip: rect(85px, 9999px, 71px, 0);
  }
  70.00000000000001% {
    clip: rect(45px, 9999px, 71px, 0);
  }
  75% {
    clip: rect(73px, 9999px, 16px, 0);
  }
  80% {
    clip: rect(48px, 9999px, 90px, 0);
  }
  85% {
    clip: rect(13px, 9999px, 89px, 0);
  }
  90% {
    clip: rect(37px, 9999px, 37px, 0);
  }
  95% {
    clip: rect(3px, 9999px, 16px, 0);
  }
  100% {
    clip: rect(35px, 9999px, 44px, 0);
  }
}
@keyframes c1 {
  0% {
    clip: rect(45px, 9999px, 38px, 0);
  }
  5% {
    clip: rect(39px, 9999px, 78px, 0);
  }
  10% {
    clip: rect(13px, 9999px, 55px, 0);
  }
  15.000000000000002% {
    clip: rect(20px, 9999px, 17px, 0);
  }
  20% {
    clip: rect(58px, 9999px, 75px, 0);
  }
  25% {
    clip: rect(98px, 9999px, 62px, 0);
  }
  30.000000000000004% {
    clip: rect(43px, 9999px, 15px, 0);
  }
  35.00000000000001% {
    clip: rect(10px, 9999px, 97px, 0);
  }
  40% {
    clip: rect(28px, 9999px, 48px, 0);
  }
  45% {
    clip: rect(92px, 9999px, 53px, 0);
  }
  50% {
    clip: rect(21px, 9999px, 95px, 0);
  }
  55% {
    clip: rect(88px, 9999px, 74px, 0);
  }
  60.00000000000001% {
    clip: rect(84px, 9999px, 34px, 0);
  }
  65% {
    clip: rect(85px, 9999px, 71px, 0);
  }
  70.00000000000001% {
    clip: rect(45px, 9999px, 71px, 0);
  }
  75% {
    clip: rect(73px, 9999px, 16px, 0);
  }
  80% {
    clip: rect(48px, 9999px, 90px, 0);
  }
  85% {
    clip: rect(13px, 9999px, 89px, 0);
  }
  90% {
    clip: rect(37px, 9999px, 37px, 0);
  }
  95% {
    clip: rect(3px, 9999px, 16px, 0);
  }
  100% {
    clip: rect(35px, 9999px, 44px, 0);
  }
}
@-webkit-keyframes c2 {
  0% {
    clip: rect(78px, 9999px, 41px, 0);
  }
  5% {
    clip: rect(72px, 9999px, 71px, 0);
  }
  10% {
    clip: rect(73px, 9999px, 58px, 0);
  }
  15.000000000000002% {
    clip: rect(55px, 9999px, 14px, 0);
  }
  20% {
    clip: rect(8px, 9999px, 12px, 0);
  }
  25% {
    clip: rect(55px, 9999px, 53px, 0);
  }
  30.000000000000004% {
    clip: rect(85px, 9999px, 11px, 0);
  }
  35.00000000000001% {
    clip: rect(87px, 9999px, 75px, 0);
  }
  40% {
    clip: rect(41px, 9999px, 18px, 0);
  }
  45% {
    clip: rect(52px, 9999px, 70px, 0);
  }
  50% {
    clip: rect(41px, 9999px, 8px, 0);
  }
  55% {
    clip: rect(69px, 9999px, 98px, 0);
  }
  60.00000000000001% {
    clip: rect(8px, 9999px, 92px, 0);
  }
  65% {
    clip: rect(88px, 9999px, 16px, 0);
  }
  70.00000000000001% {
    clip: rect(42px, 9999px, 96px, 0);
  }
  75% {
    clip: rect(7px, 9999px, 29px, 0);
  }
  80% {
    clip: rect(38px, 9999px, 4px, 0);
  }
  85% {
    clip: rect(22px, 9999px, 82px, 0);
  }
  90% {
    clip: rect(31px, 9999px, 97px, 0);
  }
  95% {
    clip: rect(71px, 9999px, 99px, 0);
  }
  100% {
    clip: rect(42px, 9999px, 95px, 0);
  }
  23% {
    -webkit-transform: scaleX(0.8);
    transform: scaleX(0.8);
  }
}
@keyframes c2 {
  0% {
    clip: rect(78px, 9999px, 41px, 0);
  }
  5% {
    clip: rect(72px, 9999px, 71px, 0);
  }
  10% {
    clip: rect(73px, 9999px, 58px, 0);
  }
  15.000000000000002% {
    clip: rect(55px, 9999px, 14px, 0);
  }
  20% {
    clip: rect(8px, 9999px, 12px, 0);
  }
  25% {
    clip: rect(55px, 9999px, 53px, 0);
  }
  30.000000000000004% {
    clip: rect(85px, 9999px, 11px, 0);
  }
  35.00000000000001% {
    clip: rect(87px, 9999px, 75px, 0);
  }
  40% {
    clip: rect(41px, 9999px, 18px, 0);
  }
  45% {
    clip: rect(52px, 9999px, 70px, 0);
  }
  50% {
    clip: rect(41px, 9999px, 8px, 0);
  }
  55% {
    clip: rect(69px, 9999px, 98px, 0);
  }
  60.00000000000001% {
    clip: rect(8px, 9999px, 92px, 0);
  }
  65% {
    clip: rect(88px, 9999px, 16px, 0);
  }
  70.00000000000001% {
    clip: rect(42px, 9999px, 96px, 0);
  }
  75% {
    clip: rect(7px, 9999px, 29px, 0);
  }
  80% {
    clip: rect(38px, 9999px, 4px, 0);
  }
  85% {
    clip: rect(22px, 9999px, 82px, 0);
  }
  90% {
    clip: rect(31px, 9999px, 97px, 0);
  }
  95% {
    clip: rect(71px, 9999px, 99px, 0);
  }
  100% {
    clip: rect(42px, 9999px, 95px, 0);
  }
  23% {
    -webkit-transform: scaleX(0.8);
    transform: scaleX(0.8);
  }
}
@-webkit-keyframes clock-bag {
  0% {
    -webkit-transform: translate(5px, 3px);
    transform: translate(5px, 3px);
  }
  2% {
    -webkit-transform: translate(4px, 4px);
    transform: translate(4px, 4px);
  }
  4% {
    -webkit-transform: translate(2px, 4px);
    transform: translate(2px, 4px);
  }
  6% {
    -webkit-transform: translate(1px, 5px);
    transform: translate(1px, 5px);
  }
  8% {
    -webkit-transform: translate(1px, 5px);
    transform: translate(1px, 5px);
  }
  10% {
    -webkit-transform: translate(2px, 1px);
    transform: translate(2px, 1px);
  }
  12% {
    -webkit-transform: translate(4px, 2px);
    transform: translate(4px, 2px);
  }
  14.000000000000002% {
    -webkit-transform: translate(3px, 5px);
    transform: translate(3px, 5px);
  }
  16% {
    -webkit-transform: translate(4px, 1px);
    transform: translate(4px, 1px);
  }
  18% {
    -webkit-transform: translate(1px, 3px);
    transform: translate(1px, 3px);
  }
  20% {
    -webkit-transform: translate(4px, 1px);
    transform: translate(4px, 1px);
  }
  22% {
    -webkit-transform: translate(3px, 4px);
    transform: translate(3px, 4px);
  }
  24% {
    -webkit-transform: translate(5px, 2px);
    transform: translate(5px, 2px);
  }
  26% {
    -webkit-transform: translate(1px, 4px);
    transform: translate(1px, 4px);
  }
  28.000000000000004% {
    -webkit-transform: translate(5px, 1px);
    transform: translate(5px, 1px);
  }
  30% {
    -webkit-transform: translate(2px, 5px);
    transform: translate(2px, 5px);
  }
  32% {
    -webkit-transform: translate(2px, 4px);
    transform: translate(2px, 4px);
  }
  34% {
    -webkit-transform: translate(2px, 4px);
    transform: translate(2px, 4px);
  }
  36% {
    -webkit-transform: translate(2px, 5px);
    transform: translate(2px, 5px);
  }
  38% {
    -webkit-transform: translate(5px, 4px);
    transform: translate(5px, 4px);
  }
  40% {
    -webkit-transform: translate(2px, 1px);
    transform: translate(2px, 1px);
  }
  42% {
    -webkit-transform: translate(3px, 4px);
    transform: translate(3px, 4px);
  }
  44% {
    -webkit-transform: translate(4px, 5px);
    transform: translate(4px, 5px);
  }
  46.00000000000001% {
    -webkit-transform: translate(4px, 4px);
    transform: translate(4px, 4px);
  }
  48% {
    -webkit-transform: translate(1px, 3px);
    transform: translate(1px, 3px);
  }
  50% {
    -webkit-transform: translate(4px, 3px);
    transform: translate(4px, 3px);
  }
  52% {
    -webkit-transform: translate(3px, 2px);
    transform: translate(3px, 2px);
  }
  54% {
    -webkit-transform: translate(5px, 3px);
    transform: translate(5px, 3px);
  }
  56.00000000000001% {
    -webkit-transform: translate(2px, 3px);
    transform: translate(2px, 3px);
  }
  58% {
    -webkit-transform: translate(4px, 3px);
    transform: translate(4px, 3px);
  }
  60% {
    -webkit-transform: translate(1px, 4px);
    transform: translate(1px, 4px);
  }
  62% {
    -webkit-transform: translate(4px, 3px);
    transform: translate(4px, 3px);
  }
  64% {
    -webkit-transform: translate(2px, 4px);
    transform: translate(2px, 4px);
  }
  66% {
    -webkit-transform: translate(3px, 4px);
    transform: translate(3px, 4px);
  }
  68% {
    -webkit-transform: translate(4px, 2px);
    transform: translate(4px, 2px);
  }
  70.00000000000001% {
    -webkit-transform: translate(4px, 1px);
    transform: translate(4px, 1px);
  }
  72% {
    -webkit-transform: translate(4px, 1px);
    transform: translate(4px, 1px);
  }
  74% {
    -webkit-transform: translate(3px, 4px);
    transform: translate(3px, 4px);
  }
  76% {
    -webkit-transform: translate(1px, 5px);
    transform: translate(1px, 5px);
  }
  78% {
    -webkit-transform: translate(2px, 5px);
    transform: translate(2px, 5px);
  }
  80% {
    -webkit-transform: translate(5px, 5px);
    transform: translate(5px, 5px);
  }
  82.00000000000001% {
    -webkit-transform: translate(1px, 5px);
    transform: translate(1px, 5px);
  }
  84% {
    -webkit-transform: translate(5px, 2px);
    transform: translate(5px, 2px);
  }
  86% {
    -webkit-transform: translate(2px, 5px);
    transform: translate(2px, 5px);
  }
  88% {
    -webkit-transform: translate(4px, 3px);
    transform: translate(4px, 3px);
  }
  90% {
    -webkit-transform: translate(5px, 3px);
    transform: translate(5px, 3px);
  }
  92.00000000000001% {
    -webkit-transform: translate(2px, 5px);
    transform: translate(2px, 5px);
  }
  94% {
    -webkit-transform: translate(1px, 5px);
    transform: translate(1px, 5px);
  }
  96% {
    -webkit-transform: translate(3px, 4px);
    transform: translate(3px, 4px);
  }
  98% {
    -webkit-transform: translate(5px, 4px);
    transform: translate(5px, 4px);
  }
  100% {
    -webkit-transform: translate(4px, 3px);
    transform: translate(4px, 3px);
  }
  1% {
    -webkit-transform: scaleY(1) skewX(0deg);
    transform: scaleY(1) skewX(0deg);
  }
  1.5% {
    -webkit-transform: scaleY(3) skewX(-60deg);
    transform: scaleY(3) skewX(-60deg);
  }
  2% {
    -webkit-transform: scaleY(1) skewX(0deg);
    transform: scaleY(1) skewX(0deg);
  }
  51% {
    -webkit-transform: scaleX(1) scaleY(1) skewX(0deg);
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
  52% {
    -webkit-transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
    transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
  }
  53% {
    -webkit-transform: scaleX(1) scaleY(1) skewX(0deg);
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
}
@keyframes clock-bag {
  0% {
    -webkit-transform: translate(5px, 3px);
    transform: translate(5px, 3px);
  }
  2% {
    -webkit-transform: translate(4px, 4px);
    transform: translate(4px, 4px);
  }
  4% {
    -webkit-transform: translate(2px, 4px);
    transform: translate(2px, 4px);
  }
  6% {
    -webkit-transform: translate(1px, 5px);
    transform: translate(1px, 5px);
  }
  8% {
    -webkit-transform: translate(1px, 5px);
    transform: translate(1px, 5px);
  }
  10% {
    -webkit-transform: translate(2px, 1px);
    transform: translate(2px, 1px);
  }
  12% {
    -webkit-transform: translate(4px, 2px);
    transform: translate(4px, 2px);
  }
  14.000000000000002% {
    -webkit-transform: translate(3px, 5px);
    transform: translate(3px, 5px);
  }
  16% {
    -webkit-transform: translate(4px, 1px);
    transform: translate(4px, 1px);
  }
  18% {
    -webkit-transform: translate(1px, 3px);
    transform: translate(1px, 3px);
  }
  20% {
    -webkit-transform: translate(4px, 1px);
    transform: translate(4px, 1px);
  }
  22% {
    -webkit-transform: translate(3px, 4px);
    transform: translate(3px, 4px);
  }
  24% {
    -webkit-transform: translate(5px, 2px);
    transform: translate(5px, 2px);
  }
  26% {
    -webkit-transform: translate(1px, 4px);
    transform: translate(1px, 4px);
  }
  28.000000000000004% {
    -webkit-transform: translate(5px, 1px);
    transform: translate(5px, 1px);
  }
  30% {
    -webkit-transform: translate(2px, 5px);
    transform: translate(2px, 5px);
  }
  32% {
    -webkit-transform: translate(2px, 4px);
    transform: translate(2px, 4px);
  }
  34% {
    -webkit-transform: translate(2px, 4px);
    transform: translate(2px, 4px);
  }
  36% {
    -webkit-transform: translate(2px, 5px);
    transform: translate(2px, 5px);
  }
  38% {
    -webkit-transform: translate(5px, 4px);
    transform: translate(5px, 4px);
  }
  40% {
    -webkit-transform: translate(2px, 1px);
    transform: translate(2px, 1px);
  }
  42% {
    -webkit-transform: translate(3px, 4px);
    transform: translate(3px, 4px);
  }
  44% {
    -webkit-transform: translate(4px, 5px);
    transform: translate(4px, 5px);
  }
  46.00000000000001% {
    -webkit-transform: translate(4px, 4px);
    transform: translate(4px, 4px);
  }
  48% {
    -webkit-transform: translate(1px, 3px);
    transform: translate(1px, 3px);
  }
  50% {
    -webkit-transform: translate(4px, 3px);
    transform: translate(4px, 3px);
  }
  52% {
    -webkit-transform: translate(3px, 2px);
    transform: translate(3px, 2px);
  }
  54% {
    -webkit-transform: translate(5px, 3px);
    transform: translate(5px, 3px);
  }
  56.00000000000001% {
    -webkit-transform: translate(2px, 3px);
    transform: translate(2px, 3px);
  }
  58% {
    -webkit-transform: translate(4px, 3px);
    transform: translate(4px, 3px);
  }
  60% {
    -webkit-transform: translate(1px, 4px);
    transform: translate(1px, 4px);
  }
  62% {
    -webkit-transform: translate(4px, 3px);
    transform: translate(4px, 3px);
  }
  64% {
    -webkit-transform: translate(2px, 4px);
    transform: translate(2px, 4px);
  }
  66% {
    -webkit-transform: translate(3px, 4px);
    transform: translate(3px, 4px);
  }
  68% {
    -webkit-transform: translate(4px, 2px);
    transform: translate(4px, 2px);
  }
  70.00000000000001% {
    -webkit-transform: translate(4px, 1px);
    transform: translate(4px, 1px);
  }
  72% {
    -webkit-transform: translate(4px, 1px);
    transform: translate(4px, 1px);
  }
  74% {
    -webkit-transform: translate(3px, 4px);
    transform: translate(3px, 4px);
  }
  76% {
    -webkit-transform: translate(1px, 5px);
    transform: translate(1px, 5px);
  }
  78% {
    -webkit-transform: translate(2px, 5px);
    transform: translate(2px, 5px);
  }
  80% {
    -webkit-transform: translate(5px, 5px);
    transform: translate(5px, 5px);
  }
  82.00000000000001% {
    -webkit-transform: translate(1px, 5px);
    transform: translate(1px, 5px);
  }
  84% {
    -webkit-transform: translate(5px, 2px);
    transform: translate(5px, 2px);
  }
  86% {
    -webkit-transform: translate(2px, 5px);
    transform: translate(2px, 5px);
  }
  88% {
    -webkit-transform: translate(4px, 3px);
    transform: translate(4px, 3px);
  }
  90% {
    -webkit-transform: translate(5px, 3px);
    transform: translate(5px, 3px);
  }
  92.00000000000001% {
    -webkit-transform: translate(2px, 5px);
    transform: translate(2px, 5px);
  }
  94% {
    -webkit-transform: translate(1px, 5px);
    transform: translate(1px, 5px);
  }
  96% {
    -webkit-transform: translate(3px, 4px);
    transform: translate(3px, 4px);
  }
  98% {
    -webkit-transform: translate(5px, 4px);
    transform: translate(5px, 4px);
  }
  100% {
    -webkit-transform: translate(4px, 3px);
    transform: translate(4px, 3px);
  }
  1% {
    -webkit-transform: scaleY(1) skewX(0deg);
    transform: scaleY(1) skewX(0deg);
  }
  1.5% {
    -webkit-transform: scaleY(3) skewX(-60deg);
    transform: scaleY(3) skewX(-60deg);
  }
  2% {
    -webkit-transform: scaleY(1) skewX(0deg);
    transform: scaleY(1) skewX(0deg);
  }
  51% {
    -webkit-transform: scaleX(1) scaleY(1) skewX(0deg);
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
  52% {
    -webkit-transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
    transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
  }
  53% {
    -webkit-transform: scaleX(1) scaleY(1) skewX(0deg);
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
}
@-webkit-keyframes tr-bag {
  0% {
    -webkit-transform: translate(3px, 1px);
    transform: translate(3px, 1px);
  }
  2% {
    -webkit-transform: translate(5px, 4px);
    transform: translate(5px, 4px);
  }
  4% {
    -webkit-transform: translate(4px, 5px);
    transform: translate(4px, 5px);
  }
  6% {
    -webkit-transform: translate(3px, 5px);
    transform: translate(3px, 5px);
  }
  8% {
    -webkit-transform: translate(1px, 3px);
    transform: translate(1px, 3px);
  }
  10% {
    -webkit-transform: translate(1px, 5px);
    transform: translate(1px, 5px);
  }
  12% {
    -webkit-transform: translate(2px, 4px);
    transform: translate(2px, 4px);
  }
  14.000000000000002% {
    -webkit-transform: translate(4px, 4px);
    transform: translate(4px, 4px);
  }
  16% {
    -webkit-transform: translate(3px, 5px);
    transform: translate(3px, 5px);
  }
  18% {
    -webkit-transform: translate(5px, 5px);
    transform: translate(5px, 5px);
  }
  20% {
    -webkit-transform: translate(2px, 3px);
    transform: translate(2px, 3px);
  }
  22% {
    -webkit-transform: translate(4px, 5px);
    transform: translate(4px, 5px);
  }
  24% {
    -webkit-transform: translate(3px, 3px);
    transform: translate(3px, 3px);
  }
  26% {
    -webkit-transform: translate(1px, 3px);
    transform: translate(1px, 3px);
  }
  28.000000000000004% {
    -webkit-transform: translate(5px, 5px);
    transform: translate(5px, 5px);
  }
  30% {
    -webkit-transform: translate(1px, 4px);
    transform: translate(1px, 4px);
  }
  32% {
    -webkit-transform: translate(1px, 3px);
    transform: translate(1px, 3px);
  }
  34% {
    -webkit-transform: translate(5px, 3px);
    transform: translate(5px, 3px);
  }
  36% {
    -webkit-transform: translate(2px, 3px);
    transform: translate(2px, 3px);
  }
  38% {
    -webkit-transform: translate(1px, 2px);
    transform: translate(1px, 2px);
  }
  40% {
    -webkit-transform: translate(1px, 3px);
    transform: translate(1px, 3px);
  }
  42% {
    -webkit-transform: translate(4px, 1px);
    transform: translate(4px, 1px);
  }
  44% {
    -webkit-transform: translate(3px, 2px);
    transform: translate(3px, 2px);
  }
  46.00000000000001% {
    -webkit-transform: translate(5px, 1px);
    transform: translate(5px, 1px);
  }
  48% {
    -webkit-transform: translate(1px, 2px);
    transform: translate(1px, 2px);
  }
  50% {
    -webkit-transform: translate(2px, 1px);
    transform: translate(2px, 1px);
  }
  52% {
    -webkit-transform: translate(3px, 5px);
    transform: translate(3px, 5px);
  }
  54% {
    -webkit-transform: translate(2px, 1px);
    transform: translate(2px, 1px);
  }
  56.00000000000001% {
    -webkit-transform: translate(5px, 2px);
    transform: translate(5px, 2px);
  }
  58% {
    -webkit-transform: translate(5px, 4px);
    transform: translate(5px, 4px);
  }
  60% {
    -webkit-transform: translate(2px, 5px);
    transform: translate(2px, 5px);
  }
  62% {
    -webkit-transform: translate(1px, 5px);
    transform: translate(1px, 5px);
  }
  64% {
    -webkit-transform: translate(2px, 3px);
    transform: translate(2px, 3px);
  }
  66% {
    -webkit-transform: translate(2px, 5px);
    transform: translate(2px, 5px);
  }
  68% {
    -webkit-transform: translate(5px, 3px);
    transform: translate(5px, 3px);
  }
  70.00000000000001% {
    -webkit-transform: translate(1px, 1px);
    transform: translate(1px, 1px);
  }
  72% {
    -webkit-transform: translate(5px, 1px);
    transform: translate(5px, 1px);
  }
  74% {
    -webkit-transform: translate(3px, 3px);
    transform: translate(3px, 3px);
  }
  76% {
    -webkit-transform: translate(1px, 1px);
    transform: translate(1px, 1px);
  }
  78% {
    -webkit-transform: translate(4px, 2px);
    transform: translate(4px, 2px);
  }
  80% {
    -webkit-transform: translate(4px, 2px);
    transform: translate(4px, 2px);
  }
  82.00000000000001% {
    -webkit-transform: translate(4px, 4px);
    transform: translate(4px, 4px);
  }
  84% {
    -webkit-transform: translate(3px, 3px);
    transform: translate(3px, 3px);
  }
  86% {
    -webkit-transform: translate(5px, 4px);
    transform: translate(5px, 4px);
  }
  88% {
    -webkit-transform: translate(3px, 3px);
    transform: translate(3px, 3px);
  }
  90% {
    -webkit-transform: translate(4px, 4px);
    transform: translate(4px, 4px);
  }
  92.00000000000001% {
    -webkit-transform: translate(3px, 4px);
    transform: translate(3px, 4px);
  }
  94% {
    -webkit-transform: translate(4px, 2px);
    transform: translate(4px, 2px);
  }
  96% {
    -webkit-transform: translate(1px, 1px);
    transform: translate(1px, 1px);
  }
  98% {
    -webkit-transform: translate(1px, 5px);
    transform: translate(1px, 5px);
  }
  100% {
    -webkit-transform: translate(4px, 2px);
    transform: translate(4px, 2px);
  }
  1% {
    -webkit-transform: scaleY(1) skewX(0deg);
    transform: scaleY(1) skewX(0deg);
  }
  1.5% {
    -webkit-transform: scaleY(3) skewX(-60deg);
    transform: scaleY(3) skewX(-60deg);
  }
  2% {
    -webkit-transform: scaleY(1) skewX(0deg);
    transform: scaleY(1) skewX(0deg);
  }
  51% {
    -webkit-transform: scaleX(1) scaleY(1) skewX(0deg);
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
  52% {
    -webkit-transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
    transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
  }
  53% {
    -webkit-transform: scaleX(1) scaleY(1) skewX(0deg);
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
}
@keyframes tr-bag {
  0% {
    -webkit-transform: translate(3px, 1px);
    transform: translate(3px, 1px);
  }
  2% {
    -webkit-transform: translate(5px, 4px);
    transform: translate(5px, 4px);
  }
  4% {
    -webkit-transform: translate(4px, 5px);
    transform: translate(4px, 5px);
  }
  6% {
    -webkit-transform: translate(3px, 5px);
    transform: translate(3px, 5px);
  }
  8% {
    -webkit-transform: translate(1px, 3px);
    transform: translate(1px, 3px);
  }
  10% {
    -webkit-transform: translate(1px, 5px);
    transform: translate(1px, 5px);
  }
  12% {
    -webkit-transform: translate(2px, 4px);
    transform: translate(2px, 4px);
  }
  14.000000000000002% {
    -webkit-transform: translate(4px, 4px);
    transform: translate(4px, 4px);
  }
  16% {
    -webkit-transform: translate(3px, 5px);
    transform: translate(3px, 5px);
  }
  18% {
    -webkit-transform: translate(5px, 5px);
    transform: translate(5px, 5px);
  }
  20% {
    -webkit-transform: translate(2px, 3px);
    transform: translate(2px, 3px);
  }
  22% {
    -webkit-transform: translate(4px, 5px);
    transform: translate(4px, 5px);
  }
  24% {
    -webkit-transform: translate(3px, 3px);
    transform: translate(3px, 3px);
  }
  26% {
    -webkit-transform: translate(1px, 3px);
    transform: translate(1px, 3px);
  }
  28.000000000000004% {
    -webkit-transform: translate(5px, 5px);
    transform: translate(5px, 5px);
  }
  30% {
    -webkit-transform: translate(1px, 4px);
    transform: translate(1px, 4px);
  }
  32% {
    -webkit-transform: translate(1px, 3px);
    transform: translate(1px, 3px);
  }
  34% {
    -webkit-transform: translate(5px, 3px);
    transform: translate(5px, 3px);
  }
  36% {
    -webkit-transform: translate(2px, 3px);
    transform: translate(2px, 3px);
  }
  38% {
    -webkit-transform: translate(1px, 2px);
    transform: translate(1px, 2px);
  }
  40% {
    -webkit-transform: translate(1px, 3px);
    transform: translate(1px, 3px);
  }
  42% {
    -webkit-transform: translate(4px, 1px);
    transform: translate(4px, 1px);
  }
  44% {
    -webkit-transform: translate(3px, 2px);
    transform: translate(3px, 2px);
  }
  46.00000000000001% {
    -webkit-transform: translate(5px, 1px);
    transform: translate(5px, 1px);
  }
  48% {
    -webkit-transform: translate(1px, 2px);
    transform: translate(1px, 2px);
  }
  50% {
    -webkit-transform: translate(2px, 1px);
    transform: translate(2px, 1px);
  }
  52% {
    -webkit-transform: translate(3px, 5px);
    transform: translate(3px, 5px);
  }
  54% {
    -webkit-transform: translate(2px, 1px);
    transform: translate(2px, 1px);
  }
  56.00000000000001% {
    -webkit-transform: translate(5px, 2px);
    transform: translate(5px, 2px);
  }
  58% {
    -webkit-transform: translate(5px, 4px);
    transform: translate(5px, 4px);
  }
  60% {
    -webkit-transform: translate(2px, 5px);
    transform: translate(2px, 5px);
  }
  62% {
    -webkit-transform: translate(1px, 5px);
    transform: translate(1px, 5px);
  }
  64% {
    -webkit-transform: translate(2px, 3px);
    transform: translate(2px, 3px);
  }
  66% {
    -webkit-transform: translate(2px, 5px);
    transform: translate(2px, 5px);
  }
  68% {
    -webkit-transform: translate(5px, 3px);
    transform: translate(5px, 3px);
  }
  70.00000000000001% {
    -webkit-transform: translate(1px, 1px);
    transform: translate(1px, 1px);
  }
  72% {
    -webkit-transform: translate(5px, 1px);
    transform: translate(5px, 1px);
  }
  74% {
    -webkit-transform: translate(3px, 3px);
    transform: translate(3px, 3px);
  }
  76% {
    -webkit-transform: translate(1px, 1px);
    transform: translate(1px, 1px);
  }
  78% {
    -webkit-transform: translate(4px, 2px);
    transform: translate(4px, 2px);
  }
  80% {
    -webkit-transform: translate(4px, 2px);
    transform: translate(4px, 2px);
  }
  82.00000000000001% {
    -webkit-transform: translate(4px, 4px);
    transform: translate(4px, 4px);
  }
  84% {
    -webkit-transform: translate(3px, 3px);
    transform: translate(3px, 3px);
  }
  86% {
    -webkit-transform: translate(5px, 4px);
    transform: translate(5px, 4px);
  }
  88% {
    -webkit-transform: translate(3px, 3px);
    transform: translate(3px, 3px);
  }
  90% {
    -webkit-transform: translate(4px, 4px);
    transform: translate(4px, 4px);
  }
  92.00000000000001% {
    -webkit-transform: translate(3px, 4px);
    transform: translate(3px, 4px);
  }
  94% {
    -webkit-transform: translate(4px, 2px);
    transform: translate(4px, 2px);
  }
  96% {
    -webkit-transform: translate(1px, 1px);
    transform: translate(1px, 1px);
  }
  98% {
    -webkit-transform: translate(1px, 5px);
    transform: translate(1px, 5px);
  }
  100% {
    -webkit-transform: translate(4px, 2px);
    transform: translate(4px, 2px);
  }
  1% {
    -webkit-transform: scaleY(1) skewX(0deg);
    transform: scaleY(1) skewX(0deg);
  }
  1.5% {
    -webkit-transform: scaleY(3) skewX(-60deg);
    transform: scaleY(3) skewX(-60deg);
  }
  2% {
    -webkit-transform: scaleY(1) skewX(0deg);
    transform: scaleY(1) skewX(0deg);
  }
  51% {
    -webkit-transform: scaleX(1) scaleY(1) skewX(0deg);
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
  52% {
    -webkit-transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
    transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
  }
  53% {
    -webkit-transform: scaleX(1) scaleY(1) skewX(0deg);
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
}
@-webkit-keyframes bg-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -32px;
  }
}
@keyframes bg-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -32px;
  }
}
</style>

结语
感谢您的阅读~

汤姆比基尼
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
计算机基础知识练习题
s13596191285的博客
06-23 21
【习题1】计算机电路制造采用超大规模集成技术的属于_______计算机。A．第二代 B．第三代 C．第四代 D．第五代分析：传统计算机发展过程中“代”的划分，目前比较一致的看法是：第一代为电子管计算机，第二代为晶体管计算机，第三代为集成电路计算机，第四代为超大规模集成电路计算机，而原来人们设想的第五代计算机或更新一代的计算机，因为种种原因至今并没有真正出现。答案：C【习题2】通常所说的CPU，即微型机的中央处理器，在其上主要的集成电路是________。A
公共课计算机总复习 核心知识点
s13596191285的博客
06-23 39
（2）打开打印机，装上带有至少六张胶片的纸盒→转换到普通视图，选中第一张幻灯片 →“文件”菜单→“页面设置”→打开“页面设置” 对话框→单击“幻灯片大小”框右侧的箭头，从下拉列表中选择“投影机幻灯片”→从“文件”菜单中选择“打印”命令→打开“打印” 对话框→在对话框底部选择“纯黑白”复选框（如果打印机能够处理灰色阴影，选择“灰度”复选框），PowerPoint将为演示文稿中所有选中的幻灯片打印一个透明胶片。例如各地区的网络管理中心。接着，选择“编辑”菜单中的“选择性粘贴”命令，然后单击“列宽”选项。
iOS动画
z_d_j的博客
03-21 2671
在2013年六月，苹果推出了iOS 7，并与iOS 6大相径庭，让设计师回归本初。曾经代表漂亮iOS设计的现实主义拟物化离去了，而一个更加平面、光滑，更加“计算机真实”的美学到来了。这种向平面设计专项的一个重大影响就是在Photoshop（或者任何可选的设计工具）中进行一个设计变得更简单、花费更少的时间、并且不再有差异。创建一个有着漂亮现实渐变色、阴影和高亮的app界面是一件很艰苦的事情。而创建一
嵌入式分享合集21
weixin_42522389的博客
07-24 10
嵌入式每天发发又来啦了 最近发现人多了一点哦 本站还是不错的一、MOS管知识MOS管，即金属（Metal）—氧化物（Oxide）—半导体（Semiconductor）场效应晶体管，是一种应用场效应原理工作的半导体器件。和普通双极型晶体管相比，MOS管具有输入阻抗高、噪声低、动态范围大、功耗小、易于集成等优势，在开关电源、镇...
公共课计算机总复习 核心知识点(1)
s13596191285的博客
06-23 35
（2）打开打印机，装上带有至少六张胶片的纸盒→转换到普通视图，选中第一张幻灯片 →“文件”菜单→“页面设置”→打开“页面设置” 对话框→单击“幻灯片大小”框右侧的箭头，从下拉列表中选择“投影机幻灯片”→从“文件”菜单中选择“打印”命令→打开“打印” 对话框→在对话框底部选择“纯黑白”复选框（如果打印机能够处理灰色阴影，选择“灰度”复选框），PowerPoint将为演示文稿中所有选中的幻灯片打印一个透明胶片。例如各地区的网络管理中心。接着，选择“编辑”菜单中的“选择性粘贴”命令，然后单击“列宽”选项。
公共课计算机辅导班精点300道选择题(含答案)(1)
s13596191285的博客
06-23 31
A．+空格键 B．+空格键 C．+ D．+空格键。A．切断计算机主机电源 B．按Alt+Ctrl+Del C．按Alt+F4 D．按下Reset键。A．“e”比“f”大 B．“q”比“Q”大 C．“H”比“R”大 D．空格比逗号大。A．直接拖曳 B． + 拖曳 C． + 拖曳 D．单击。
公共课计算机辅导班精点300道选择题(含答案)
s13596191285的博客
06-23 27
A．+空格键 B．+空格键 C．+ D．+空格键。A．切断计算机主机电源 B．按Alt+Ctrl+Del C．按Alt+F4 D．按下Reset键。A．“e”比“f”大 B．“q”比“Q”大 C．“H”比“R”大 D．空格比逗号大。A．直接拖曳 B． + 拖曳 C． + 拖曳 D．单击。
高中信息技术：信息技术初步、计算机基础、office办公软件
tcs066的博客
10-05 6693
考情分析： 讲义试卷： 第一章 信息技术初步 第一节信息及其特征 一、信息的概念 利用文字、符号、声音、图形、图像等形式作为载体，通过各种渠道传播的信号、消息、情报或报道等内容。（信息=内容/意义；载体=图文声像；途径=广电书网） 世界三大要素：信息、物质、能量 信息就是信息，不是物质，也不是能量（说法正确） 二、信息的特征（普传功夫真驾驶） 三、信息的传递 第二节 信息技术 一、信息技术含义 IT，在信息获取、整理、加工、存储、传递和利用过程中所采用的技术和方法。 包含四方面技术： 微电子技术：复
软考真题知识点（软件设计师中级）
码农研究僧的博客
04-20 4823
目录 专利权 软件许可 图像深度 软件开发设计 原型化软件开发方法 软件项目风险 计算机组成原理 CPU 浮点数 检验码 计算机操作系统 进程管理 文件管理可靠性 计算机网络 防火墙 数字证书 ARP协议 ping命令 tracert命令 nslookup命令 其他概念 UML语言 CVS 类的实例化 设计模式 数据流图 面向对象开发方法 编程语言 专利权 根据我国专利法第九条规定"两个以上的申请人分别就同样的发明创造申请专利的，专利权...
html5绘制时钟动画
09-28
在绘制时钟动画之前，我们需要绘制表盘。我们可以使用 `cxt.arc` 方法来绘制一个圆形的表盘，並将其颜色设置为蓝色。 4. 绘制刻度 接下来，我们需要绘制刻度。在这个示例中，我们使用两个循环来绘制时刻度和分刻度...
纯CSS3实现圆盘时钟动画
04-16
解压密码：RJ4587 记得之前分享过一款基于SVG的HTML5圆盘时钟动画，效果还挺好的，今天我们继续为大家分享一款更酷的纯CSS3实现的圆盘时钟动画，这款时钟动画在初始化的时候就有动画特效，包括圆盘的形成，还有时钟...
html5 canvas云粒子数字时钟动画特效
11-06
在这个“html5 canvas云粒子数字时钟动画特效”中，我们看到的是Canvas技术与时间显示、粒子系统相结合的应用实例。下面将详细阐述相关知识点。 1. HTML5 Canvas API： HTML5 Canvas是一个基于矢量图形的画布，...
MATLAB时钟动画
08-25
用MATLAB的m脚本写的时钟动画。自动获取并追踪系统时间。里面有注释，主要是用了rotate和pause函数
时钟计时器PowerPoint动画
08-03
在PowerPoint演示文稿中，时钟计时器是一种实用的动画元素，它能帮助演讲者或培训师在有限的时间内有效地管理他们的讲解内容。这种动画功能允许用户设定不同的时间限制，例如30秒、1分钟、2分钟、5分钟、10分钟、20...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1245
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 395
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
VUE中的重点*
qq_61132537的博客
07-22 1091
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 194
【代码】vue el-select的下拉树形结构。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值