当前位置：首页 > VUE

vue实现crt窗口

2026-02-20 13:09:15VUE

Vue 实现 CRT 窗口效果

在 Vue 中实现 CRT（阴极射线管）风格的复古屏幕效果，可以通过 CSS 动画、滤镜和伪元素模拟扫描线、像素化和辉光等视觉特征。以下是具体实现方法：

基础 HTML 结构

创建一个 Vue 组件模板，包含需要展示 CRT 效果的内容区域：

<template>
  <div class="crt-screen">
    <div class="crt-content">
      <!-- 你的内容在这里 -->
      <slot></slot>
    </div>
  </div>
</template>

核心 CSS 样式

通过 CSS 实现扫描线、像素化和辉光效果：

.crt-screen {
  position: relative;
  background-color: #000;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 30px rgba(0, 255, 0, 0.3);
  overflow: hidden;
}

.crt-content {
  position: relative;
  color: #0f0; /* 经典绿色文本 */
  font-family: 'Courier New', monospace;
}

/* 扫描线效果 */
.crt-screen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    rgba(0, 255, 0, 0.1) 1px,
    transparent 1px
  );
  background-size: 100% 2px;
  pointer-events: none;
  z-index: 1;
  animation: scanline 8s linear infinite;
}

/* 像素化/模糊效果 */
.crt-content {
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.8);
  filter: blur(0.5px);
}

/* 辉光动画 */
@keyframes glow {
  0% { box-shadow: 0 0 10px rgba(0, 255, 0, 0.5); }
  50% { box-shadow: 0 0 20px rgba(0, 255, 0, 0.8); }
  100% { box-shadow: 0 0 10px rgba(0, 255, 0, 0.5); }
}

/* 扫描线动画 */
@keyframes scanline {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
}

添加交互效果

在 Vue 组件中添加鼠标悬停时的辉光增强效果：

<script>
export default {
  data() {
    return {
      isHovering: false
    }
  },
  methods: {
    handleHover(isHover) {
      this.isHovering = isHover;
    }
  }
}
</script>

更新模板和样式以响应悬停状态：

<template>
  <div 
    class="crt-screen" 
    :class="{ 'crt-glow': isHovering }"
    @mouseenter="handleHover(true)"
    @mouseleave="handleHover(false)"
  >
    <!-- ... -->
  </div>
</template>

.crt-glow {
  animation: glow 1.5s ease-in-out infinite;
}

高级效果增强

通过 JavaScript 动态生成噪点效果，模拟老式显示器的信号干扰：

mounted() {
  this.generateNoise();
},
methods: {
  generateNoise() {
    const noiseCanvas = document.createElement('canvas');
    noiseCanvas.width = this.$el.offsetWidth;
    noiseCanvas.height = this.$el.offsetHeight;
    const ctx = noiseCanvas.getContext('2d');

    for (let x = 0; x < noiseCanvas.width; x++) {
      for (let y = 0; y < noiseCanvas.height; y++) {
        const val = Math.floor(Math.random() * 10);
        ctx.fillStyle = `rgba(0, 255, 0, ${val/100})`;
        ctx.fillRect(x, y, 1, 1);
      }
    }

    const noise = document.createElement('div');
    noise.style.backgroundImage = `url(${noiseCanvas.toDataURL()})`;
    noise.style.position = 'absolute';
    noise.style.top = '0';
    noise.style.left = '0';
    noise.style.width = '100%';
    noise.style.height = '100%';
    noise.style.pointerEvents = 'none';
    noise.style.opacity = '0.05';
    noise.style.animation = 'flicker 0.1s infinite';

    this.$el.appendChild(noise);
  }
}

添加对应的 CSS 动画：

@keyframes flicker {
  0% { opacity: 0.05; }
  50% { opacity: 0.1; }
  100% { opacity: 0.05; }
}

响应式调整

在 Vue 中添加窗口大小变化的监听，确保效果适应不同尺寸：

data() {
  return {
    resizeObserver: null
  }
},
mounted() {
  this.resizeObserver = new ResizeObserver(() => {
    this.generateNoise();
  });
  this.resizeObserver.observe(this.$el);
},
beforeDestroy() {
  this.resizeObserver.disconnect();
}

通过以上方法，可以在 Vue 中实现一个逼真的 CRT 窗口效果，包含扫描线、像素化、辉光和噪点等经典特征。用户可以通过调整 CSS 参数（如扫描线密度、辉光强度等）进一步自定义视觉效果。

vue实现crt窗口