Red de conocimiento informático - Conocimiento informático - Cómo lograr el efecto de animación brillante del logotipo del sitio web mediante el estilo CSS

Cómo lograr el efecto de animación brillante del logotipo del sitio web mediante el estilo CSS

Agregue y modifique el código CSS de la siguiente manera:

.logo-site, .logo-sites{position: relativo; float: left; margin: 18px 0 0 10px width: 220px; ; desbordamiento: oculto; duración de la transición: .logo-sites{ancho: 140px}}@pantalla multimedia y (ancho mínimo: 900px){

.logo-site: antes{contenido: ""; posición: absoluta; izquierda: -665px; arriba: -460px; ancho: 220px; color de fondo: rgba (255, 255, .5); moz- transformar: rotar (-45 grados); -ms-transformar: rotar (-45 grados); -o-transformar: rotar (-45 grados); 1s infinito ;-o-animación: searchLights 1s fácil-in 1s infinito; animación: searchLights 1s fácil-in 1s infinito}}@-webkit-keyframe searchLights{0{left:-100px;top:0}to{left:120px ; arriba: 100px}} @-o-keyframes searchLights{0{left: -100px; top: 0}to{left: 120px; top: 100px}}@-moz-keyframes searchLights{0{left: -100px; : 0}a{izquierda: 120px; arriba: 100px}}@keyframes searchLights{0{izquierda: -100px; arriba: 0} a{izquierda: 120px arriba: 100px}}

.site- título {tamaño de fuente: 24px; tamaño de fuente: 2.4rem; peso de fuente: 700; relleno: 0 0 2px 0}

.nombre del sitio{ pantalla: ninguna}@pantalla de medios y (min) - ancho: 900px){

.logo-site img, .logo-sites img{transition-duration: .8s}

Pasos

Poner el css código Vaya al código CSS de logo-site y cambie el CSS de su sitio web que contiene el logotipo (presione F12 para ver elementos para encontrar el elemento CSS de su logotipo). Busque el nombre CSS de su logotipo y luego modifique el código CSS anterior para que se convierta en su nombre CSS y código CSS (para evitar errores, ¡recuerde hacer una copia de seguridad!)

Lo anterior es para agregar CSS al logotipo Por supuesto, también puede aplicar el método de escaneo de efectos de código a otros lugares.

Tenga en cuenta que el código CSS de algunas plantillas es diferente y no se puede utilizar apresuradamente. Puede causar errores. Los principiantes no deberían intentarlo fácilmente.