黑白照片变彩色悬停渐变动效

使用叠在一起的两张图片实现，一张黑白，一张彩色。

color

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1588
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.speaker {
    position: relative;
    width: 248px;
    display: inline-block;
    vertical-align: top;
    margin: 20px;
    border: 0px solid transparent;
    -webkit-transition: all 100ms;
    -moz-transition: all 100ms;
    -ms-transition: all 100ms;
    -o-transition: all 100ms;
    transition: all 100ms;
    text-decoration: none !important;
}
img {
    width: auto\9;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
    position: relative;
    display: block;
    z-index: 0;
}
img.color {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    opacity: 0;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -ms-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
    box-shadow: none;
}
img.color:hover {
    opacity: 0.9;
}
.speaker .name {
    font: normal normal bold 22px/26px titillium, arial, sans-serif;
    color: #666;
    text-align: center;
    padding: 10px 0 0;
    text-decoration: none !important;
    background-color: #fafafa;
}
.speaker .company {
    font: normal normal bold 15px/20px arial, sans-serif;
    color: #888;
    text-align: center;
    text-decoration: none !important;
    background-color: #fafafa;
    padding-bottom: 10px;
}
.hide {
    display: none;
}

HTML

<a href="#" class="speaker" target="_blank">
    <img alt="Kirsten Green - Forerunner Ventures " src="https://startupgrind.com/media/images/speaker/12/w=248,h=248,q=80,zc=1,fltr=gray,fltr=gam%7C1.5,fltr=cont%7C10,fltr=wb/Kirsten-Green.jpg">
    <img alt="Kirsten Green - Forerunner Ventures " class="color" src="https://startupgrind.com/media/images/speaker/12/w=248,h=248,q=80,zc=1,fltr=cont%7C10,fltr=wb/Kirsten-Green.jpg">
    <div class="name">Kirsten Green</div>
    <div class="company">Forerunner Ventures </div>
    <div class="bio hide">Kirsten is the founder of Forerunner Ventures, an early stage venture capital firm. She combines an experience and thesis driven approach, with a consumer centric view, to identify visionary entrepreneurs and compelling brand platforms. Through her
        work at Forerunner, she has partnered with some of the most promising companies in the current evolution of commerce. Representative investments include: Birchbox, Bonobos, Hotel Tonight, Nomi, Warby Parker.</div>
</a>

使用叠在一起的两张图片实现，一张黑白，一张彩色。

color

编辑器支持Emmet

快捷键

使用叠在一起的两张图片实现，一张黑白，一张彩色。

color

基于Vue实现的色彩渐变步进动画

使用WebGL顶点和片段着色器构建的光怪陆离（彩虹迷雾）动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：