利用CSS控制图片的旋转与透明度

猴子我是唐僧啊

于 2022-08-22 14:12:08 发布

阅读量376

点赞数

分类专栏：前端文章标签： css servlet java

本文链接：https://blog.csdn.net/sappmis/article/details/126464823

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1：设备总数，生产中，待机中，图片旋转

2：故障图片利用透明度做呼吸灯闪烁效果。

  <a-card :bordered="false" class="card">
            <a-spin tip="Loading..." :spinning="spinning3">
              <a-row :gutter="16">
                <a-col :span="5" style="text-align: center">
                  <img src="../../image/Gaps/dept.png" class="img" />
                  <p class="p-content" style="font-size: 14px; color: aliceblue">设备总数</p>
                  <p style="font-size: 32px; color: aliceblue">{{ entity.Sum }}台</p>
                </a-col>
                <a-col :span="5" style="text-align: center">
                  <img src="../../image/Smact/work.png" class="img" />
                  <p class="p-content" style="font-size: 16px; color: aliceblue">生产中</p>
                  <p style="font-size: 32px; color: rgb(95, 166, 254)">{{ entity.Work }}台</p>
                </a-col>
                <a-col :span="5" style="text-align: center">
                  <img src="../../image/Smact/run.png" class="img" />
                  <p class="p-content" style="font-size: 16px; color: aliceblue">待机中</p>
                  <p style="font-size: 32px; color: rgb(64, 211, 54)">{{ entity.Standby }}台</p>
                </a-col>
                <a-col :span="5" style="text-align: center">
                  <img src="../../image/Smact/warning.png" class="waring" />
                  <p class="p-content" style="font-size: 16px; color: aliceblue">故障</p>
                  <p style="font-size: 32px; color: red">{{ entity.Warning }}台</p>
                </a-col>
                <a-col :span="4" style="text-align: center">
                  <img src="../../image/Smact/stop.png" class="img_1" />
                  <p class="p-content" style="font-size: 16px; color: aliceblue">关机</p>
                  <p style="font-size: 32px; color: rgb(110, 110, 110)">{{ entity.Stop }}台</p>
                </a-col>
              </a-row>
            </a-spin>
          </a-card>

<style>
.waring {
  width: 40px;
  height: 40px;
  margin-left: 10px;
  text-align: center;
  animation: glow 800ms ease-out infinite alternate;
}
@keyframes glow {
  0% {
    opacity: 0.01;
  }
  100% {
    opacity: 1;
  }
}
.img {
  width: 40px;
  height: 40px;
  margin-left: 25px;
  display: block;
  animation: rotate 6s linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotateZ(0deg); /*从0度开始*/
  }
  100% {
    transform: rotateZ(360deg); /*360度结束*/
  }
}
</style>