En este post os muestro como crear un icono scroll para utilizar en vuestros proyectos. Yo lo he utilizado en varias web es bastante útil para cuando tenemos una imagen o capa que ocupa toda la pantalla y es usuario no puede ver todo el contenido de nuestra web, como puedes ver en el ejemplo completo https://antofernandez.com/demos/icono-scroll-css/
Código css para crear el icono scroll
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
.mouse { display: block; position: absolute; height: 45px; width: 25px; border-radius: 20px; border: 2px solid #fff; bottom: 60px; left: 50%; z-index: 2; transform: translateX(-50%); animation: mouse alternate 0.8s infinite ; } .mouse:after { position: absolute; border-radius: 2px; width: 2px; height: 0px; content: ''; background: #fff; margin-left: 10px; margin-top: 5px; animation: mouse-bola alternate 0.8s infinite; } @keyframes mouse-bola { 0% { height: 0px; } 100% { height: 10px; } } @keyframes mouse { 0% { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 100% { -webkit-transform: translate(-50%, calc(-50% + 20px)); transform: translate(-50%, calc(-50% + 20px)); } } |
0 comentarios