CSS特效

2021.9.30

在学习过程中发现一个神仙仓库 CSS-Inspiration，专注 CSS，有各种特效、布局的 CSS 实现，每个 Demo 还附上了 Codepan，简直不要太贴心！爱了爱了(顿时对自己这篇文章无比唾弃 😕)

1. 按钮冒泡效果#

点我

效果来源于毒鸡汤，看到的时候感觉怪好看的，就查看源码学习了一下~

首先是关于按钮的基本设置：

.bubbly-button {  font-family: 'Helvetica', 'Arial', sans-serif;  display: inline-block;  font-size: 1em;  padding: 2em 8em;  appearance: none;  background-color: #fff;  border-radius: 40px;  border: none;  cursor: pointer;  position: absolute;  box-shadow: 0 2px 25px rgba(93, 227, 236, 0.966);}

然后是特效核心之一：过渡效果 transition，它定义了 transform 属性和 box-shadow 的切换方法 ease-in 和切换的过渡时间：

transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;

这个属性配合着伪类选择器使用，元素在被鼠标点击到松开的时间内会被 :active 选择器选中，其中定义的 transform 和 box-shadow 属性就会根据 transition 属性的定义进行过渡处理，也就是视觉上会感觉元素在逐渐变小，阴影轮廓也在逐渐变得透明：

.bubbly-button:active {  transform: scale(0.9);  box-shadow: 0 2px 25px rgba(3, 227, 236, 0.2);}

接下来需要实现点击按钮时出现的泡泡效果了。

按钮旁的泡泡实际上是在伪元素 ::before 和 ::after 中定义的 background-image ，使用 radial-gradient 来创建小泡泡。而 display:none 和 top、bottom 的偏移让这些小泡泡初始时是隐藏的且位于按钮的上下两侧：

.bubbly-button:before {  display: none;  top: -75%;  background-image: radial-gradient(circle, #fff 20%, transparent 20%),       radial-gradient(circle, transparent 20%, #fff 20%, transparent 30%),       radial-gradient(circle, #fff 20%, transparent 20%),       radial-gradient(circle, #fff 20%, transparent 20%),       radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%),       radial-gradient(circle, #fff 20%, transparent 20%),       radial-gradient(circle, #fff 20%, transparent 20%),       radial-gradient(circle, #fff 20%, transparent 20%),       radial-gradient(circle, #fff 20%, transparent 20%);  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;}.bubbly-button:after {  display: none;  bottom: -75%;  background-image: radial-gradient(circle, #fff 20%, transparent 20%),       radial-gradient(circle, #fff 20%, transparent 20%),       radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%),       radial-gradient(circle, #fff 20%, transparent 20%),       radial-gradient(circle, #fff 20%, transparent 20%),       radial-gradient(circle, #fff 20%, transparent 20%),       radial-gradient(circle, #fff 20%, transparent 20%);  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;}

伪元素 ::before 和 ::after 还有着一些共同的样式处理：绝对定位，以使用 left、top、bottom 定位，no-repeat 设置背景不要自动填充，否则会出现很糟糕的效果...

.bubbly-button:before, .bubbly-button:after {  position: absolute;  content: '';  display: block;  width: 140%;  height: 100%;  left: -20%;  background-repeat: no-repeat;}

在创建了基本元素之后，最后则是泡泡动画效果的核心：animation 属性，animation 中指定了自定义的关键帧 @keyframes 动画、动画时间函数、持续时间以及动画执行前后的状态 forwards :

.bubbly-button.animate:before {  display: block;  animation: topBubbles ease-in-out 0.75s forwards;}.bubbly-button.animate:after {  display: block;  animation: bottomBubbles ease-in-out 0.75s forwards;}

关键帧中则定义了这些小泡泡在动画过程中的三个时间点的位置和大小：

@keyframes topBubbles {  0% {      background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;  }  50% {      background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;  }  100% {      background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;      background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;  }}@keyframes bottomBubbles {  0% {      background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;  }  50% {      background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;  }  100% {      background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;      background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;  }}

我们又发现，多了一个类 animate，所以完成这个效果我们还需要使用 JS 来操作动画播放时机，也就是在点击元素的时候将 animate 添加进元素的 classList 中，当动画结束后再将其移除：

function animateButton(e) {    e.preventDefault;    e.target.classList.remove('animate');    e.target.classList.add('animate');    setTimeout(function() {        e.target.classList.remove('animate');    }, 700);}

如此，我们就完成了一个好看的按钮特效了~

2. 文字色彩流动效果#

2021.5.3 update

在学习的时候发现了一个文字特效，感觉挺好看的，于是乎查看源码学习一下~

来源

先看效果：

这个特效使用了 svg 属性来完成。对于一个文字对象，使用 stroke 属性来描绘其外轮廓的颜色，并配合 stroke-dasharray 属性使用虚线来描边。最后，再使用动画属性 animation 和 @keyframes 来循环设置描边虚线的偏移位置 stroke-dashoffset 就完成了单种颜色的文字对象的虚线描边动画效果了。

那么特效中几种颜色的虚线描边效果就是设置几个不同颜色的描边动画，并设置不同的动画播放延迟，就能完成上面的动画表现效果了。

此外，svg 属性 fill 需要设置设置为 none ，使文本不应用设置的颜色填充（不设置的话颜色填充叠加会很丑...）

HTML
CSS

<svg width="130" height="60">    <text text-anchor="middle" x="50%" y="50%" class="text text-1">绯世</text>    <text text-anchor="middle" x="50%" y="50%" class="text text-2">绯世</text>    <text text-anchor="middle" x="50%" y="50%" class="text text-3">绯世</text>    <text text-anchor="middle" x="50%" y="50%" class="text text-4">绯世</text></svg>

.text {    font-size: 32px;    text-transform: uppercase;    fill: none;    stroke-width: 1px;    stroke-dasharray: 90 310;    animation: dash 6s infinite linear;}
.text-1 {    stroke: #3498db;    text-shadow: 0 0 1px #3498db;    animation-delay: -1.5s;}
.text-2 {    stroke: #e74c3c;    text-shadow: 0 0 1px #f39c12;    animation-delay: -3s;}
.text-3 {    stroke: #e74c3c;    text-shadow: 0 0 1px #e74c3c;    animation-delay: -4.5s;}
.text-4 {    stroke: #9b59b6;    text-shadow: 0 0 1px #9b59b6;    animation-delay: -6s;}
@keyframes dash {    100% {        stroke-dashoffset: -400;    }}

关于 SVG 的 stroke-dasharray 和 stroke-dashoffset 属性的理解可看：

3. 点赞爱心效果#

点赞特效在文摘页面中有使用，下面也简单做个展示：

点赞特效的实现方式和 B站小火箭特效的实现相似，即使用了一张长图，每次展示长图的一部分，当点击爱心时，在一个很短的时间内不断偏移图片位置，造成一种动画效果。长图如下：

具体实现：

HTML
JS
CSS

<span class="icon-heart"></span>

// 点击爱心时将添加/移除类名 is-activefunction toggleClass(e) {    e.target.classList.toggle('is-active');}
document.getElementByClassName('icon-heart')[0].onclick = toggleClass;

.icon-heart {    width: 100px;    height: 100px;    display: inline-block;    background: url("https://cssanimation.rocks/images/posts/steps/heart.png") no-repeat;    background-position: 0 0;    cursor: pointer;    -webkit-transition: background-position 1s steps(28);    transition: background-position 1s steps(28); /* 定义偏移转换效果，根据 background-position 的位置在 1 秒内进行 28 次偏移 */    -webkit-transition-duration: 0s;    transition-duration: 0s;  /* 当 is-active 被移除时，恢复灰色的爱心 */}
.is-active {    -webkit-transition-duration: 1s;    transition-duration: 1s;    background-position: -2800px 0;}

特效来源

4. CSS 绘制气泡聊天框#

from

聊天框效果如下，可在 codepen 中查看代码。

实现并不难，要点在于聊天框左边三角形的绘制。

具体实现则是使用 css 的 border 属性绘制三角形，使用定位属性将其放在聊天框的左边，再绘制一个相同的白色三角形来遮挡实心三角形的部分内容即可。

特效收藏#

一组超链接 hover 动画效果，demo | 代码仓库
一组按钮 hover 与点击动画效果，demo | 代码仓库
另一组按钮效果，demo
一组图标 hover 动画效果，demo | 代码仓库

Waves 特效#

Waves 特效形如波浪，在点击的位置生成扩散圈，可以作用在按钮、图片、Icon、div 等元素上。

Waves 特效也应用在了文摘页面中的卡片中，欢迎查看效果~

使用起来很简单：引入 waves.min.css 和 waves.min.js ，然后在卡片元素上添加类名 waves-effect，再使用 Waves.displayEffect() 开启特效即可。

效果与使用方法可看 Waves

另一种使用方法，在 github 上下载相关代码，引入 dist 文件夹下的 waves.min.css 和 waves.min.js 后即可在元素上添加类名来使用，非常方便，使用介绍。