रेडियो बहुत मूडी हैं ✅

563 zegarkidawida

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

6 April 2025

एक वेबसाइट जहाँ आप गाने चला सकते हैं

21 July 2025

CSS रेडियो बटन नेविगेशन मेनू

HTML

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap");

* {
	margin: 0;
	padding: 0;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	font-family: "Poppins", serif;
	text-transform: uppercase;
	font-size: 1rem;
	font-weight: 500;
	color: #9f01fc;
	background: linear-gradient(135deg, #f6f8fd 0%, #f1f4f9 100%);
}

fieldset {
	border: 2px solid #9f01fc;
	padding: 2rem 4rem;
	border-radius: 1.5rem;
}

label {
	margin-right: 15px;
	line-height: 32px;
}

input {
	appearance: none;
	width: 20px;
	height: 20px;
	border: 2px solid #d59af7;
	transition: 0.2s all linear;
	margin-right: 5px;
	position: relative;
	top: 6px;
	cursor: pointer;
	border-radius: 0.2rem;
}

legend {
	padding: 0.5rem 1rem;
	font-size: 1.2rem;
	font-weight: 700;
}

input:checked {
	border: 10px solid #9f01fc;
}

#cranky:checked {
	animation: wiggle 1s infinite;
}

#sleepy:checked {
	animation: sleep 2s alternate infinite;
}

#fearful:checked {
	animation: shake 0.1s infinite;
}

#drunk:checked {
	animation: stagger 2s forwards ease-in-out;
}

#dreamy:checked {
	animation: float 10s ease-in-out infinite alternate-reverse;
}

#peppy:checked {
	animation: bounce 0.5s infinite;
}

@keyframes wiggle {
	0%,
	7% {
		transform: rotateZ(0);
	}
	15% {
		transform: rotateZ(-15deg);
	}
	20% {
		transform: rotateZ(10deg);
	}
	25% {
		transform: rotateZ(-10deg);
	}
	30% {
		transform: rotateZ(6deg);
	}
	35% {
		transform: rotateZ(-4deg);
	}
	40%,
	100% {
		transform: rotateZ(0);
	}
}

@keyframes sleep {
	from {
		opacity: 0.4;
		border: 8px solid #9f01fc;
	}

to {
		opacity: 1;
		border: 4px solid #9f01fc;
	}
}

@keyframes shake {
	0% {
		transform: translateX(0);
	}

50% {
		transform: translateX(5px);
	}

100% {
		transform: translateX(-5px);
	}
}

@keyframes stagger {
	0% {
		transform: rotate(0);
	}

25% {
		transform: rotate(-45deg);
	}

50% {
		transform: rotate(30deg);
	}

75% {
		transform: rotate(90deg);
	}

100% {
		transform: rotate(45deg);
	}
}

@keyframes float {
	0% {
		trasform: translateY(0) rotateZ(25deg);
	}

30% {
		transform: translateY(-10px) rotateZ(-25deg);
	}

55% {
		transform: translateY(-15px) rotateZ(25deg);
	}

75% {
		transform: translateY(-10px) rotateZ(-25deg);
	}

100% {
		transform: translateY(-0px) rotateZ(0deg);
	}
}

@keyframes bounce {
	0%,
	40%,
	100% {
		transform: translateY(0);
	}
	20% {
		transform: translateY(-20px);
	}
}

रेडियो बहुत मूडी हैं ✅

अनुशंसित

बहुत बढ़िया लॉगिन फ़ॉर्म

एक वेबसाइट जहाँ आप गाने चला सकते हैं

CSS रेडियो बटन नेविगेशन मेनू

HTML

CSS

JS

अनुशंसित

बहुत बढ़िया लॉगिन फ़ॉर्म

एक वेबसाइट जहाँ आप गाने चला सकते हैं

CSS रेडियो बटन नेविगेशन मेनू

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS