乐趣区

CSS-创意构想-Part-22

jiezi

背景

本文接上篇，继续我们的《CSS》创意构想。

因为有一些案例没有代码，本着学习的态度，我需要一个个补齐，也方便大家看。

更新的时候可能就按小节，逐步更新。

废话补多少，开始正文吧。

正文

本文的主要内容：

  • 混合模式
  • 滤镜
  • 伪元素
  • 波浪效果
  • 滚动指示器
  • 滚动视差

1. 混合模式

  • mix-blend-mode
  • background-blend-mode

即：将 两个或者多个 图片 / 图层，利用混合模式 叠加 在一起，产生 新的效果。

比如：实现一个混色：

代码：

<div class="g-mix-diff">
    <p>mix-blend-mode: difference</p>
</div>

.g-mix-diff {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    height: 50vh;
    background: linear-gradient(45deg, #fff 50%, #000 50%);
}

.g-mix-diff p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #fff;
    mix-blend-mode: difference;
}

这个特性是很有用的，比如在一些 底色和前景色 不确定的场景，就可以用到这种模式。

Live Demo：

https://codepen.io/Chokcoco/p…

1.1 语法

mix-blend-mode 有很多种属性，简单的列了一下：

{
    mix-blend-mode: normal;
    mix-blend-mode: multiply;
    mix-blend-mode: screen;
    mix-blend-mode: overlay;
    mix-blend-mode: darken;
    mix-blend-mode: lighten;
    mix-blend-mode: color-dodge;
    mix-blend-mode: color-burn;
    mix-blend-mode: hard-light;
    mix-blend-mode: soft-light;
    mix-blend-mode: difference;
    mix-blend-mode: exclusion;
    mix-blend-mode: hue;
    mix-blend-mode: saturation;
    mix-blend-mode: color;
    mix-blend-mode: luminosity;

    mix-blend-mode: initial;
    mix-blend-mode: inherit;
    mix-blend-mode: unset;
}

具体效果，各位可以用上面的在线 demo 玩一下。

1.2 使用 background-blend-mode: lighten 改变图片颜色

<div class="pic pic1"></div>


$img: 'hand.png';
.pic {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    cursor: pointer;
    transition: .5s all ease-out;
}

.pic1 {background-image: url($img), linear-gradient(#f09, #09f, #f0f);
    background-blend-mode: lighten;
    background-size: cover;
    background-position: 0 0, 0 120px;
    background-repeat: no-repeat;
}

.pic1:hover {background-position: 0 0, 0 0;}

图片：

Hover 效果:

在线 demo:

https://codepen.io/Chokcoco/p…

1.3 使用 mix-blend-mode: lighten 实现抖音 LOGO

合体之后：

code:


<div class="g-container">
    <div class="j"></div>
    <div class="j"></div>
</div>

body {
    background: #000;
    overflow: hidden;
}

.g-container {
    position: relative;
    width: 200px;
    margin: 20px auto;
    filter: contrast(150%) brightness(110%);
}

.j {
    position: absolute;
    top: 0;
    left: 0;
    width: 47px;
    height: 218px;
    z-index: 1;
    background: #24f6f0;

    &::before {
        content: "";
        position: absolute;
        width: 100px;
        height: 100px;
        border: 47px solid #24f6f0;
        border-top: 47px solid transparent;
        border-radius: 50%;
        top: 121px;
        left: -147px;
        transform: rotate(45deg);
    }
    
        &::after {
        content: "";
        position: absolute;
        width: 140px;
        height: 140px;
        border: 40px solid #24f6f0;
        border-right: 40px solid transparent;
        border-top: 40px solid transparent;
        border-left: 40px solid transparent;
        top: -110px;
        right: -183px;
        border-radius: 100%;
        transform: rotate(45deg);
        z-index: -10;
    }
}

.j:last-child {
    left: 10px;
    top: 10px;
    background: #fe2d52;
    z-index: 100;
    mix-blend-mode: lighten;
    animation: moveLeft 10s infinite;
    
    &::before {
        border: 47px solid #fe2d52;
        border-top: 47px solid transparent;

    }
    &::after {
        border: 40px solid #fe2d52;
        border-right: 40px solid transparent;
        border-top: 40px solid transparent;
        border-left: 40px solid transparent;
    }
}

@keyframes moveLeft {
    0% {transform: translate(200px);
    }
    50% {transform: translate(0px);
    }
    100% {transform: translate(0px);
    }
}

在线 demo：

https://codepen.io/Chokcoco/p…

1.4 深入挖掘，制作一些有意思的效果，给网站增色

比如之前哀悼的时候，一行代码让网站变黑白。

html {filter: grayscale(100%); 
}

1.4 其他一些有意思的效果：

比如：一个五彩斑斓的 loading:

https://codepen.io/Chokcoco/p…

动感 404:

https://codepen.io/Chokcoco/p…

光影效果：

在线 demo：

https://codepen.io/Chokcoco/p…

2. 滤镜

看，图片加上不同滤镜之后的效果：

这么神奇的效果，也是一行代码就能实现的。

{filter: blur(5px);
    filter: brightness(0.4);
    filter: contrast(200%);
    filter: drop-shadow(16px 16px 20px blue);
    ...

    /* Apply multiple filters */
    filter: contrast(175%) brightness(3%);
}

在线 demo :

https://codepen.io/Chokcoco/p…

需要注意的是：

  • 滤镜可以叠加
  • 多个滤镜叠加，顺序不同，效果不同。

看到这的时候，你是不是会想起，一般来说，矩阵运算不满足交换律的，这条规律呢？

2.1 增亮图片

增亮之后：

:hover {filter: brightness(1.1) contrast(110%);
}

在线 demo :

https://codepen.io/Chokcoco/p…

2.2 彩色阴影

{filter: blur(10px) brightness(80%) opacity(.8); }

在线 demo：

https://codepen.io/Chokcoco/p…

2.3 hue-rotate() 实现渐变背景

div {background: linear-gradient(30deg, #ffcc00, deeppink, #9c27b0,);
    animation: hueRotate 20s infinite alternate;
}

@keyframes hueRotate {
    100% {filter: hue-rotate(360deg);
    }
}

https://codepen.io/scaukk/pen…

2.4 CSS filter 最神奇之处，滤镜融合效果

电脑要没电了，明天继续写。

伪元素

波浪效果

滚动指示器

滚动视差

退出移动版