视频播放中动画
CSS filter属性
CSS的filter属性主要用于设置图像的视觉效果。
语法:
filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
Filter 函数
注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。
none:这是默认值,不适用任何效果。
brightness():设置元素的亮度。如果亮度为0%则为全黑,如果亮度为100%,则与原始亮度相同。大于100%结果的值是更明亮的元素。
grayscale():设置元素的灰度,它将元素颜色转换为黑色和白色。灰度0%表示原始元素,100%表示完全灰度元素。
sepia():它将图像转换为棕褐色图像,其中0%表示原始图像,100%表示完全棕褐色。
contrast():用于调整元素的对比度。0%对比度表示完整的黑色元素,100%对比度表示原始元素。
saturate():用于设置元素的饱和度。0%饱和度表示元素完全不饱和,100%饱和表示原始图像。大于100%结果的值是超饱和元素。
blur():它将模糊效果应用于元素。如果未指定模糊值,则默认值为0。
opacity():它设置图像的不透明度效果。0%不透明度表示元素完全透明,如果不透明度为100%,则表示原始图像。
hue-rotate():它将色调旋转应用于图像。该值定义将调整图像样本的色环周围的度数。默认值为0deg,表示原始图像;该值虽然没有最大值,超过360deg的值相当于又绕一圈。
invert():它反转元素。默认值为0%,表示原始图像。100%使图像完全反转。
drop-shadow():它对元素应用阴影效果。它接受h-shadow,v-shadow,blur,spread和color作为值。
url():接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素。
![](https://img-blog.csdnimg.cn/img_convert/d6f2e050735b7406842fd202632907a2.gif)
![](https://img-blog.csdnimg.cn/img_convert/fbb3ff735e0544849d0c66ad7cdef0c9.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.m-single-play-info-playing {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background-image: url(https://gw.alicdn.com/imgextra/i1/O1CN01yyGk961zpxgdOlTLH_!!6000000006764-1-tps-72-72.gif);
background-size: 100% 100%;
animation: playing 5s linear infinite;
}
@keyframes playing {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}
</style>
</head>
<body>
<div class="m-single-play-info-playing"></div>
</body>
</html>