css新特性（包含草案） #20
Description
动态模糊（Motion Blur
提案
当你拍摄一个物体（或是一个人），就像下图，这个模糊就会发生，因为这个物体（人运动）移动的速度超过了相机拍摄所需的曝光时间，所以这个物体会在最终的照片中出现多次，因为它在关键时刻移动。
目前动态模糊目前是提案中 w3c/csswg-drafts#3837
<style>
body {
display: flex;
width: 100vw;
justify-content: center;
align-items: center;
min-height: 100vh;
}
body > .ball,
body > .motion-ball {
position: absolute;
top: 0;
width: 100px;
height: 100px;
border-radius: 50%;
background: #313131;
}
@keyframes move-forever {
0% {
top: 0;
}
50% {
top: 300px;
}
100% {
top: 0;
}
}
.ball {
left: 0;
animation: move-forever 2s ease-in-out infinite;
}
.motion-ball {
right: 0;
animation: move-forever 2s ease-in-out infinite;
motion-blur: blur;
motion-shutter-angle: 180deg;
}
</style>
</head>
<body>
<div class="ball"></div>
<div class="motion-ball blurjs"></div>
</body>
// https://www.motionblurjs.com/
<script src = "https://www.motionblurjs.com/blur.js"></script>