html实现录制关键帧动画播放效果-html代码-BFW代码库

html实现录制关键帧动画播放效果

代码语言：html

代码描述：html实现录制关键帧动画播放效果

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


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

<style>
html {
  height: calc(100% - 2em);
  background: #f21b42;
}

body {
  background: #f1f1f1;
  height: 100%;
  margin: 1em;
  padding: 0;
  border-radius: 1em;
  font-family: sans-serif;
}

.actor {
  width: 100px;
  height: 100px;
  
  background:#03588c;
  
 
  
  position: absolute;
  will-change: top, left;
  cursor: move;
  border-radius: 50px;
  top: calc(30% - 50px);
  left: calc(50% - 50px);
  z-index:1;
}

button {
  background: #03588c;
  color: white;
  border: none;
  padding: 0.8em 1.2em;
  border-radius: 0.5em;
  letter-spacing: 1px;
  cursor: pointer;
}
button:hover, button:focus {
  box-shadow: 0 0 0 3px #05dbf2;
  background: #02446c;
  border:none;
  outline:none;
}

button:active{
  background:#012a43;
  box-shadow: none;
  border:none;
  outline:none;
}

button:disabled {
  opacity: 0.5;
  cursor: auto;
  box-shadow: none;
  background: #03588c;
}

.actor:hover {
  box-shadow: 0 0 0 4px #F2B705, 0 0 0 8px inset #02446c;
  /* background-image: repeating-linear-gradient(45deg, #03588c, #03588c 1em, #F2B705 1em, #F2B705 50%);
  background-size: 2em 2em;
  background-position: 10px 21px;*/
}

.play {
  animation-name: anim;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  cursor: auto;
}
.play:hover {
  box-shadow: none;
}

.timeline {
  width: 470px;
}

.ui {
  position: absolute;
  bottom: 3em;
  background: white;
  padding: 1em;
  border-radius: 1em;
  border: 4px solid #f26b83;
  width: 50em;
  left: calc(50% - 26em);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

h2{
  position:absolute;
  top:0.5em;
  left:1.5em;
  font-size:0.8em;
  margin:0;
  padding:0;
  font-weight:normal;
  color:#666;
}

.info{
  color:#333;
  position:absolute;
  top:3em;
  left:4em;
}
.info ol{
  padding:0;
  margin:0;
}
.info li{
  margin:0 0 0.5em 0;
}
</style>

</head>
<body translate="no">
<div class="actor"></div>
<div class="info">
<ol>
<li>拖动 <strong>篮球</strong></li>
<li>拖动<strong>时间线</strong> 圆点到新的位置</li>
<li>按下 <strong>录制关键帧</strong> 按钮</li>
<li>重复 步骤 1-3</li>
<li>点击 <strong>播放</strong> 按钮查看效果</li>
</ol>
</div>
<div class="ui">
<h2>时间线</h2>
<input type="range" min="0" max="100" value="0" class="timeline">
<button class="keyframe">录制关键帧</button>
<button class="playBtn">播放</button>
<button class="stopBtn">停止</button>
</div>

<script>
const STATE = {
  selected: 0,
  x_offset: 0,
  y_offset: 0,
  sorting_array: [],
  css_array: [],
  css_string: ""
};

document.addEventListener("mousemove", mousemove_window);
const KEYFRAME_BTN = document.querySelector(".keyframe");
const PLAY_BTN = document.querySelector(".playBtn");
const STOP_BTN = document.querySelector(".stopBtn".........完整代码请登录后点击上方下载按钮下载查看