CSS3 高斯模糊与动画效果

最新推荐文章于 2024-08-29 14:32:15 发布

发量堪忧的小伙子

最新推荐文章于 2024-08-29 14:32:15 发布

阅读量1.3k

点赞数 2

文章标签： css3 css

本文链接：https://blog.csdn.net/qq_41297145/article/details/106984789

版权

CSS3 高斯模糊与动画效果

1. 概述

今天我们要说的内容是 “高斯模糊” 和 “动画效果”

咱先来看看 今天要完成的实验效果

在这里插入图片描述
看见按钮后面的高亮的光晕了么，那个就是用到了css3里面的高斯模糊！

是的，那这个GIF中的效果是如何实现的呢？

别急，这并不难，本文章适合接触过CSS的朋友们学习嗷~ （小声bb，我也算是个老萌新）

2. 高斯模糊说明与语法

接触过图像处理的应该都知道的吧，这里就不细说了，高斯模糊的内容之多完全可以再写一篇文章了，如果看完 2.1 内容后还是不清楚高斯的也别急，2.1 只是作为本文章内容的扩展知识~

2.1 高斯模糊说明

来自百度百科：

高斯模糊（英语：Gaussian Blur），也叫高斯平滑，
通常用它来减少图像噪声以及降低细节层次，其视觉效果就像是经过一个半透明屏幕在观察图像。

从数学的角度来看，图像的高斯模糊过程就是图像与正态分布做卷积。
由于正态分布又叫作高斯分布，所以这项技术就叫作高斯模糊。

高斯函数如下：

在这里插入图片描述
简单来说

你可以只记住后面的“模糊”2个字，
至于css3中是如何处理的，不必太过纠结，
当然，你也可以在《图像处理与matlab应用》中找到高斯模糊的知识点。

下图的右边部分，就是通过高斯模糊处理过后的，与左边形成对比。

在这里插入图片描述

2.2 blur 语法

blur(px)

给图像设置高斯模糊。
"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；
如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。

比如

filter: blur(20px);

这个意思就是，融合周围20像素内容，以此制造模糊效果。

3. 动画效果

css3中的动画效果无疑是非常强大了，但是想要学好它，还是得花点时间才行呢。以下我就提到了css3中动画效果的一部分内容——animation与@keyframes

3.1 @keyframes 语法

@keyframes 语法

@keyframes animationname {keyframes-selector {css-styles;}}

@keyframes的作用是定义一个动画效果，每个动画都有它的名字。

比如下面这段代码
意思就是刚开始是与父级同背景颜色，然后变为白色背景，该动画效果命名为 changcolor

@keyframes changcolor{
	  // 动画的起始状态
      form{
        background: inherit;
      }
      // 动画的结束状态
      to{
        background: #fff;
      }
    }

关于@keyframe详细说明可见菜鸟教程 css3 @keyframes

3.2 animation 语法

animation 语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation 的作用就是调用已经定义好的动画了

如 3.1，我们已经用 @keyframes 定义好了一个名字为 changecolor 的动画效果了。

现在我们想要使用 changecolor 这个动画效果：

animation: changcolor 1s;

以上代码的意思是说，我们要调用 changecolor 这动画效果，并且是以1秒为一个周期运行它。

4. 实现思路与完整代码

4.1 实现思路

好的，看完 2、3 节内容后，朋友们应该对css3中的模糊与动画有所了解了，现在我们回到我们将要实现的目标：

在这里插入图片描述
想必大家都若有所思了，实现思路也不复杂，思路如下：

定义一个高斯模糊动画效果，调用并将时间设置成若干秒

当然，代码里面还用上了 :hover 伪类选择器，不清楚的可以看菜鸟教程 hover选择器

4.2 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS高斯模糊</title>
  <style>
    body{
      background: rgb(3, 4, 44);
      padding: 200px;
    }
    span{
      display: inline-block;
      padding: 8px 20px;
      background-color: #333;
      color: #666;
      position: relative;
      transition: 1s;
      cursor: pointer;
      border-radius: 6px;
    }
    span:hover{
      color: #fff;
    }
    span:hover:before{
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      z-index: -1;
      filter: blur(20px);
      animation: changcolor 1s;
      animation-fill-mode:forwards;
    }
    @keyframes changcolor{
      form{
        background: inherit;
      }
      to{
        background: #fff;
      }
    }
  </style>
</head>
<body>
  <span>content</span>
</body>
</html>