Sliding Icon Effects

Sliding Icon Effects Code:

1.index.html:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sliding Icon Effects</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/fontawesome.min.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('a').click(function(){ $('span').toggleClass('active') }) }) </script> </head> <body> <a href="#"> <span><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-7-circle-fill" viewBox="0 0 16 16"> <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM5.37 5.11h3.972v.07L6.025 12H7.42l3.258-6.85V4.002H5.369v1.107Z"/> </svg></span> <span><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-4-circle-fill" viewBox="0 0 16 16"> <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM7.519 5.057c-.886 1.418-1.772 2.838-2.542 4.265v1.12H8.85V12h1.26v-1.559h1.007V9.334H10.11V4.002H8.176c-.218.352-.438.703-.657 1.055ZM6.225 9.281v.053H8.85V5.063h-.065c-.867 1.33-1.787 2.806-2.56 4.218Z"/> </svg></span> </a> </body> </html>

2.style.css:

body { margin: 0; padding: 0; } a { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80px; height: 80px; border: 4px solid red; border-radius: 50%; overflow: hidden; } a span { display: block; width: 100%; height: 100%; text-align: center; font-size: 48px; line-height: 80px; background: black; color: yellow; transition: 0.5s; } a span:nth-child(2) { background: yellow; color: black; } a span.active { transform: translateY(-100%); }

Оставьте комментарий