En este artículo, vamos a crear un efecto de desenfoque de movimiento realista con transiciones CSS. Motion Blur es un tipo especial de efecto que podemos ver en varios videos, películas o clips animados en línea. Cuando un objeto se mueve de un lugar a otro con cierta velocidad, se vuelve borroso, lo que hace que el usuario deduzca que el objeto se mueve rápido.
Vamos a crear el mismo efecto usando la propiedad de transición CSS . Transiciones CSS: Esta propiedad nos permite mover el elemento suavemente en la página. Usaremos la propiedad Transition-Delay de CSS que nos ayuda a iniciar la transición con cierto retraso como se especifica.
Enfoque: crearemos la misma forma 15 veces y usaremos un retraso de transición ligeramente diferente para cada elemento para mover el elemento de una posición a otra. Este sencillo método nos ayudará a crear un desenfoque de movimiento realista de ese elemento.
Ejemplo 1: Usaremos una forma rectangular para nuestro efecto de desenfoque de movimiento, cuando el cursor se mueva al contenedor, la forma comenzará a moverse con el efecto de desenfoque de movimiento.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.object_container {
width: 100%;
height: 100px;
position: relative;
margin: 100px auto;
text-align: center;
font-family: sans-serif;
padding-top: 10px;
background-color: rgb(32, 32, 32);
}
.shape {
position: absolute;
background: rgb(255, 255, 255);
width: 50px;
height: 50px;
border-radius: 0%;
transform: rotate(0deg);
top: 25px;
left: 25px;
opacity: 0.1;
transition: all 0.75s
cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
.object_container:hover .shape {
left: 525px;
}
.shape.two {
transition-delay: 2ms;
}
.shape.three {
transition-delay: 4ms;
}
.shape.four {
transition-delay: 6ms;
}
.shape.five {
transition-delay: 8ms;
}
.shape.six {
transition-delay: 10ms;
}
.shape.seven {
transition-delay: 12ms;
}
.shape.eight {
transition-delay: 14ms;
}
.shape.nine {
transition-delay: 16ms;
}
.shape.ten {
transition-delay: 18ms;
}
.shape.eleven {
transition-delay: 20ms;
}
.shape.twelve {
transition-delay: 22ms;
}
.shape.thirteen {
transition-delay: 24ms;
}
.shape.fourteen {
transition-delay: 26ms;
}
.shape.fifteen {
transition-delay: 28ms;
}
</style>
</head>
<body>
<div class="object_container">
<div class="shape one"><br /></div>
<div class="shape two"><br /></div>
<div class="shape three"><br /></div>
<div class="shape four"><br /></div>
<div class="shape five"><br /></div>
<div class="shape six"><br /></div>
<div class="shape seven"><br /></div>
<div class="shape eight"><br /></div>
<div class="shape nine"><br /></div>
<div class="shape ten"><br /></div>
<div class="shape eleven"><br /></div>
<div class="shape twelve"><br /></div>
<div class="shape thirteen"><br /></div>
<div class="shape fourteen"><br /></div>
<div class="shape fifteen"><br /></div>
</div>
</body>
</html>
Producción:
Desenfoque de movimiento con transición CSS
Ejemplo 2: En este ejemplo, podemos ver claramente la diferencia entre con y sin desenfoque de movimiento, aplicaremos el mismo efecto en la forma circular.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background-color: rgb(41, 41, 41);
}
/* First container is moving
without motion blur */
.object_container1 {
width: 615px;
height: 100px;
position: absolute;
margin: 100px auto;
text-align: center;
font-family: sans-serif;
padding-top: 10px;
background-color: rgb(32, 32, 32);
}
/* Second container is moving
with motion blur */
.object_container2 {
width: 615px;
height: 100px;
position: absolute;
margin: 100px auto;
text-align: center;
font-family: sans-serif;
padding-top: 10px;
background-color: rgb(32, 32, 32);
}
/* For this shape we have removed
the transition effect */
.shape1 {
position: absolute;
background: rgb(255, 255, 255);
width: 50px;
height: 50px;
border-radius: 0%;
transform: rotate(0deg);
top: 25px;
left: 25px;
opacity: 0.1;
border-radius: 100%;
}
/* We have added the transition effect
so we can see the motion blur effect */
.shape2 {
position: absolute;
background: rgb(255, 255, 255);
width: 50px;
height: 50px;
border-radius: 0%;
transform: rotate(0deg);
top: 25px;
left: 25px;
opacity: 0.1;
transition: all 0.75s
cubic-bezier(0.23, 1, 0.32, 1) 0ms;
border-radius: 100%;
}
.box1 .box2 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box1 {
top: 100px;
left: 100px;
position: absolute;
height: 350px;
width: 32%;
background-color: #fff;
}
.box2 {
top: 100px;
right: 100px;
position: absolute;
height: 350px;
width: 32%;
background-color: #fff;
}
#without {
position: absolute;
top: 370px;
left: 200px;
color: #fff;
}
#with {
position: absolute;
top: 370px;
right: 200px;
color: #fff;
}
.object_container1:hover .shape1 {
left: 525px;
}
.object_container2:hover .shape2 {
left: 525px;
}
.shape2.two {
transition-delay: 2ms;
}
.shape2.three {
transition-delay: 4ms;
}
.shape2.four {
transition-delay: 6ms;
}
.shape2.five {
transition-delay: 8ms;
}
.shape2.six {
transition-delay: 10ms;
}
.shape2.seven {
transition-delay: 12ms;
}
.shape2.eight {
transition-delay: 14ms;
}
.shape2.nine {
transition-delay: 16ms;
}
.shape2.ten {
transition-delay: 18ms;
}
</style>
</head>
<body>
<!-- With motion blur -->
<div class="box1">
<div class="object_container1">
<div class="shape1 one"><br /></div>
<div class="shape1 two"><br /></div>
<div class="shape1 three"><br /></div>
<div class="shape1 four"><br /></div>
<div class="shape1 five"><br /></div>
<div class="shape1 six"><br /></div>
<div class="shape1 seven"><br /></div>
<div class="shape1 eight"><br /></div>
<div class="shape1 nine"><br /></div>
<div class="shape1 ten"><br /></div>
</div>
<h1 id="without">Without Motion blur</h1>
</div>
<!-- Without motion blur -->
<div class="box2">
<div class="object_container2">
<div class="shape2 one"><br /></div>
<div class="shape2 two"><br /></div>
<div class="shape2 three"><br /></div>
<div class="shape2 four"><br /></div>
<div class="shape2 five"><br /></div>
<div class="shape2 six"><br /></div>
<div class="shape2 seven"><br /></div>
<div class="shape2 eight"><br /></div>
<div class="shape2 nine"><br /></div>
<div class="shape2 ten"><br /></div>
</div>
<h1 id="with">With Motion blur</h1>
</div>
</body>
</html>
Producción:
Desenfoque de movimiento con transición CSS