Un codice di ledoc

Apri nell'Editor Video Pubblica il Tuo Codice

Un codice di ledoc

Consigliato

28 October 2025

Esempio di cursore del blog Swiper

14 February 2025

Un codice di Pedro_bugica

12 December 2025

Modello HTML per il conto alla rovescia di Natale

HTML

CSS

<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background-color: black;
			width: 100px;
			height: 100vh;
		}
		.main{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			display: flex;
			cursor: pointer;
		}
		.icon{
			position: relative;
			width: 80px;
			height: 80px;
			margin: 20px;
			border-radius: 50px;
			transition: all .8s;
		}
		.icon:hover{
			background: #e60073;
			box-shadow: 0 0 20px #e60073;
		}
		.icon:hover:nth-child(2){
			background: #1877f2;
			box-shadow: 0 0 20px #1877f2;
		}
		.icon:hover:nth-child(3){
			background: #25d366;
			box-shadow: 0 0 20px #25d366;
		}
		.icon:hover:nth-child(4){
			background: #1da1f2;
			box-shadow: 0 0 20px #1da1f2;
		}
		.icon i{
			color: white;
			position: absolute;;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 2em;
		}
		svg circle{
			stroke-dasharray: 150;
			transition: all .8s;
		}
		.icon:hover svg circle{
			stroke-dasharray: 220;
		}
	</style>

JS