整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

如何使用CSS过渡创建逼真的运动模糊效果

如何使用CSS过渡创建逼真的运动模糊效果

是否曾经拍摄过某些物体快速移动的照片,尤其是在光线不足的情况下,并变成了模糊的条纹?还是整个相机都晃了晃,整个镜头变成了一系列条纹?这是运动模糊,是相机工作原理的副产品。

运动模糊101

想象一下相机。它有一个百叶窗,一扇门打开以允许光线进入,然后关闭以阻止光线进入。从它打开到关闭的时间是一张照片或一幅运动图像。

如果在按下快门期间框架的对象在移动,我们最终会拍摄到物体移动的照片。在电影上,这表现为稳定的涂片,对象在其起点到终点之间处于无限多个位置。运动对象最终也变成半透明的,在它后面可以看到部分背景。

计算机要伪造的方法是对几个子帧进行建模,然后以不透明度的一小部分将它们组合在一起。将同一对象的大量副本沿运动路径放置在稍有不同的位置,可以创建令人信服的运动模糊传真。

视频合成应用程序倾向于对其运动模糊应具有的细分设置进行设置。如果将此值设置得非常低,则可以确切地看到该技术的工作原理,例如,一个简单的白点动画的帧,每帧四个样本:

每帧四个样本。

每帧有12个样本。

到我们每帧有32个样本时,它已经接近于完全真实了,尤其是以每秒多个帧的速度观看时。

运动模糊所需的样本数量完全与内容有关。边缘锋利的小东西移动得很快,将需要很多子帧。但是一些模糊的动作缓慢移动可能只需要几个。通常,使用更多会产生更令人信服的效果。

用CSS做到这一点

为了在CSS中近似这种效果,我们需要创建大量相同的元素,使它们成为半透明的,并将它们的动画偏移一秒钟。

首先,我们将使用CSS过渡为想要的动画设置基础。我们将使用一个简单的黑点,然后将其分配给悬停时的变换(如果您在移动设备上,则点按)。我们还将为边框半径和颜色设置动画,以显示此方法的灵活性。

这是没有运动模糊的基本动画:

HTML:

<div class="container">
  Hover / Tap
  <div class="dot"></div>
</div>
.container {
        width: 300px;
        height: 100px;
        position: relative;
        margin: 100px auto;
        border-radius: 50px;
        border: 3px dotted #eee;
        text-align: center;
        font-family: sans-serif;
        padding-top: 10px;
      }

.dot {
        position: absolute;
        background: black;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        transform: rotate(0deg);
        top: 25px;
        left: 25px;
        transition: all 0.75s cubic-bezier(.71,0,.33,1.56) 0ms;
      }

      .container:hover .dot {
        transform: rotate(360deg);
        border-radius: 0%;
        left: 225px;
        background: pink;
      }

效果图:

现在,让我们制作黑点的20个相同的副本,并将它们完全放置在具有绝对位置的完全相同的位置。每个副本的不透明度为10%,比数学上正确的数字略高一些,但是我发现我们需要使它们更加不透明以看起来足够牢固。

下一步就是奇迹发生的地方。我们为点对象的每个克隆添加一个稍微增加的过渡延迟值。它们都将运行完全相同的动画,但是它们各自将偏移三毫秒。

HTML代码:

<div class="container">
  Hover / Tap
          <div class="dot one"><br></div>
        <div class="dot two"><br></div>
        <div class="dot three"><br></div>
        <div class="dot four"><br></div>
        <div class="dot five"><br></div>
        <div class="dot six"><br></div>
        <div class="dot seven"><br></div>
        <div class="dot eight"><br></div>
        <div class="dot nine"><br></div>
        <div class="dot ten"><br></div>
        <div class="dot eleven"><br></div>
        <div class="dot twelve"><br></div>
        <div class="dot thirteen"><br></div>
        <div class="dot fourteen"><br></div>
        <div class="dot fifteen"><br></div>
        <div class="dot sixteen"><br></div>
        <div class="dot seventeen"><br></div>
        <div class="dot eighteen"><br></div>
        <div class="dot nineteen"><br></div>
        <div class="dot twenty"><br></div>
