cyber/src/pages/Home.vue

<script setup>

</script>

<template>
  <div class="container-pig">
    <img alt="猪图" src="https://q6.itc.cn/images01/20241006/86f4aab7fded4c2283842e79f7e6eda3.jpeg"/>
    <h1>6A级金牌养猪基地 2010测试</h1>
  </div>
</template>

<style>
.container-pig {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 0;
  width: 100%;
  height: 100%;
}
.container-pig img {
  position:absolute ;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.container-pig h1 {
  z-index: 19;
  font-family: 'huangkaihua', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 80px;
  //font-weight: bold;
  animation: flashColors 0.5s infinite;
}

@keyframes flashColors {
  0% {
    color: red;
  }
  49.9% {
    color: red;
  }
  50% {
    color: yellow;
  }99.9% {
     color: yellow;
   }
  100% {
    color: red;
  }
}
</style>