使用纯 CSS 实现图片的赛博风格化赛博风格（Cyberpunk），这种风格通过独特的色彩调色和动感的视觉效果，营造出一

赛博风格（Cyberpunk）以其未来感和科技感的视觉元素而闻名，广泛融合了鲜艳的色彩、霓虹灯效果和高对比度的光影处理。这种风格通过独特的色彩调色和动感的视觉效果，营造出一种充满科技和幻想的氛围。本文将深入探讨如何通过纯 CSS 技术将普通图片转变为赛博风格，以提升页面的视觉吸引力和动态感。

实现效果

一、 基本布局

定义基本样式，绘制一个深色背景

body {
  margin: 0;
  height: 100vh;
  background-color: #121212;
  display: flex;
  justify-content: center;
  align-items: center;
}

• margin: 0; 去除默认的页面边距。
• height: 100vh; 使 body 元素占满整个视口高度。
• background-color: #121212; 设置深色背景，以突出赛博风格。
• display: flex; justify-content: center; align-items: center; 使用 Flexbox 将内容居中对齐。

二、 容器设置

.container {
   position: relative;
   width: 500px;
   height: 300px;
   padding: 2px;
   box-shadow: 0 0 5px rgb(255, 0, 255), /* 紫色光晕 */
               0 0 10px rgba(255, 0, 255, 0.5), 
               0 0 20px rgba(0, 162, 255, 0.9), /* 青色光晕 */
               0 0 30px rgba(0, 255, 255, 0.3);
}

• position: relative; 为子元素的绝对定位提供参考。
• width 和 height 设置容器的尺寸，根据自己的图片自定义设置。
• box-shadow 定义多个阴影层叠在一起，边框模拟出霓虹灯的光辉效果。

三、 添加图片效果

我使用的是gif格式的动图，有更好的效果。

.image {
   width: 100%;
   height: 100%;
   background: url('./testimages.gif') no-repeat aqua;
   background-blend-mode: lighten;
}

• background: 设置背景图像为指定的 GIF 动图，并使其不重复（no-repeat）。背景色设置为青色（aqua）。
• background-blend-mode: lighten: 使背景图像与背景色按照“变亮”模式混合。该模式会将背景色和背景图像的颜色进行混合，使图像的亮度增加，得到一个青色的图。

四、 覆盖层效果

使用伪元素创建一个一样的image内容，改变背景颜色并与其混合，得到一个紫色的图片。最后与image进行混合。

.image::after {
   content:'';
   position: absolute;
   inset: 0;
   background: url('./testimages.gif') no-repeat rgb(233, 58, 195);
   background-blend-mode: lighten;
   margin-left: 15px;
   mix-blend-mode: darken;
   animation: shake 30ms infinite;
}

• position: absolute; inset: 0; 确保覆盖层填充整个容器。
• background: 使用相同的图片作为覆盖层的背景，混合出紫色效果图片。
• mix-blend-mode: multiply; 使覆盖层与背景进行混合。
• animation: shake 0.5s infinite; 使用 shake 动画创建抖动效果，使图片看起来更具动态感。

五、 添加动画效果

@keyframes shake {
  0% { transform: translateX(0); }
  50% { transform: translateX(15px); }
  100% { transform: translateX(0); }
}

• @keyframes shake 定义了一个简单的抖动动画，使覆盖层在水平方向上移动15像素，创建出一个轻微的抖动效果。

总结

本文通过CSS 的背景混合模式、渐变效果和动画，来模拟出了赛博风格中的光线闪烁、色彩叠加以及动态效果。大家也可以根据自己需求对 GIF 图片、颜色、动画持续时间等参数进行调整，从而创造出独特的视觉效果。