</div>

CSS代码:

.container {
        width: 300px;
        height: 100px;
        position: relative;
        margin: 100px auto;
        border-radius: 50px;
        border: 3px dotted #eee;
        text-align: center;
        font-family: sans-serif;
        padding-top: 10px;
      }

.dot {
        position: absolute;
        background: black;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        transform: rotate(0deg);
        top: 25px;
        left: 25px;
        opacity: 0.1;
        transition: all 0.75s cubic-bezier(.71,0,.33,1.56) 0ms;
      }

      .container:hover .dot {
        transform: rotate(360deg);
        border-radius: 0%;
        left: 225px;
        background: pink;
      }

.dot.two {
        transition-delay: 3ms;
      }
      .dot.three {
        transition-delay: 6ms;
      }
      .dot.four {
        transition-delay: 9ms;
      }
      .dot.five {
        transition-delay: 11ms;
      }
      .dot.six {
        transition-delay: 14ms;
      }
      .dot.seven {
        transition-delay: 17ms;
      }
      .dot.eight {
        transition-delay: 20ms;
      }
      .dot.nine {
        transition-delay: 23ms;
      }
      .dot.ten {
        transition-delay: 26ms;
      }
      .dot.eleven {
        transition-delay: 29ms;
      }
      .dot.twelve {
        transition-delay: 32ms;
      }
      .dot.thirteen {
        transition-delay: 35ms;
      }
      .dot.fourteen {
        transition-delay: 38ms;
      }
      .dot.fifteen {
        transition-delay: 41ms;
      }
      .dot.sixteen {
        transition-delay: 44ms;
      }
      .dot.seventeen {
        transition-delay: 47ms;
      }
      .dot.eighteen {
        transition-delay: 50ms;
      }
      .dot.nineteen {
        transition-delay: 53ms;
      }
      .dot.twenty {
        transition-delay: 56ms;
      }

效果图:

这种方法的优点在于,它创建了适用于大量不同动画的伪运动模糊效果。我们可以在那里进行颜色更改,缩放过渡,奇数定时,并且运动模糊效果仍然有效。

使用20个对象克隆可用于大量快速动画和慢速动画,但是使用较少的克隆仍可以产生合理的运动模糊感。您可能需要调整克隆对象的数量,它们的不透明度以及过渡延迟的数量,以使用您的特定动画。我们刚刚看过的演示具有稍微超乎想象的模糊效果,使其更加突出。

最终,随着计算机功能的发展,我希望某些主要的浏览器可能会开始在本地提供这种效果。然后,我们就可以消除拥有20个相同对象的荒谬之处。同时,这是一种逼真的逼真的运动模糊的合理方法。

lass和 ID 选择器

  • 我们之前给一个段落中添加斜体的标识的时候我们会在CSS里面这样做,这次我们将学习使用ID选择器来实现这项功能


  • 我们在之前的代码中给标签添加id
 <p id="author">
          <strong>劳拉·琼斯 (Laura Jones)</strong> 于 2027 年 6 月 21
          日星期一发布
        </p>


  • CSS代码是这样的,相信你能明白这是什么意思,相当于给这个段落起名字一样
#author {
  font-style: italic;
  font-size: 18px;
}

相同的道理,我们给版权信息也用这种方法去写;如下所示:

    <footer><p id="copyright">版权所有 ? 2027 sbz</p></footer>


