css油画制作
使用CSS制作油画效果
通过CSS的滤镜和混合模式可以模拟油画的质感，结合背景纹理和颜色调整实现类似效果。
创建基础油画纹理
在HTML中准备一个容器元素，例如<div class="oil-painting"></div>，通过CSS添加纹理背景：
.oil-painting {
width: 500px;
height: 400px;
background: url('canvas-texture.jpg');
background-size: cover;
}应用滤镜组合
使用filter属性叠加多个效果，模拟油画的笔触和色彩层次：
.oil-painting {
filter:
blur(1px)
contrast(1.2)
saturate(1.5);
}添加笔触效果 通过伪元素和混合模式创建不规则笔触：
.oil-painting::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.1) 50%);
mix-blend-mode: overlay;
}动态油画效果实现
结合CSS动画和JavaScript可实现动态变化的油画风格。
关键帧动画 定义色彩波动的动画：
@keyframes oil-color-shift {
0% { filter: hue-rotate(0deg); }
50% { filter: hue-rotate(15deg); }
100% { filter: hue-rotate(0deg); }
}交互控制 通过事件监听调整效果强度：
document.querySelector('.oil-painting').addEventListener('mousemove', (e) => {
const x = e.clientX / window.innerWidth;
e.target.style.filter = `blur(${x * 2}px) contrast(${1 + x})`;
});进阶技巧：SVG滤镜
使用SVG滤镜创建更复杂的油画效果，需在HTML中嵌入SVG滤镜定义：
<svg hidden>
<filter id="oil-paint">
<feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="3"/>
<feDisplacementMap in="SourceGraphic" scale="10" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</svg>应用SVG滤镜到CSS：
.oil-painting {
filter: url(#oil-paint);
}这种方法通过噪声算法生成更自然的笔触纹理，适合需要高精度控制的场景。注意调整baseFrequency和scale参数可获得不同风格的油画效果。
