从B站偷小火箭

非专业前端,自己写不出类似的动画,也懒得看,就直接取现成的吧~ 效果如下:

QQ20200111-220049-HD.gif

  1. F12 进入坦克模式,选择对应元素。可以看到就是一个 div 加了样式,下来我们来找找样式。

    image.png

  2. 先找到图片,下载下来。可以看到就是一个静态的图片,没有火箭后面的🔥。

    image.png

  3. 我们来找找🔥是怎么弄得,鼠标移动上去后发现当鼠标移动到 div 时候 class 里多了一个 fly。

    找到了动态效果:

  4. 这下就明白了动画效果怎么生成啦~但是 CSS 这个东西太难了。还是找下b站现成的吧。

    点进去后发下了 css,下载下来格式化一下。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    .rocket-con {
    position: fixed;
    background: url(//static.hdslb.com/bl2se/images/rocket_top.png);
    width: 150px;
    height: 175px;
    cursor: pointer;
    z-index: 99;
    bottom: 0;
    left: 50%;
    margin-left: 490px
    }

    .fly {
    animation: fly .4s steps(1) infinite;
    background-image: url(//static.hdslb.com/bl2se/images/rocket_frame.png)
    }

    @keyframes fly {
    0% {
    background-position-x: 0
    }
    25% {
    background-position-x: -150px
    }
    50% {
    background-position-x: -300px
    }
    75% {
    background-position-x: -450px
    }
    to {
    background-position-x: -600px
    }
    }
  5. 下来就是加入到自己的项目中~

    1
    <div ref="rocket" class="rocket-con" @mouseout="rocketStop" @mouseover="rocketFly"></div>
    1
    2
    3
    4
    5
    6
    7
    8
    // 鼠标移动到火箭上时
    rocketFly() {
    this.$refs.rocket.classList.add('fly');
    },
    // 鼠标从火箭上移开时
    rocketStop() {
    this.$refs.rocket.classList.remove('fly');
    },

    然后 OK 啦~


EOF

阅读全文
FFmpeg常用命令
  1. 基本信息查询命令

  2. 录制命令

  3. 分解/复用命令(对不同文件格式的转化)

  4. 处理原始数据命令

  5. 裁剪与合并命令

  6. 图片/视频互转命令

  7. 直播相关命令(推流)

  8. 各种滤镜命令
阅读全文
WebRTC之实现1v1音视频通话

打通一下 1v1 音视频通话的流程。

阅读全文
WebRTC端对端传输基本流程

WebRTC 端对端连接的基本流程解析。

阅读全文
WebRTC获取音视频设备

使用 navigator.mediaDevices.enumerateDevices() 即可获取音视频设备相关信息。

创建如下文件:

1
2
3
.
├── client.js
└── index.html
阅读全文
NodeJS搭建基础服务器

学习 WebRTC 需要一个基础的服务器,使用 Node.js 搭建一个基础的服务器。

服务器可用的有很多:Nginx、Apache、Node.js、Tomcat 等。

环境:Centos7 64

阅读全文
进程概念

描述进程

进程信息被放在一个叫做进程控制块(PCB,process control block)的数据结构中,可以理解为进程属性的集合。

Linux 下的 PCB 是 task_struct,GitHub 上 Linux 源码的 /include/linux/sched.h 中。

关于 task_struct 详细一些的中文资料可以参看:task_struct 数据结构

阅读全文
系统调用和库函数

在开发角度,操作系统对外会表现为一个整体,但是会暴露自己的部分接口,供上层开发使用,这部分由操作系统提供的接口,叫做系统调用。 比如在操作系统中退出一个进程用到的_exit()就属于系统调用。

系统调用在使用上,功能比较基础,对用户的要求相对也比较高,所以,有心的开发者可以对部分系统调用进行适度封装,从而形成库,有了库,就很有利于更上层用户或者开发者进行二次开发。

阅读全文
MapReduce和Hive工作流程

MapReduce 和 Hive 工作流程。

阅读全文
有限自动机

说起这个都是泪啊。

阅读全文