Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
Para transformar el contenido web dentro y fuera de la ventana gráfica, usamos animaciones. Las animaciones estáticas son predecibles y predeterminadas y se utilizan para captar la atención del usuario cambiando la visibilidad, la posición, etc. y, en general, no están controladas por las acciones del usuario. La interfaz de usuario semántica nos brinda muchas variaciones en animaciones estáticas que incluyen Jiggle, Flash, Shake, Pulse, Tada, Bounce, Glow.
En este artículo, aprenderemos sobre la animación Semantic UI Static Glow junto con su implementación utilizando códigos de ejemplo.
Animación de brillo estático de interfaz de usuario semántica: la animación de brillo estático de interfaz de usuario semántica capta la atención del usuario y resalta la posición del elemento que se va a animar al brillar.
Sintaxis:
$('.image').transition('glow');
Ejemplo 1: cada vez que se hace clic en el botón, se llama a la función de transición() y el elemento se ilumina.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Glow animation</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<center>
<div class="ui container">
<h2 class="ui header green">Geeksforgeeks</h2>
<strong>Static Glow Animation</strong>
<br><br>
<img class="ui image medium"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220213225352/Myproject-300x300.png"/>
<br>
<button class="ui button">
Static Glow Animation
</button>
</div>
</center>
<script>
$('button').click(function() {
$('.image').transition('glow');
})
</script>
</body>
</html>
Producción:
Ejemplo 2: Tan pronto como pasamos el cursor sobre la imagen , se llama a la función de transición() y se puede observar la animación de brillo.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Glow animation</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<style>
body{
margin : 20px;
}
</style>
</head>
<body>
<center>
<div class="ui container">
<h2 class="ui header green">Geeksforgeeks</h2>
<strong>Static Glow Animation</strong><br><br>
<img class="ui image medium" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220215195838/MethodDrawImage1-300x225.png"/><br>
</div>
</center>
<script>
$('img').mouseover(function() {
$('.image').transition('glow');
})
</script>
</body>
</html>
Producción:
Enlace de referencia: htps://semantic-ui.com/modules/transition.html#glow
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA