粒子运动绘画动画效果

代码语言:html

所属分类:粒子

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> - Flocked</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
  html, body {
  height: 100%;
}

body {
  overflow: hidden;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Calibri,Candara,Segoe,"Segoe UI",Optima,Arial,sans-serif;
  font-size: 14px;
}

.controls {
  position: fixed;
  top: 4px;
  left: 8px;
  color: #fff;
}

.line {
  display: block;
  padding: 6px 0;
}
.line span {
  display: inline-block;
  width: 100px;
  vertical-align: middle;
}

input[type="range"] {
  appearance: none;
  width: 150px;
  background: transparent;
  height: 12px;
  vertical-align: middle;
  color: #fff;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 8px;
  height: 8px;
  background: #333;
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
input[type="range"]::-moz-range-thumb {
  appearance: none;
  width: 8px;
  height: 8px;
  background: #333;
  border: 2px solid curre.........完整代码请登录后点击上方下载按钮下载查看

网友评论0