使用css3 filter滤镜功能实现图片自动变色效果

最新推荐文章于 2024-03-04 16:31:41 发布

SundayAaron

最新推荐文章于 2024-03-04 16:31:41 发布

阅读量2.1k

点赞数 1

分类专栏： web前端 html CSS3

本文链接：https://blog.csdn.net/SundayAaron/article/details/85685762

版权

web前端同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

CSS3

2 篇文章 0 订阅

订阅专栏

预览图：

关键代码：

@keyframes pulse {
            from {
                filter: hue-rotate(0);
            }

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

全部代码：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>filter</title>
    <style>
        .con {
            margin: 0 auto;
            width: 1200px;
            height: 720px;
            background: url(https://images.unsplash.com/photo-1546365831-cd36e1e4d63e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80) no-repeat;
            background-size: contain;
            /* 动画 */
            animation: pulse 5s linear infinite;
        }
        @keyframes pulse {
            from {
                filter: hue-rotate(0);
            }

            to {
                filter: hue-rotate(360deg);
            }
        }
    </style>
</head>

<body>
<div class="con"></div>
</body>

</html>

SundayAaron

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
4
评论
使用css3 filter滤镜功能实现图片自动变色效果

预览图：关键代码：@keyframes pulse { from { filter: hue-rotate(0); } to { filter: hue-rotate(360deg); } }全部代码：...
复制链接

扫一扫