此项目主要是运用混合模式中的色相来完成图片的变色效果的
首先简单讲一下色相:色彩的相貌,如下图的颜色
通过在颜色板添加混合模式为色相样式,然后通过改变颜色板的颜色使车身部分的颜色改变,因为除了车身,其他部分的颜色为黑白,所以没有随着变色
下面是html代码,一个颜色板color和一个img车的图片,然后设置默认色板颜色为#0000ff(蓝色)
<input type="color" value="#0000ff">
<img src="car.jpg">
然后颜色板color添加混合模式设置为色相(mix-blend-mode: hue;),使用绝对定位铺满(宽100%,高:100%),然后从输入颜色元素中移除默认样式
下面是css代码
html,
body {
height: 100%;
}
body {
margin: 0;
}
img {
margin: 0 auto;
height: 100%;
width: 100%;
/* 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配,该对象将被剪裁以适应内容框。 */
object-fit: cover;
}
input {
padding: 0;
border: none;
position: absolute;
width: 100%;
height: 100%;
/*混合模式使色块的颜色改变其背后的图像*/
mix-blend-mode: hue;
cursor: pointer;
}
/* 从输入颜色元素中移除默认样式*/
::-webkit-color-swatch {
border: none;
}
::-webkit-color-swatch-wrapper {
padding: 0;
}
::-moz-color-swatch,
::-moz-focus-inner {
border: none;
}
::-moz-focus-inner {
padding: 0;
}
此项目来源于英文原文 | 12 Incredible Pure CSS Experiments
作者 | Brenda Stokes Barron
源码:https://codepen.io/noahblon/pen/ZbjmbK