类选择器

  • 除了id选择器,还有类选择器。那么这两个选择器有什么区别呢?id选择器不允许id名字有相同的,而类选择器可以多种元素使用同一个这样的选择器。
  • 举个例子,我们现在将下方的几个作者添加同样的类选择器
        <li>
          <img
            src="img/related-1.jpg"
            alt="related-1"
            width="75px"
            height="75px"
          /><a href="#">如何去学习网页开发</a>
          <p class="related-author">作者:乔纳斯·施梅德特曼</p>
        </li>
        <li>
          <img
            src="img/related-2.jpg"
            alt="related-2"
            width="75px"
            height="75px"
          />
          <a href="#">CSS 的未知力量</a>
          <p class="related-author">作者:吉姆.狄龙</p>
        </li>
        <li>
          <img
            src="img/related-3.jpg"
            alt="related-3"
            width="75px"
            height="75px"
          />
          <a href="#">为什么 JavaScript 很棒</a>
          <p class="related-author">作者:玛蒂尔达</p>
        </li>


在CSS上,我们这样写

.related-author {
  font-size: 18px;
  font-weight: bold;
}



  • 如上图所示,这些无序列表的黑点看上去实在难看,如何将它去除呢?如下
ul {
  list-style: none;
}



但是如果html中有多个无序列表,这个时候我们就需要使用类选择器去做这件事情了

HTML代码如下:

<ul class="related">
        <li>
          <img
            src="img/related-1.jpg"
            alt="related-1"
            width="75px"
            height="75px"
          /><a href="#">如何去学习网页开发</a>
          <p class="related-author">作者:乔纳斯·施梅德特曼</p>
        </li>
        <li>
          <img
            src="img/related-2.jpg"
            alt="related-2"
            width="75px"
            height="75px"
          />
          <a href="#">CSS 的未知力量</a>
          <p class="related-author">作者:吉姆.狄龙</p>
        </li>
        <li>
          <img
            src="img/related-3.jpg"
            alt="related-3"
            width="75px"
            height="75px"
          />
          <a href="#">为什么 JavaScript 很棒</a>
          <p class="related-author">作者:玛蒂尔达</p>
        </li>
      </ul>

CSS代码如下:

.related {
  list-style: none;
}


  • 疑问:为啥上面的不用id选择器,而是用class呢?
  • 因为当我们不止一个元素需要使用CSS样式的时候,我们通常都会选择类选择器


注:在实际的生活中,我们都会使用类选择器,因为在id选择器只能使用一次,如果你后续使用同样的css样式会增加你的代码量,所以即使是一个CSS,也建议使用类选择器,而不是id选择器。

tml

  • 概念
  • 前端最核心的技术 HTML + CSS + javascript
  • HTML - 结构 - 骨架
  • CSS - 样式 - 效果
  • JAVASCRIPT - (用户)行为 - 做的事情
  • 超文本标记语言
  • 超文本
  • 文本(txt文件) - 浏览器可以直接打开
  • 如果具有中文,可能出现乱码问题
  • 标记
  • 语法结构 - <标签名>
  • 注意 - 浏览器解析标记(规定的标记内容)
  • 注意
  • HTML是不严格的语言
  • 允许不用编写所有内容
  • 标签名没有明确的规定(大小写)
  • 建议标签名使用小写
  • XHTML
  • 解释为严格意义的HTML

HTML结构

HTML结构

<!DOCTYPE html> - 声明:当前页面使用的是哪个HTML版本

<html lang="en">- 根标签:有且仅有一个

<head>- 用于设置当前页面的信息

<meta charset="UTF-8"> - 设置当前页面的编码

<title>Title</title> - 当前页面的标题

</head>

<div>- 用于显示在浏览器中

</div>

</html>

声明

  • 注意 - 必须在HTML文档的 0 行 0 列
  • 记住 - HTML5的声明<!DOCTYPE html>
  • 作用 - 告诉浏览器当前HTML页面使用的版本
  • 不同的HTML版本支持不同的标记(标签)内容

根标签

  • <html></html>
  • 除声明以外,所有内容全部被包含在根标签中
  • 注意 - 有且仅有一个
  • 标记(标签)
  • 起始标签 - 有开始,有结束
  • 开始标签 - <标签名>
  • 结束标签 - </标签名>
  • 空标签 - 只有开始标签
  • <br/>- 换行标签
  • 注意 - 建议使用小写

