CSS 创意构想 - Part 2 / 2

时间  2021-01-18
标签 php css html git github web 面试 segmentfault 缓存 less 栏目 CSS 繁體版
原文   原文链接

背景

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

由于有一些案例没有代码， 本着学习的态度， 我须要一个个补齐， 也方便你们看。css

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

废话很少少， 开始正文吧。git

------github

正文

本文的主要内容：web

  • 混合模式
  • 滤镜
  • 伪类与伪元素
  • 波浪效果
  • 滚动指示器
  • 滚动视差
  • 如何学习CSS

1. 混合模式

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

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

好比：实现一个混色：segmentfault

image.png

代码：缓存

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

这个特性是颇有用的， 好比在一些底色和前景色不肯定的场景， 就能够用到这种模式。less

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

image.png

具体效果， 各位能够用上面的在线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;
}

图片：

image.png

Hover 效果:

image.png

在线demo:

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

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

image.png

合体以后：

image.png

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%); 
}

image.png

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

好比： 一个五彩斑斓的loading:
image.png
https://codepen.io/Chokcoco/p...

动感404:

image.png

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

光影效果：

image.png

在线demo：

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

2. 滤镜

看， 图片加上不一样滤镜以后的效果：

image.png

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

{
    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 增亮图片

image.png

增亮以后：

image.png

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

在线demo :

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

2.2 彩色阴影

image.png

{ 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 最神奇之处，滤镜融合效果

分开的两个小球：

image.png

融合效果：

image.png

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

image.png

使用 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. 使用径向渐变实现

效果：

image.png

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

先看个圆：

image.png

咱们平时最经常使用的就是用来实现圆角, 其实用这个属性， 能够玩出不少花里胡哨的效果， 好比加个旋转动画， 就变得很魔性：

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： 优惠券的边缘效果

image.png

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. 实现波浪动画

image.png

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 大小看完整效果。

image.png

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

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

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

滚动指示器

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

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

原理其实很简单：

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

在线demo：

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

image.png

附张鑫旭的demo：

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

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

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

image.png

看起来更真实的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

这里简单给几条建议：

结语

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

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

别的就很少说了， 但愿以上内容对你们全部帮助和启发。

若是错误， 能够留言指正。

关注我

若是你以为这篇内容对你挺有启发，那就关注我吧～

图片

更多精彩：

聊聊 ESM、Bundleless 、Vite 、Snowpack

记一次 「 无限列表 」滚动优化

「 面试三板斧 」之 代码分割（上）

「 面试三板斧 」之缓存 (上)

「 面试三板斧 」之缓存 (下)

「 面试三板斧 」之 HTTP （上）

「 面试三板斧 」之 HTTP （下）

「 面试三板斧 」之  this

本文同步分享在 博客“皮小蛋”（SegmentFault）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程