CSS属性-filter用法

想象一下水滴融入大海的感觉,那种丝滑,那种融合度,想象一下子弹穿透墙体的那种冲劲,那种突破感,那种力度,想象一下各种物体被分离开时候的那种不依不舍,这种感觉想要通过我们的css来如何实现呢,那今天就带大家去感受一下,否喽秘~~~

首先用的属性是filter,那么这个属性到底有什么神奇的功效呢,接下来,先让我一一给你介绍

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

  • blur(),作用是调整元素的模糊度
  • brightness() 指的是图片的亮度 (默认为1)如果给0则是全黑
  • contrast() 指的是图片的对比度 (默认为1) 可以设置为百分比
  • grayscale() 指的是改变图片的灰度 (默认是0) 可以设置百分比
  • hue-rotate() 指的是图片色相旋转
  • invert(): 指的是反转输入的图片颜色
  • opacity():指的是图片的透明度
  • saturate():指的是图像饱和度 0是灰色的 100%是完整的填充 超过100% 饱和度更高
  • sepia() 图像转换为深褐色

那就有同学说了,这么多的属性,我到底该怎么用啊,到底有啥用呀,那接下来就重点给你介绍几个属性

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

第一种效果:完成子弹飞出去带尾巴的效果

HTML部分:

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

CSS部分:

<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>

第二种效果:完成子弹飞对飞带尾巴的效果

HTML部分:

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

CSS部分:

<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>

第三种效果:完成两子弹碰撞后一起回收到底部效果

HTML部分:

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

CSS部分:

 <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>

PS:以上案例主要应用的属性filter,属性值是blur,由于blur的特点是多个元素相互碰撞会出现融合,所以就有了上面的小尾巴的效果,而属性值hue-rotate()这个高斯函数的含义就是图片色相旋转,设置不同的度数可以实现不同的颜色值。

发布于 2022-04-13 11:26