<meta>元素

  • 第一个作用 - 设置当前HTML页面的编码格式
  • <meta charset="UTF-8">
  • 第二个作用 - 设置当前HTML页面的关键字
  • <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
  • 第三个作用 - 设置当前HTML页面的描述(很少)
  • <meta name="description" content="Free Web tutorials on HTML and CSS">
  • 第四个作用 - 设置当前HTML页面的作者
  • <meta name="author" content="King">

HTML属性

  • 出现在标签中的开始标签中,而不是结束标签
  • 格式
  • 属性名=属性值
  • 属性值 - 必须使用双引号包裹

HTML页面被搜索引擎抓取

  • <title>元素 - 页面的标题
  • <meta name="keywords">元素 - 页面的关键字
  • <h1>元素 - 标题

分类

  • 私有属性 - 当前标签独有的属性
  • 标准属性 - 几乎所有标签都有的属性
  • 事件属性 - 标准事件(了解)

HTML标题

  • <h1> ~ <h6> - 从最大到最小
  • 并不关心标题显示的效果 - 可以通过 CSS 完成
  • 关心标题的 语义化
  • 语义化 - 当前标签的含义

HTML列表

  • 有序列表

<ol>

<li></li>

</ol>

  • 默认情况下 - 1,2,3,4,5...
  • 无序列表

<ul>

<li></li>

</ul>

  • 默认情况下 - 黑点
  • 定义列表

<dl>

<dt>列表名称</dt>

dd>列表项</dd>

</dl>

  • HTML链接

<a href="地址"></a>

链接元素<a>

  • 作用
  • 用于从当前页面跳转到另一个(指定)页面
  • 实现锚点效果
  • 实现回到顶部效果
  • 实现发送邮件功能(了解)
  • href="mailto:邮件地址"
  • 路径(地址)
  • 绝对路径 - 查找的开始位置是固定
  • 相对路径 - 查找的开始位置是变化
  • 在实际开发中,使用更多
  • 完整的地址
  • http:// localhost : 8080 /day02 #name
  • 网络协议 IP地址 端口号 相对路径 锚点
  • localhost - 等价于 127.0.0.1 - 表示本机
  • 网络访问 - 通过互联网
  • http://192.168.10.165:63342/D...
  • file:///C:/0507/DAY02/CODE/00.html

C:07\DAY02\CODE>C:\0507\DAY02\CODE\00.html<.html

  • 本地访问 - 和网络无关

图片元素

  • <img> - 空标签,没有结束标签
  • 必要属性 - src属性

可选属性

  • width
  • height
  • 单位
  • 像素值
  • 百分值

HTML表格

  • 概念 - 具有行和列(单元格)
  • 行 - 表示水平方向(多个单元格)
  • 列 - 表示垂直方向(多个单元格)
  • HTML表格
  • 表示为表格
  • 作用
  • 表格的语义化 - 配合 CSS 可以实现漂亮的表格效果
  • 利用表格的行和列的概念 - 实现页面元素的布局
  • HTML表单
  • <form>标签
  • 语义化 - 表示为表单
  • 容器元素 - 浏览器中不会有任何显示效果
  • 文件的编码格式 - UTF-8
  • HTML页面的编码格式 - UTF-8
  • <meta charset="UTF-8">
  • 设置当前HTML页面的编码格式
  • 在浏览器运行当前HTML页面时,告诉浏览器当前的编码格式
  • 字符集
  • 概念 - 存放所使用的所有的字符(汉字)

分类

  • ANSI - 美国
  • ISO-8859-1 - 欧洲
  • GBK - 中国
  • GB2312
  • Unicode - 万国码
  • UTF-8 - 主要使用
  • UTF-16
  • 计算机的存储方式
  • 利用二进制方式 - 1和0
  • 中国
  • 存储 - 将汉字 "中国" 转换成 二进制 进行存储 - GBK
  • 读取 - 将 二进制 转换成 "中国" 进行显示 - UTF-8