css动画截屏效果

最新推荐文章于 2024-04-18 02:17:36 发布

Jimmia

最新推荐文章于 2024-04-18 02:17:36 发布

阅读量512

点赞数

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

本文链接：https://blog.csdn.net/xiejm2333/article/details/126411170

版权

本文介绍了如何使用CSS和Vue2来创建一个模拟截屏的效果。通过CSS动画，实现了吸引人的视觉体验。

摘要由CSDN通过智能技术生成

模拟收集截屏效果，通过css实现，使用vue2文件实现。

效果

代码

<template>
  <transition name="shot">
    <div class="shot-box" v-if="show" ref="shot"></div>
  </transition>
</template>
<script>
import imgurl from "@/assets/bg.jpg";
export default {
  name: "ScreenShot",
  data() {
    return {
      src: "",
      show: false,
    };
  },
  async mounted() {
    this.show = true;
    this.$nextTick(() => {
      this.showImage();
    });
  },
  methods: {
    showImage() {
      const image = document.createElement("img");
      // 可以是一张图片、canvas的数据源、base64数据源
      image.src = imgurl;
      image.classList.add("shot-image");

      image.onload = () => {
        this.$