<template>
  <div class="icon-main icon_act">
    <svg-icon icon-class="ic_2" class="svg_out"></svg-icon>
    <svg-icon icon-class="ic_3" class="svg_in"></svg-icon>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  components: {},
  mounted: function() {
    // this.init();
  },
  computed: {},
  methods: {}
};
</script>

<style scoped>
.icon-main {
  /* margin-top: 100px; */
  width: 60px;
}
.icon_act {
  /* margin-left: 50px; */
  position: relative;
}
.svg_out {
  font-size: 60px;
  color: lawngreen;
  animation: out_t;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.svg_in {
  font-size: 20px;
  position: absolute;
  top: 20px;
  left: 20px;
  animation: in_t;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes out_t {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes in_t {
  0% {
    color: lightcoral;
  }
  50% {
    color: #7cd21a;
  }
  100% {
    color: lightcoral;
  }
}
</style>