filter+transition实现点亮图片效果

预期效果

最近我在朋友圈看到一篇文章,关于疫情结束,点亮一张张图片的过程,图片由黑白逐渐变得色彩缤纷,看起来效果非常不错。

实现方式

实现方式非常简单,不难推断出用filtertransition可以完成这一效果,filter 用于控制颜色和明亮度,而 transition 则控制这一变化的过渡效果。

源代码

此处采用 vue2.x 的写法。

<template>
  <div
    @click="lightImg"
    :class="['card-gray', { 'card-lightful': isLightful }]"
  ></div>
</template>

<script>
export default {
  name: "lightYouImage",
  data() {
    return {
      isLightful: false
    };
  },
  methods: {
    lightImg() {
      this.isLightful = !this.isLightful;
    }
  }
};
</script>

<style lang="less" scoped>
.card-gray {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 20px auto;
  background: url(http://pic.netbian.com/uploads/allimg/170915/191948-1505474388c138.jpg)
    center center/cover no-repeat;
  filter: grayscale(1) brightness(50%);
}

.card-lightful {
  filter: none;
  transition: filter 1s ease-in;
}
</style>

效果预览

出于各种原因,暂无法使用个人电脑,只能简单截个静态图片。以下依次为点亮前和点亮后的效果。

需要注意的点

  1. transition上设置的效果是作用在当前类名下的指定属性的,且该属性的值为变化后的值,它需要对应一个变化前的值,才能看到效果。

  2. grayscale 控制元素灰度,灰度>=1 表示纯灰,为 0 表示原彩;brightness 控制元素亮度,为 0 表示纯黑,为 1 表示正常亮度,大于 1 表示高于正常亮度,类似于照片中的“过曝”。

  3. ease是“放松”的意思,在 css 的 timing-function 中,它表示慢速,常见的有如下几种:

含义
ease-in 缓慢进入,匀速进行和结束
ease-out 匀速进入和进行,缓慢结束
ease-in-out 缓慢进入,匀速进行,缓慢结束
linear 全程匀速进行
  1. transition 可以设置多组效果,不同组之间用逗号隔开,如下:
    transition: filter 1s ease-in, width 1.5s ease-out;
posted @ 2020-05-03 15:47  陌上兮月  阅读(898)  评论(0编辑  收藏  举报