【css酷炫效果】纯CSS实现流动岩浆纹理效果

想直接拿走的老板，链接放在这里：上传后更新

缘

创作随缘，不定时更新。

创作背景

刚看到csdn出活动了，赶时间，直接上代码。

html结构

<div class="lava-texture">
  <div class="base-layer"></div>
  <div class="flow-layer"></div>
  <div class="glow-layer"></div>
</div>

css样式

.lava-texture {
   
  position: relative;
  width: 400px;
  height: 300px;
  overflow: hidden;
  border-radius: 12px;
}
.base-layer {
   
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    #ff4444,
    #ff7700,
    #ffaa00
  );
  opacity: 0.8; /* 半透明基底 */
}
.flow-layer {
   
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 150