css实现运动模糊动画效果-html代码-BFW代码库

css实现运动模糊动画效果

代码语言：html

所属分类：动画

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

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

<title> Only CSS: Motion Blur</title>
<link rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/normalize.min.css" />
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Anton'>
<style>
  body {
  background: #fff;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.motionblur {
  position: relative;
  width: 300px;
  height: 100px;
  -webkit-animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}

.box {
  position: absolute;
  left: calc(50% - 50px);
  width: 100px;
  height: 100%;
  background: #3640c1;
  -webkit-animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.box::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 100%;
  background: linear-gradient(90deg, rgba(54, 64, 193, 0.5) 50%, rgba(54, 64, 193, 0) 100%);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95)-1.5s infinite;
          animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95)-1.5s infinite;
}
.box::after {
  content: '';
  position: absolute;
  left: -100px;
  width: 200px;
  height: 100%;
  background: linear-gradient(90deg, rgba(54, 64, 193, 0) 0%, rgba(54, 64, 193, 0.5) 50%);
  -webkit-transform-origin: 100% 0;
      .........完整代码请登录后点击上方下载按钮下载查看