CSS3滤镜效果可在动画中使用

<!doctype html>

<html>

<head>

<style>

img{display:block;}

.box{width:600px;}

.box img{width:100%;}

/*灰度效果*/

@keyframes changeGrayscale{

from{-webkit-filter:grayscale(0%);}

to{-webkit-filter:grayscale(100%);}

}

.filter_grayscale{animation:changeGrayscale 3s infinite alternate;}

/*老旧照片效果*/

@keyframes changeSepia{

from{-webkit-filter:sepia(0);}

to{-webkit-filter:sepia(1);}

}

.filter_sepia{animation:changeSepia 3s infinite alternate;}

/*饱和度效果*/

@keyframes changeSaturate{

from{-webkit-filter:saturate(100%);}

to{-webkit-filter:saturate(0%);}

}

.filter_saturate{animation:changeSaturate 3s infinite alternate;}

/*色相效果*/

@keyframes changeHue{

from{-webkit-filter:hue-rotate(180deg);}

to{-webkit-filter:hue-rotate(0deg);}

}

.filter_hue{animation:changeHue 3s infinite alternate;}

/*明度效果*/

@keyframes changeBrightness{

from{-webkit-filter:brightness(100%);}

to{-webkit-filter:brightness(300%);}

}

.filter_brightness{animation:changeBrightness 3s infinite alternate;}

/*对比度效果*/

@keyframes changeContrast{

from{-webkit-filter:contrast(100%);}

to{-webkit-filter:contrast(500%);}

}

.filter_contrast{animation:changeContrast 3s infinite alternate;}

/*反相*/

@keyframes changeInvert{

from{-webkit-filter:invert(0);}

to{-webkit-filter:invert(1);}

}

.filter_invert{animation:changeInvert 3s infinite alternate;}

/*模糊*/

@keyframes changeBlur{

from{-webkit-filter:blur(0);}

to{-webkit-filter:blur(20px);}

}

.filter_blur{animation:changeBlur 3s infinite alternate;}

/*投影*/

@keyframes changeShadow{

from{-webkit-filter:drop-shadow(0 0 0 black);}

to{-webkit-filter:drop-shadow(10px 10px 10px black);}

}

.filter_shadow{animation:changeShadow 3s infinite alternate;}

/*透明度*/

@keyframes changeOpacity{

from{-webkit-filter:opacity(1);}

to{-webkit-filter:opacity(0);}

}

.filter_opacity{animation:changeOpacity 3s infinite alternate;}

</style>

<meta charset="utf-8">

<title>无标题文档</title>

</head>

<body>

<div class="box filter_grayscale"><img src="images/photo.jpg"></div>

</body>

</html>

原文发布于微信公众号 - 我分享我快乐(duan_uid)

原文发表时间:2016-03-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏非著名程序员

Android学习第一弹:Android通过用代码画虚线椭圆边框背景来学习一下shape的用法

学习Shape的用法 非著名程序员 ? 在Android程序开发中,我们经常会去用到Shape这个东西去定义各种各样的形状,shape可以绘制矩形环形以及...

34090
来自专栏前端知识分享

第97天:CSS3渐变和过渡详解

渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。

13430
来自专栏老马寒门IT

02-移动端开发教程-CSS3新特性(中)

背景在CSS3中也得到很大程度的增强,比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

26500
来自专栏前端知识分享

第99天:CSS3中透视perspective

与之前的过程相同,视点与移动后的元素的连线与屏幕的焦点就是在屏幕上的呈现的元素的大小,与元素相比较变大了。

9320
来自专栏老马寒门IT

02-移动端开发教程-CSS3新特性(中)

1. 新的背景 背景在CSS3中也得到很大程度的增强,比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。 1.1 background-size设置背...

40480
来自专栏GIS讲堂

Arcgis for JavaSctipt之常用Layer详解

概述:Arcgis for Javasctipt中常见的layer有动态图层(ArcGISDynamicMapServiceLayer

20650
来自专栏WindCoder

11/20Android开发笔记

11410
来自专栏MelonTeam专栏

日迹中视频编辑滤镜效果实现方法

导语 本文简要分析,日迹视频解码流程以及视频滤镜的实现原理 需求背景:日迹需要的编辑滤镜效果预览图 图1:日迹滤镜效果 要实现产品想要的...

30380
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(五)transform

transform 字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:移动 translate,缩放scale,旋转rotate,翻转...

14520
来自专栏Linux驱动

31.QPainter-rotate()函数分析-文字旋转不倾斜,图片旋转实现等待

30.QT-渐变之QLinearGradient、 QConicalGradient、QRadialGradient

15330

扫码关注云+社区

领取腾讯云代金券