javascript - CSS 创意构想 - Part 2 / 2 - 大前端

背景

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

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

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

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

------

正文

本文的主要内容：

混合模式
滤镜
伪类与伪元素
波浪效果
滚动指示器
滚动视差
如何学习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 最神奇之处，滤镜融合效果

分开的两个小球：

融合效果：

code:


<div class="g-mix">
    <div class="ball"></div>
    <div class="box"></div>
</div>


.g-mix {
    position: relative;
    width: 200px;
    height: 200px;
    margin: -300px auto;
    filter: contrast(15);
    background: #000;
    padding: 350px;
    z-index: -1;
}

.ball {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #ff3c41;
    filter: blur(8px);
}


.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0);
    background-color: #ff3c41;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    animation: turn 5s linear infinite;
    transform-origin: -100% center;
    filter: blur(8px);
}

@keyframes turn {
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

核心代码：

.g-mix { filter: contrast(15); } 

.g-ball { filter: blur(8px); }

filter: blur()：给图像设置高斯模糊效果。
filter: contrast()：调整图像的对比度。

当合体的时候，产生了奇妙的融合现象，通过对比度滤镜把高斯模糊的模糊边缘给去掉，利用高斯模糊实现融合效果。

在线demo1:

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

在线demo2:
https://codepen.io/Chokcoco/p...

伪类(:)与伪元素(::)

区分伪元素和伪类，理解使用 : 与 :: 的异同
有一些特定的标签是不支持伪元素 before 和 after 的（<img> 、<input>、<iframe>）
::before,::after 伪元素能实现的，真实子元素都可以做到。伪元素在原先的元素基础上插入额外的元素且这个元素不充当HTML的标签的行为，能很好的保持HTML结构的整洁

用处1: 扩大点击区域

原理： 伪元素是可以代表其宿主元素来响应的鼠标交互事件

示例代码：


<div class="button"> Button </div>

.button::after {
    content:"";
    position:absolute;
    top:-20px;
    right:-20px;
    bottom:-20px;
    left:-20px;
}

在鼠标指针靠近按钮附近的时候，就可以点击，而不用完全移到按钮上。

Live demo:
https://codepen.io/Chokcoco/p...

用处2: 实现`...`加载效果

最早看到这个效果还是张鑫旭的博客。

核心代码：

<p class="dot"></p>

p::after  {
    content: "加载中";
    animation: dot 3s infinite steps(3, start);
}

@keyframes dot {
    33.33% {
        content: "加载中.";
    }
    66.67% {
        content: "加载中..";
    }
    100% {
        content: "加载中...";
    }
}

用处3: 埋点与统计

示例代码：

.button-1:active::after {
    content: url(./report.gif?action=click&id=button1);
    display: none;
}

.button-2:active::after {
    content: url(./report.gif?action=click&id=button2);
    display: none;
}

知道有这个用法就可以了。

更多有趣的伪类/伪元素效果可以移步这里。

波浪效果

1. 使用`text-decoration`实现

使用 text-decoration-style: wavy 生成波浪下划线。

缺点

由于是文本，使用 text-decoration-style: wavy 生成的波浪线受字体的影响很大，极有可能在一部分设备调试正常，在另一部设备由于字体的变化导致譬如动画首尾衔接出现问题。

核心代码：

{
    color: transparent;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: deeppink;
}

在线demo:

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

2. 使用径向渐变实现

效果：

code:

body {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, #607d8b, #673ab7), rgba(0, 0, 0, .5);
    background-size: 100% 50px;
    background-repeat: no-repeat;
    animation: moveC 10s linear infinite;
    
    &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 40px;
        right: 0;
        background-repeat: repeat-x;
        height: 10px;
        background-size: 20px 20px;
        background-image: radial-gradient(circle at 10px -5px, transparent 12px, #fff 13px, #fff 20px);
        animation: moveA 10s linear infinite;
            
    }
    
    &::after {
        content: "";
        position: absolute;
        left: 0;
        top: 35px;
        right: 0;
        background-repeat: repeat-x;
        height: 15px;
        background-size: 40px 20px;
        background-image: radial-gradient(circle at 10px 15px, white 12px, transparent 13px);
        animation: moveB 10s linear infinite;
    }
}

@keyframes moveA{
    0% {
        top: 100px;
    }
    25% {
        top: 40px;
    }
    50% {
        top: 40px;
    }
    100% {
        top: 40px;
    }
}

@keyframes moveB{
    0% {
        top: 150px;
    }
    50% {
        top: 150px;
    }
    75% {
        top: 35px;
    }
    100% {
        top: 35px;
    }
}

@keyframes moveC {
    100% {
        background: linear-gradient(180deg, #607d8b, #673ab7), rgba(255, 255, 255, 0);
        background-size: 100% 50px;
        background-repeat: no-repeat;
    }
}

在线demo:

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

3. 使用 border-radius 实现

先看个圆：

我们平时最常用的就是用来实现圆角, 其实用这个属性，可以玩出很多花里胡哨的效果，比如加个旋转动画，就变得很魔性：

code:

<div class="g-border-1 g-border-2"></div>

div.g-border-2 {
    animation: waveRotate 5s infinite linear;
}

div.g-border-1, div.g-border-2 {
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    border-radius: 45% 45% 47% 46%;
    background: deeppink;
    margin: 50px auto;
    color: #fff;
    font-size: 18px;
    white-space: nowrap;
}

@keyframes waveRotate {
        100% {
            transform: rotate(360deg);
        }
    }

Live demo:

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

应用 1：优惠券的边缘效果

code:

<div class="wave">150</div>

.wave {
    position: relative;
    width: 400px;
    height: 160px;
    margin: 20px auto;
    background: -webkit-gradient(linear, left top, right top, from(#945700), to(#f49714));
    background: linear-gradient(90deg, #945700 0%, #f49714 100%);
    -webkit-filter: drop-shadow(-7px 4px 3px #333);
    filter: drop-shadow(-7px 4px 3px #333);
    font-size: 100px;
    color: #fff;
    font-weight: bold;
    line-height: 160px;
    padding-left: 60px;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 5px;
    text-shadow: -2px -2px 2px #333;
}

.wave::before, .wave::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}

.wave::before {
    width: 10px;
    background-image: radial-gradient(circle at -5px 10px, transparent 12px, #fff 13px, #fff 0px);
    background-size: 20px 20px;
    background-position: 0 15px;
}

.wave::after {
    width: 15px;
    background-image: radial-gradient(circle at 15px 10px, #fff 12px, transparent 13px, transparent 0px);
    background-size: 20px 40px;
    background-position: 0 15px;
}

在线demo:

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

应用 2. 实现波浪动画

code:

<h2>Pure Css Wave</h2>
body {
    position: relative;
    align-items: center;
    min-height: 100vh;
    background-color: rgb(118, 218, 255);
    overflow: hidden;

    &:before, &:after {
        content: "";
        position: absolute;
        left: 50%;
        min-width: 300vw;
        min-height: 300vw;
        background-color: #fff;
        animation-name: rotate;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    &:before {
        bottom: 15vh;
        border-radius: 45%;
        animation-duration: 10s;
    }

    &:after {
        bottom: 12vh;
        opacity: .5;
        border-radius: 47%;
        animation-duration: 10s;
    }
}

@keyframes rotate {
    0% {
        transform: translate(-50%, 0) rotateZ(0deg);
    }
    50% {
        transform: translate(-50%, -2%) rotateZ(180deg);
    }
    100% {
        transform: translate(-50%, 0%) rotateZ(360deg);
    }
}

h2 {
    position: relative;
    color: #333;
    z-index: 10;
    text-align: center;
    height: 100vh;
    line-height: 140vh;
    font-size: 8vw;
    text-shadow: 3px 3px 2px #999;
}

在线demo:

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

应用 3. 实现充电效果

建议调整到 0.5x 大小看完整效果。

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

还有一种粒子融合充电效果：

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

滚动指示器

所谓页指示器，其实就是在页面顶部的一个进度条：

最早的时候，是在张鑫旭的博客里看到的，戳这里查看,

原理其实很简单：

给容器留一条缝，去截断下面的三角形，滑动的时候，所截取的宽度就是当前页面的进度。

在线demo：

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

附张鑫旭的demo：

https://www.zhangxinxu.com/st...

细心的朋友可能发现，你这个进度条不是平的，是斜的。

哈哈，是啊，因为是截取的是直角三角形的横截面, 但是当这个三角形足够高的时候，横截面近似是平的，无伤大雅。

看起来更真实的demo:

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

滚动视差

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技术。

实现滚动时差的方式有多种.

关键点

给容器设置上 transform-style: preserve-3d 和 perspective: xpx，那么处于这个容器的子元素就将位于3D空间中，

再给子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z轴方向距离屏幕（我们的眼睛）的距离也就不一样。

滚动滚动条，由于子元素设置了不同的 transform: translateZ()，那么他们滚动的上下距离 translateY 相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果。

1. 借助 translateZ 实现视差效果

在线demo：

父元素设置 transform-style: preserve-3d 和 perspective: 1px

子元素设置不同的 transform: translateZ

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

2. 借助 translate3d perspective 实现 3D 视差效果

在线demo：

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

详细分析请看：滚动视差？CSS 不在话下

`如何学习CSS`

这里简单给几条建议：

多看，多写
《 CSS Secrets 》、CodePen、CSS-Tricks
CSS Battle
张鑫旭、大漠老师-w3cplus、iCSS、CSS-inspiration

结语

内容差不多就这么多，很多效果还是挺实用的。

其实，平时遇到喜欢的效果，习惯性的打开控制台，看一下他们是怎么实现的，也是一个非常有趣的过程。

别的就不多说了，希望以上内容对大家所有帮助和启发。

如果错误，可以留言指正。

关注我

如果你觉得这篇内容对你挺有启发，那就关注我吧～

CSS 创意构想 - Part 2 / 2

背景

正文

1. 混合模式

1.1 语法

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

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

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

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

2. 滤镜

2.1 增亮图片

2.2 彩色阴影

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

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

伪类(:)与伪元素(::)

用处1: 扩大点击区域

用处2: 实现...加载效果

用处3: 埋点与统计

波浪效果

1. 使用text-decoration实现

缺点

2. 使用径向渐变实现

3. 使用 border-radius 实现

应用 1： 优惠券的边缘效果

应用 2. 实现波浪动画

应用 3. 实现充电效果

滚动指示器

滚动视差

关键点

1. 借助 translateZ 实现 视差效果

2. 借助 translate3d perspective 实现 3D 视差效果

如何学习CSS

结语

关注我

更多精彩：

皮小蛋

引用和评论

我在 Shopee 毕业啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

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

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

用处2: 实现`...`加载效果

1. 使用`text-decoration`实现

应用 1：优惠券的边缘效果

1. 借助 translateZ 实现视差效果

`如何学习CSS`