CSS属性-filter用法

援笔赋惊鸿

已于 2023-01-31 19:25:43 修改

阅读量1.4k

点赞数 2

分类专栏： CSS 文章标签： css 前端 Powered by 金山文档

于 2023-01-31 19:21:10 首次发布

原文链接：https://zhuanlan.zhihu.com/p/497713305

版权

CSS 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

filter是css的一种属性，它去取值有以下几种：

blur(),作用是调整元素的模糊度

brightness() 指的是图片的亮度（默认为1）如果给0则是全黑

contrast() 指的是图片的对比度（默认为1）可以设置为百分比

grayscale() 指的是改变图片的灰度 (默认是0) 可以设置百分比

hue-rotate() 指的是图片色相旋转

invert(): 指的是反转输入的图片颜色

opacity()：指的是图片的透明度

saturate():指的是图像饱和度 0是灰色的 100%是完整的填充超过100% 饱和度更高

sepia() 图像转换为深褐色

接下来就重点介绍几个属性:

blur()，contrast(), hue-rotate()

1.完成子弹飞出去带尾巴的效果

代码如下：

<div class="box">
     <ul class="ul1">
         <li></li>
     </ul>
</div>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        background-color: #ccc;
    }
    .box {
        filter: contrast(10);
        width: 400px;
        height: 300px;
        background-color: yellow;
    }
    .ul1 {
        width: 80px;
        height:300px;
        background-color: green;
        filter: blur(5px);
        position: relative;
        float: left;
    }
    .ul1 li {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: blue;
        filter: blur(5px);
        position: absolute;
        animation: rotate1 2s linear infinite;
    }
    .ul1 li:nth-child(1) {
        top: 20px;
        right: 20px;
    }
    @keyframes rotate1 {
        100% {
            top: 20px;
            right: -150px;
        }
    }
</style>

2.完成子弹飞对飞带尾巴的效果

代码如下：

<div class="box">
    <ul class="ul1">
        <li></li>
    </ul>
    <ul class="ul2">
        <li></li>
    </ul>
</div>
<style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #ccc;
        }
        .box {
            filter: contrast(10);
            width: 400px;
            height: 300px;
            background-color: yellow;
            overflow: hidden;
        }
        .ul1 {
            width: 60px;
            height: 300px;
            background-color: green;
            filter: blur(5px);
            position: relative;
            float: left;
        }
        .ul1 li {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: blue;
            filter: blur(5px);
            position: absolute;
            animation: rotate1 10s linear infinite;
        }
        .ul1 li:nth-child(1) {
            /* 小球的初始位置 */
            top: 20px;
            right: 20px;
        }
        /* 右侧小球 */
        .ul2 {
            width: 60px;
            height: 300px;
            background-color: green;
            filter: blur(3px);
            position: relative;
            float: right;
        }
        .ul2 li {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: rgba(99, 19, 228, 0.692);
            filter: blur(5px);
            position: absolute;
            animation: rotate2 10s linear infinite;
        }
        .ul2 li:nth-child(1) {
            top: 20px;
            left: 20px;
        }
        @keyframes rotate1 {
            100% {
                top: 20px;
                right: -350px;
                display: none;
            }
        }
        @keyframes rotate2 {
            100% {
                top: 20px;
                left: -300px;
                display: none;
            }
        }
   </style>

3.完成两子弹碰撞后一起回收到底部效果

代码如下：

<div class="box">
        <ul class="ul1">
            <li></li>
            <li></li>
        </ul>
        <ul class="ul2">
            <li></li>
            <li></li>
        </ul>
        <ul class="ul3">
        </ul>
</div>
<style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #ccc;
        }
        .box {
            filter: contrast(10);
            width: 400px;
            height: 300px;
            background-color: yellow;
            overflow: hidden;
        }
        .ul1 {
            width: 60px;
            height: 140px;
            background-color: green;
            filter: blur(5px);
            position: relative;
            float: left;
        }
        .ul1 li {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: blue;
            filter: blur(5px);
            position: absolute;
            animation: rotate1 10s linear infinite;
        }
        .ul1 li:nth-child(1) {
            /* 小球的初始位置 */
            top: 0;
            right: -80px;
        }
        .ul1 li:nth-child(2) {
            top: 20px;
            right: 20px;
        }
        /* 右侧小球 */
        .ul2 {
            width: 60px;
            height: 140px;
            background-color: green;
            filter: blur(5px);
            position: relative;
            float: right;
        }
        .ul2 li {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: rgba(151, 6, 187, 0.692);
            filter: blur(5px);
            position: absolute;
            animation: rotate2 10s linear infinite;
        }
        .ul2 li:nth-child(1) {
            top: 0;
            left: -80px;
        }
        .ul2 li:nth-child(2) {
            top: 20px;
            left: 20px;
        }
        .ul3 {
            width: 260px;
            height: 40px;
            background-color: green;
            filter: blur(5px);
            position: relative;
            top: 270px;
            left: 50%;
            margin-left: -130px;
        }
        @keyframes rotate1 {
            10% {
                filter: contrast(4) hue-rotate(34deg);
            }
            50% {
                right: -100px;
                filter: contrast(8) hue-rotate(160deg);
            }
            60% {
                top: 150px;
                right: -150px;
                filter: contrast(18) hue-rotate(860deg);
            }
            80% {
                top: 260px;
                right: -150px;
                filter: contrast(18) hue-rotate(2360deg);
            }
            100% {
                top: 450px;
                right: -150px;
                filter: contrast(18) hue-rotate(160deg);
            }
        }
        @keyframes rotate2 {
            10% {
                filter: contrast(4) hue-rotate(34deg);
            }
            50% {
                left: -100px;
                filter: contrast(11) hue-rotate(334deg);
            }
            60% {
                top: 150px;
                left: -150px;
                filter: contrast(18) hue-rotate(660deg);
            }
            80% {
                top: 260px;
                left: -150px;
                filter: contrast(18) hue-rotate(1660deg);
            }
            100% {
                top: 450px;
                left: -150px;
                filter: contrast(18) hue-rotate(660deg);
            }
        }
</style>