Webleb - Snippet di Codice -

1874 Andev.web

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

13 June 2025

Frammento di animazione di caricamento 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;
}

Consigliato

Un codice di parajulisanket2

Un codice di Liamgilles76

Frammento di animazione di caricamento CSS

HTML

CSS

JS

Consigliato

Un codice di parajulisanket2

Un codice di Liamgilles76

Frammento di animazione di caricamento CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS