关于前端:一种巧妙的使用-CSS-制作波浪效果的思路

47次阅读

共计 3467 个字符,预计需要花费 9 分钟才能阅读完成。

在之前,我介绍过几种应用纯 CSS 实现波浪成果的形式,对于它们有两篇相干的文章:

  • 纯 CSS 实现波浪成果!
  • 巧用 CSS 实现酷炫的充电动画

本文将会再介绍另外一种应用 CSS 实现的波浪成果,思路十分有意思。

从定积分实现曲边三角形面积说起

在进入主题之前,先看看这个,在高等数学中,咱们能够通过定积分求二次函数曲边图形面积。

咱们能够将曲线下的面积宰割成 n 个的细高的矩形,当 n 有限趋近于无穷时,所有矩形的面积就等于曲边图形的面积。

两张简略的示意图,图取自为什么定积分能够求面积?:

当 n 有限趋近于无穷时,所有矩形的面积就等于曲边图形的面积:

利用这个思路,咱们也能够通过多个 div 在 CSS 中模拟出一条曲边,也就是波浪线。

Step 1. 将图形切割为多份

首先,咱们能够定义一个父容器,父容器下有 12 个子 div:

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

通过 flex 布局,简略布局一下,失去这样一个图形,每个子元素等高:

.g-container {
    width: 200px;
    height: 200px;
    border: 2px solid #fff;
    display: flex;
    align-items: flex-end;
}

.g-item {
    flex-grow: 1;
    height: 60px;
    background-color: #fff;
}

成果如下:

Step 2. 让每个子元素以不同负提早运行高度变换动画

接下来,简略革新下,咱们须要让这个图动起来,通过扭转每个子元素的高度实现:

.g-item {
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: heightChange 1s infinite ease-in-out alternate;
}

@keyframes heightChange {
    from {height: 60px;}
    to {height: 90px;}
}

成果如下:

接下来,只须要,让每个子元素的动画程序设定一个不同工夫的负提早即可,就能够失去一个初步的波浪成果,这里为了缩小工作量,咱们借助 SASS 实现:

$count: 12;
$speed: 1s;

.g-item {--f: #{$speed / -12};
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: heightChange $speed infinite ease-in-out alternate;
}

@for $i from 0 to $count {.g-item:nth-child(#{$i + 1}) {animation-delay: calc(var(--f) * #{$i});
    }
}

@keyframes heightChange {
    from {height: 60px;}
    to {height: 90px;}
}

这样,咱们就失去了一个初步的波浪成果:

Step 3. 打消锯齿

能够看到,上述的波浪动画是存在肯定的锯齿的,接下来咱们要做的就是尽可能的打消掉这些锯齿。

法一:减少 div 的数量

依照一开始应用定积分求曲边图形面积的思维,咱们只须要尽可能减少子 div 的数量即可,当 div 的数量无穷多的时候,锯齿也就会隐没不见。

咱们能够尝试将上述的 12 个子 div,替换成 120 个试下,一个一个写 120 个 div 太费劲了,咱们这里借助 Pug 模板引擎:

div.g-container
 -for(var i=0; i<120; i++)
    div.g-item

对于 CSS 代码,只须要改变动画提早的工夫即可,120 个子 div 的负提早都管制在 1s 内:

// 12 -- 120
$count: 120;
$speed: 1s;

.g-item {
    // 留神,只有这里产生了变动
    --f: #{$speed / -120};
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: heightChange $speed infinite ease-in-out alternate;
}

@for $i from 0 to $count {.g-item:nth-child(#{$i + 1}) {animation-delay: calc(var(--f) * #{$i});
    }
}

这样,咱们就能够失去一条比拟润滑的曲线啦:

法二:通过 transform: skew() 模仿弧度

当然,理论状况,应用那么多个 div 切实是太节约了,那么有没有其它办法在 div 数量比拟少的状况下,也可能尽可能的打消锯齿呢?

这里,咱们能够尝试给子元素在静止变换的过程中增加不同的 transform: skewY() 去模仿弧度。

再革新下代码,咱们将 div 的数量调低,并且给每个子 div 再增加一个 transform: skewY() 的动画成果:

div.g-container
 -for(var i=0; i<24; i++)
    div.g-item

残缺的 CSS 代码如下:

$count: 24;
$speed: 1s;

.g-item {
    // 留神,只有这里产生了变动
    --f: #{$speed / -24};
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: 
        heightChange $speed infinite ease-in-out alternate,
        skewChange $speed infinite ease-in-out alternate;
}

@for $i from 0 to $count {.g-item:nth-child(#{$i + 1}) {
        animation-delay: 
            calc(var(--f) * #{$i}), 
            calc(var(--f) * #{$i} - #{$speed / 2});
    }
}

@keyframes heightChange {
    from {height: var(--h);
    }
    to {height: calc(var(--h) + 30px);
    }
}

@keyframes skewChange {
    from {transform: skewY(20deg);
    }
    to {transform: skewY(-20deg);
    }
}

为了不便了解,首先看看,高度变换动画统一的状况下,子 div 的增加了 skewY() 的变换是如何的:

能看到每次变换是有显著的突起的锯齿的,叠加上提早的高度变换,就可能很好的打消大部分的锯齿成果:

至此,咱们就失去了另外一种 div 数量适中的打消锯齿的办法!上述所有成果的残缺代码,你能够戳这里:

CodePen — PureCSS Wave Effects

混合应用

最初,咱们能够通过调整几个变量参数,将几个不同的波浪成果组合在一起,失去一些组合成果,也很不错。

相似这样:

CodePen — PureCSS Wave Effects 2

基于此,我联想到咱们公司(Shopee)的母公司 — Sea Group 的 LOGO,它长得如下:

利用本文的计划,给它实现一个动静的 LOGO 动画:

CodePen Demo — PureCSS Wave – Sea Group Logo

毛病

该计划的毛病还是很显著的:

  • 首先是废 div,须要比拟多的 div 来实现成果,而且 div 越多,成果会越好,当然减少到肯定水平,卡顿是不可避免的
  • 锯齿无奈齐全打消,这个是最致命或者说影响它真正可能有用武之地的中央吧

当然,本文的目标重点更多的是开辟一下思维,探讨一下这种形式的优劣,实现动画的整个过程,动画负延迟时间的使用,都是有一些参考学习意义的。CSS 还是十分乏味的~ 🤣

最初

好了,本文到此结束,心愿对你有帮忙 :)

想 Get 到最有意思的 CSS 资讯,千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS,继续更新,欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议,能够多多交换,原创文章,文笔无限,满腹经纶,文中若有不正之处,万望告知。

正文完
 0