<script setup>
import { getDataUrl } from "../CommonUtils/ResourceData";
//无网络环境下使用
const DemoResourceBase = getDataUrl();
const item_url = DemoResourceBase
  ? `${DemoResourceBase}/27bda620942566673ab449a3ef765321.png`
  : "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/FilterDemo/AnimatePic/27bda620942566673ab449a3ef765321.png";
</script>

<template>
  <div
    className="blockStyle"
    :style="{
      backgroundColor: '#0000FF',
      animation: 'opacityDemo_CompositeNoOpacity 3s infinite',
    }"
  />
  <img
    className="blockStyle"
    :style="{
      objectFit: 'contain',
      animation: 'opacityDemo_CompositeOpacity 3s infinite',
    }"
    :src="item_url"
  />
</template>

<style scoped>
.blockStyle {
  top: 50;
  left: 50;
  width: 150;
  height: 150;
}

.picTitleTextClass {
  font-size: 25;
  height: 68;
  line-height: 34;
  color: #000000;
  text-align: "center";
}

@keyframes opacityDemo_CompositeOpacity {
  from {
    transform: translate3d(50%, 30, 0) scale3d(1.5, 1.5, 1)
      rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
    opacity: 0.1;
  }
  to {
  }
}

@keyframes opacityDemo_CompositeNoOpacity {
  from {
    transform: translate3d(50%, 30, 0) scale3d(1.5, 1.5, 1)
      rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
  }
  to {
  }
}
</style>
