Liste avec animations

2014 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Recommandé

20 October 2023

Astuce de capture de la souris avec JS

7 March 2025

Animation d'orbite infinie avec trigonométrie CSS

8 July 2025

Choix du personnage avec animation de la carte d'aperçu (sprites CSS)

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap');

body{
  font-family: 'Nunito', sans-serif;
  background-color:#f5f4f6 ;
}

*,
*::before,
*::after{
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
}

.container{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 100px 0px;
}

.list-container{
	width: 400px;
	text-align: center;
}

.card{
	height: 95px;
	width: 100%;
	background: white;
	margin-top: 10px;
	border-radius: 5px;
	cursor: pointer;
	display: flex;
	overflow: hidden;
	transition: 0.3s;
}

h2{
	padding-bottom: 14px;
}

.content-container{
	width: 80%;
	height: 100%;
	display: flex;
	align-items: center;
}

.game-image1{
	width: 70px;
	height: 70px;
	margin-left: 10px;
	background-image: url("https://play-lh.googleusercontent.com/WNWZaxi9RdJKe2GQM3vqXIAkk69mnIl4Cc8EyZcir2SKlVOxeUv9tZGfNTmNaLC717Ht");
	background-position: center;
	background-size: cover;
	border-radius: 5px;
}

.game-image2{
	width: 70px;
	height: 70px;
	margin-left: 10px;
	background-image: url("https://play-lh.googleusercontent.com/Lf-c_8Tk6ppqF8aGmMhWNDFvWDmKakkRXGXZh0e33xHlgJ4o3n7D-eIVCOGT8X7eeuY");
	background-position: center;
	background-size: cover;
	border-radius: 5px;
}

.game-image3{
	width: 70px;
	height: 70px;
	margin-left: 10px;
	background-image: url("https://play-lh.googleusercontent.com/uHoOYJbKRC6qIbZ6uhJHpK9LtVUb6kh85gDGvn3LRPAzJY9bCk9QvicK3fMRb2ELkQ");
	background-position: center;
	background-size: cover;
	border-radius: 5px;
}

.game-name{
	margin-left: 30px;
	font-size: 20px;
}

.image{
	width: 100%;
	height: 100%;
}

.rating{
	transition: 0.5s; 
	width: 20%;
	display: flex;
	align-items:center;
	justify-content: center;
	transform: translateX(100px);
}

.card:hover .rating{
	transform: translateX(0px);
}

.list-container:hover .card{
	filter: blur(5px);
	opacity: 0.5;
}

.list-container .card:hover{
	transform: scale(1.1);
	filter: blur(0px);
	opacity: 1;
}

Recommandé

Astuce de capture de la souris avec JS

Animation d'orbite infinie avec trigonométrie CSS

Choix du personnage avec animation de la carte d'aperçu (sprites CSS)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS