El efecto de onda en un botón es un tipo de efecto en el que la forma del botón se convierte en una onda al flotar. Si bien hay otras formas de crear un efecto de onda, un método simple es usar la propiedad de fotograma clave.
Enfoque: para animar el botón, usamos fotogramas clave para establecer gradualmente las transiciones en diferentes etapas.
Código HTML:
el código HTML es una estructura simple que contiene un envoltorio donde la etiqueta de intervalo se envuelve dentro de la etiqueta de anclaje.
<html> <head></head> <body> <div class="wrapper"> <a href="#" class="wave-btn"><span>wave</span></a> </div> </body> </html>
Código CSS:
- Para CSS, estos son los siguientes pasos:
- Agregue estilos básicos como el color de fondo, coloque el botón y establezca el ancho y la altura del botón.
- Use la propiedad de animación con el identificador llamado wave .
- Ahora use fotogramas clave para animar cada fotograma según su ángulo usando la propiedad de transformación.
<style>
@import url("https://fonts.googleapis.com/css?family=Noto+Sans");
* {
position: relative;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
height: 100%;
background-color: #f5f6fa;
}
.wave-btn {
color: #fff;
text-decoration: none;
border: 3px solid #fff;
padding: 5px 30px;
font-size: 22px;
font-weight: 600;
font-family: "Noto Sans";
line-height: 52px;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
transition: all 1s;
}
.wave-btn:before {
content: "";
position: absolute;
width: 320px;
height: 320px;
border-radius: 130px;
background-color: #0097e6;
top: 30px;
left: 50%;
transform: translate(-50%);
animation: wave 5s infinite linear;
transition: all 1s;
}
.wave-btn:hover:before {
top: 15px;
}
@keyframes wave {
0% {
transform: translate(-50%) rotate(-180deg);
}
100% {
transform: translate(-50%) rotate(360deg);
}
}
</style>
Código completo:
<html>
<head>
<style>
@import url("https://fonts.googleapis.com/css?family=Noto+Sans");
* {
position: relative;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
height: 100%;
background-color: #f5f6fa;
}
.wave-btn {
color: #fff;
text-decoration: none;
border: 3px solid #fff;
padding: 5px 30px;
font-size: 22px;
font-weight: 600;
font-family: "Noto Sans";
line-height: 52px;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
transition: all 1s;
}
.wave-btn:before {
content: "";
position: absolute;
width: 320px;
height: 320px;
border-radius: 130px;
background-color: #0097e6;
top: 30px;
left: 50%;
transform: translate(-50%);
animation: wave 5s infinite linear;
transition: all 1s;
}
.wave-btn:hover:before {
top: 15px;
}
@keyframes wave {
0% {
transform: translate(-50%) rotate(-180deg);
}
100% {
transform: translate(-50%) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="wrapper">
<a href="#" class="wave-btn"><span>wave</span></a>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ashitace696 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA