Icônes sociales animées

Ouvrir dans l'éditeur Publiez votre code

Recommandé

29 August 2024

Sections continues animées avec GSAP Observer

7 August 2024

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <title>
 Webleb
 </title>
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
 integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
 crossorigin="anonymous" referrerpolicy="no-referrer" />
 <link rel="stylesheet" href="/css/styles.css" />
</head>
<body style="display: flex; justify-content:center ; align-items: center;height: 100vh;overflow: hidden;">
	<ul>
		<li>
		 <a class="facebook" href="https://www.web-leb.com/login">
			
			
			
			
			
		 </a>
		</li>
		<li>
		 <a class="twitter" href="https://www.web-leb.com/login">
			
			
			
			
			
		 </a>
		</li>
		<li>
		 <a class=" instagram" href="https://www.web-leb.com/login">
			
			
			
			
			
		 </a>
		</li>
	 </ul>
</body>
</html>

CSS

body {
  margin:0;
  padding:0;
  background: #abbaab;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #ffffff, #abbaab);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #ffffff, #abbaab); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  
}
ul {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
  padding:0;
  display:flex;
}
ul li {
  list-style:none;
}
ul li a {
  display:block;
  position:relative;
  width:100px;
  height:100px;
  line-height:100px;
  font-size:40px;
  text-align:center;
  text-decoration:none;
  color:#404040;
  margin: 0 30px;
  transition:.5s;
}
ul li a span {
  position:absolute;
  transition: transform .5s;
}
ul li a span:nth-child(1),
ul li a span:nth-child(3){
  width:100%;
  height:3px;
  background:#404040;
}
ul li a span:nth-child(1) {
  top:0;
  left:0;
  transform-origin: right;
}
ul li a:hover span:nth-child(1) {
  transform: scaleX(0);
  transform-origin: left;
  transition:transform .5s;
}

ul li a span:nth-child(3) {
  bottom:0;
  left:0;
  transform-origin: left;
}
ul li a:hover span:nth-child(3) {
  transform: scaleX(0);
  transform-origin: right;
  transition:transform .5s;
}

ul li a span:nth-child(2),
ul li a span:nth-child(4){
  width:3px;
  height:100%;
  background:#404040;
}
ul li a span:nth-child(2) {
  top:0;
  left:0;
  transform:scale(0);
  transform-origin: bottom;
}
ul li a:hover span:nth-child(2) {
  transform: scale(1);
  transform-origin: top;
  transition:transform .5s;
}
ul li a span:nth-child(4) {
  top:0;
  right:0;
  transform:scale(0);
  transform-origin: top;
}
ul li a:hover span:nth-child(4) {
  transform: scale(1);
  transform-origin: bottom;
  transition:transform .5s;
}

.facebook:hover {
  color: #3b5998;
}
.facebook:hover span { 
  background: #3b5998;
}
.twitter:hover {
  color: #1da1f2;
}
.twitter:hover span { 
  background: #1da1f2;
}
.instagram:hover {
  color: #c32aa3;
}
.instagram:hover span { 
  background: #c32aa3;
}
.google:hover {
  color: #dd4b39;
}
.google:hover span { 
  background: #dd4b39;
}
ul li a .twitter {
  color: #1da1f2;
}
ul li a:hover:nth-child(3) {
  color: #c32aa3;
}
ul li a:hover:nth-child(4) {
  color: #dd4b39;
}

Icônes sociales animées

Recommandé

Sections continues animées avec GSAP Observer

Fleurs animées

Code CSS pour cartes animées

HTML

CSS

JS

Recommandé

Sections continues animées avec GSAP Observer

Fleurs animées

Code CSS pour cartes animées

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS