This content originally appeared on DEV Community and was authored by Prince
Follow us on: https://www.instagram.com/webstreet_code/
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Social Media Icons</title>
<style>
body{
display: flex;
justify-content: center;
padding-top: 50px;
margin: 0;
background: #1d1f21;
color: #fff;
}
.logo-container{
display: flex;
gap: 40px;
perspective: 1000px;
}
.logo{
width: 70px;
height: 70px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
border-radius: 15px;
transition: transform 0.4s ease,box-shadow 0.4s ease;
position: relative;
transform-style: preserve-3d;
animation: floating 3s ease-in-out infinite alternate, pulse 2s infinite;
}
.logo:hover{
cursor: pointer;
transform: rotateY(360deg) scale(1.2);
box-shadow: 0px 15px 30px rgba(255, 0, 127, 0.6), 0px -15px 30px rgba(0, 255, 234, 0.6);
}
.logo-container .instagram { background-image: url('https://cdn-icons-png.flaticon.com/512/174/174855.png'); }
.logo-container .facebook { background-image: url('https://cdn-icons-png.flaticon.com/512/733/733547.png'); }
.logo-container .github { background-image: url('https://cdn-icons-png.flaticon.com/512/733/733553.png'); }
.logo-container .linkedin { background-image: url('https://cdn-icons-png.flaticon.com/512/733/733561.png'); }
.logo-container .youtube { background-image: url('https://cdn-icons-png.flaticon.com/512/1384/1384060.png'); /* Red YouTube Logo */ }
.instagram:hover{
padding-bottom: 14px;
}
.facebook:hover{
padding-bottom: 14px;
}
.github:hover{
padding-bottom: 14px;
}
.linkedin:hover{
padding-bottom: 14px;
}
.youtube:hover{
padding-bottom: 14px;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="logo-container">
<div class="logo instagram"></div>
<div class="logo facebook"></div>
<div class="logo github"></div>
<div class="logo linkedin"></div>
<div class="logo youtube"></div>
</div>
</body>
</html>
This content originally appeared on DEV Community and was authored by Prince
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Prince | Sciencx (2024-10-26T04:27:09+00:00) Social media logo’s effect using the html css. Retrieved from https://www.scien.cx/2024/10/26/social-media-logos-effect-using-the-html-css/
" » Social media logo’s effect using the html css." Prince | Sciencx - Saturday October 26, 2024, https://www.scien.cx/2024/10/26/social-media-logos-effect-using-the-html-css/
HARVARDPrince | Sciencx Saturday October 26, 2024 » Social media logo’s effect using the html css., viewed ,<https://www.scien.cx/2024/10/26/social-media-logos-effect-using-the-html-css/>
VANCOUVERPrince | Sciencx - » Social media logo’s effect using the html css. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/10/26/social-media-logos-effect-using-the-html-css/
CHICAGO" » Social media logo’s effect using the html css." Prince | Sciencx - Accessed . https://www.scien.cx/2024/10/26/social-media-logos-effect-using-the-html-css/
IEEE" » Social media logo’s effect using the html css." Prince | Sciencx [Online]. Available: https://www.scien.cx/2024/10/26/social-media-logos-effect-using-the-html-css/. [Accessed: ]
rf:citation » Social media logo’s effect using the html css | Prince | Sciencx | https://www.scien.cx/2024/10/26/social-media-logos-effect-using-the-html-css/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.