Sintaxis
This commit is contained in:
@@ -88,8 +88,8 @@
|
||||
/* 5. Efecto de pulso en hover */
|
||||
.input-pulse:hover { animation: inputPulse 0.6s ease-in-out; }
|
||||
@keyframes inputPulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.02); }
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.02); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
/* 6. Gradiente animado en el borde */
|
||||
@@ -100,8 +100,8 @@
|
||||
/* 7. Efecto de brillo en validación exitosa */
|
||||
.form-control.valid { border-color: #198754; background: linear-gradient(45deg, #fff, #f8fff9); animation: successGlow 1s ease-in-out; }
|
||||
@keyframes successGlow {
|
||||
0% { box-shadow: 0 0 5px rgba(25, 135, 84, 0.5); }
|
||||
50% { box-shadow: 0 0 20px rgba(25, 135, 84, 0.8); }
|
||||
0% { box-shadow: 0 0 5px rgba(25, 135, 84, 0.5); }
|
||||
50% { box-shadow: 0 0 20px rgba(25, 135, 84, 0.8); }
|
||||
100% { box-shadow: 0 0 5px rgba(25, 135, 84, 0.5); }
|
||||
}
|
||||
/* 8. Typing effect simulation */
|
||||
@@ -109,7 +109,7 @@
|
||||
.input-typing::after { content: '|'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); opacity: 0; animation: blink 1s infinite; color: #0d6efd; }
|
||||
.input-typing:focus::after { opacity: 1; }
|
||||
@keyframes blink {
|
||||
0%, 50% { opacity: 1; }
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0; }
|
||||
}
|
||||
/* 9. Efecto de ondas */
|
||||
@@ -171,6 +171,10 @@
|
||||
.select-status::after { content: ''; position: absolute; right: 2.5rem; top: 50%; transform: translateY(-50%);
|
||||
width: 8px; height: 8px; border-radius: 50%; background-color: #dc3545; opacity: 0; transition: opacity 0.3s ease; } .select-status.valid::after { background-color: #198754; opacity: 1; }
|
||||
.select-status:invalid::after { background-color: #dc3545; opacity: 1; }
|
||||
/* Quitar todo tipo de animación y borde para el campo foto */
|
||||
.no-animation,
|
||||
.no-border-style { transition: none !important; border: 1px solid #ccc !important; box-shadow: none !important; background: #fff !important; }
|
||||
.no-animation:focus { transform: none !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -203,7 +207,7 @@
|
||||
<div class="col-md-6 form-group-animated">
|
||||
<label class="form-label">Foto (opcional)</label>
|
||||
<div class="form-floating-custom">
|
||||
<input type="file" name="foto" id="foto" class="form-control" accept="image/*">
|
||||
<input type="file" name="foto" id="foto" class="form-control no-animation no-border-style" accept="image/*">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user