animaciones de tarjetas

4511 Andev.web

Abrir en el editor Video Publica tu código

Recomendado

23 April 2025

Generador de contraseñas de SENAPI

30 August 2024

Animaciones impulsadas por desplazamiento Detección de desplazamiento

1 October 2024

solicitud de citas

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'><link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="card" id="card-1">
			<input type="checkbox" class="open-card" id="open-card-1" checked />
			<label class="open-card-label" for="open-card-1"></label>
			<input type="checkbox" class="card-toggle" id="card-toggle-1" />
			<label class="card-toggle-label" for="card-toggle-1"></label>
			<div class="card-image"></div>
			<div class="card-header">
				<h2>Choose<br />your way</h2>
			</div>
			<div class="card-content left-content">
				<h3>Phasellus bibendum semper</h3>
				<p>Aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullam.</p>
				<p>Put aliquip ex ea commodo consequat. Neque porro quisquam est qui dolorem ipsum</p>
				<a class="card-button" href="#">Read more</a>
			</div>
			<div class="card-content right-content">
				<h3>Curabitur fermentum purus</h3>
				<p>Nulla facilisi morbi tempus iaculis urna id volutpat lacus laoreet non curabitur gravida arcu nec ante.</p>
				<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet</p>
				<a class="card-button" href="#">Read more</a>
			</div>
			<div class="card-footer">
				<a href="#">Discover more</a>
			</div>
		</div>
		<div class="card" id="card-2">
			<input type="checkbox" class="open-card" id="open-card-2" checked />
			<label class="open-card-label" for="open-card-2"></label>
			<input type="checkbox" class="card-toggle" id="card-toggle-2" />
			<label class="card-toggle-label" for="card-toggle-2"></label>
			<div class="card-image"></div>
			<div class="card-header">
				<h2>Choose<br />your way</h2>
			</div>
			<div class="card-content left-content">
				<h3>Phasellus bibendum semper</h3>
				<p>Aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullam.</p>
				<p>Put aliquip ex ea commodo consequat. Neque porro quisquam est qui dolorem ipsum</p>
				<a class="card-button" href="#">Read more</a>
			</div>
			<div class="card-content right-content">
				<h3>Curabitur fermentum purus</h3>
				<p>Nulla facilisi morbi tempus iaculis urna id volutpat lacus laoreet non curabitur gravida arcu nec ante.</p>
				<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet</p>
				<a class="card-button" href="#">Read more</a>
			</div>
			<div class="card-footer">
				<a href="#">Discover more</a>
			</div>
		</div>
		<div class="card" id="card-3">
			<input type="checkbox" class="open-card" id="open-card-3" checked />
			<label class="open-card-label" for="open-card-3"></label>
			<input type="checkbox" class="card-toggle" id="card-toggle-3" />
			<label class="card-toggle-label" for="card-toggle-3"></label>
			<div class="card-image"></div>
			<div class="card-header">
				<h2>Choose<br />your way</h2>
			</div>
			<div class="card-content left-content">
				<h3>Phasellus bibendum semper</h3>
				<p>Aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullam.</p>
				<p>Put aliquip ex ea commodo consequat. Neque porro quisquam est qui dolorem ipsum</p>
				<a class="card-button" href="#">Read more</a>
			</div>
			<div class="card-content right-content">
				<h3>Curabitur fermentum purus</h3>
				<p>Nulla facilisi morbi tempus iaculis urna id volutpat lacus laoreet non curabitur gravida arcu nec ante.</p>
				<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet</p>
				<a class="card-button" href="#">Read more</a>
			</div>
			<div class="card-footer">
				<a href="#">Discover more</a>
			</div>
		</div>

  
</body>
</html>

CSS

html {
	box-sizing: border-box;
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}
*,
::before,
::after {
	margin: 0;
	padding: 0;
	box-sizing: inherit;
	font-weight: inherit;
	font-family: inherit;
}
body {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	color: #f0f0f0;
	/*background-image: linear-gradient(43deg, #222e68 0%, #021d42 100%);*/
	background: #101522;
	background-blend-mode: hard-light;
	background-image: radial-gradient(circle at 20% 20%, #ffcc7066 10%, #ffcc7000 50%), radial-gradient(circle at 80% 80%, #0033ff66 10%, #0033ff00 50%),
		radial-gradient(ellipse at 35% 70%, #00ff4866 10%, #00ff4800 50%), radial-gradient(ellipse at 70% 35%, #ff005d66 10%, #ff005d00 60%);
	background-size: 250% 250%;
	animation: background-animation 30s infinite;
}
@keyframes background-animation {
	0% {
		background-position: 5% 0%;
	}
	25% {
		background-position: 20% 80%;
	}
	50% {
		background-position: 96% 100%;
	}
	75% {
		background-position: 80% 10%;
	}
	100% {
		background-position: 5% 0%;
	}
}
body::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	backdrop-filter: blur(4px);
	background: radial-gradient(ellipse, #00000000, #000000cc);
	z-index: -1;
}
.card {
	position: relative;
	width: 300px;
	height: 600px;
	outline: 2px solid #ffffff66;
	border-radius: 8px;
	overflow: hidden;
	background-color: #000000;
}

/*checkbox*/
input[type="checkbox"] {
	display: none;
}

/*label left-side*/
label.card-toggle-label {
	display: block;
	position: absolute;
	z-index: 99;
	width: 60px;
	height: 60px;
	top: 50%;
	left: 83%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1px solid #ffffff66;
	background: #00000033;
	backdrop-filter: blur(4px);
	cursor: pointer;
	transition: all 0.25s ease-in-out;
}
label.card-toggle-label::after,
label.card-toggle-label::before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 6px;
	transform: translate(-40%, calc(-50% - 8px)) rotate(40deg);
	border-radius: 3px;
	background-color: #f0f0f099;
	transition: all 0.5s ease-in-out;
}
label.card-toggle-label::after {
	transform: translate(-40%, calc(-50% + 8px)) rotate(-40deg);
}
label.card-toggle-label:hover {
	left: 85%;
}
label.card-toggle-label:hover::after,
label.card-toggle-label:hover::before {
	transform: translate(-40%, calc(-50% - 5px)) rotate(23deg);
	background-color: #f0f0f0ff;
}
label.card-toggle-label:hover::after {
	transform: translate(-40%, calc(-50% + 5px)) rotate(-23deg);
}

/*label right-side*/
.card-toggle:checked ~ label.card-toggle-label {
	left: 17%;
}
.card-toggle:checked ~ label.card-toggle-label:hover {
	left: 15%;
}
.card-toggle:checked ~ label.card-toggle-label::before {
	transform: translate(-60%, calc(-50% - 8px)) rotate(-40deg);
}
.card-toggle:checked ~ label.card-toggle-label::after {
	transform: translate(-60%, calc(-50% + 8px)) rotate(40deg);
}
.card-toggle:checked ~ label.card-toggle-label:hover::before {
	transform: translate(-60%, calc(-50% - 5px)) rotate(-23deg);
}
.card-toggle:checked ~ label.card-toggle-label:hover::after {
	transform: translate(-60%, calc(-50% + 5px)) rotate(23deg);
}

/*background left-side*/
.card-image {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	background-size: cover;
	background-position: 0% 50%;
	transition: all 0.5s ease;
	opacity: 0.5;
}
#card-1 .card-image {
	background-image: url(https://github.com/VicioBonura/pubimgs/blob/main/motociclista-1.jpg?raw=true);
}
#card-2 .card-image {
	background-image: url(https://github.com/VicioBonura/pubimgs/blob/main/motociclista-3.jpg?raw=true);
}
#card-3 .card-image {
	background-image: url(https://github.com/VicioBonura/pubimgs/blob/main/motociclista-2.jpg?raw=true);
}
.card:hover .card-image {
	opacity: 1;
}
label.card-toggle-label:hover + .card-image {
	transition: all 2.5s ease;
	background-position: 10% 50%;
}

/*background right-side*/
.card-toggle:checked ~ .card-image {
	background-position: 100% 50%;
}
.card-toggle:checked ~ label.card-toggle-label:hover + .card-image {
	transition: all 2.5s ease;
	background-position: 90% 50%;
}

/*card header*/
.card-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100px;
	background: #00000099;
	border-bottom: 1px solid #ffffff66;
	display: flex;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(4px);
	opacity: 1;
	transition: all 0.5s ease-in-out;
}
.card-header h2 {
	color: #f0f0f0f0;
	font-weight: 700;
	line-height: 0.8em;
	font-size: 2em;
	text-align: center;
}

/*card content*/
.card-content {
	position: absolute;
	width: 300px;
	height: 400px;
	top: 100px;
	padding: 1em;
	transition: all 0.25s ease-in-out;
}

.card-content a {
	display: inline-block;
	padding: 5px 10px;
	text-transform: uppercase;
	color: #f0f0f0;
	font-weight: 300;
	text-decoration: none;
	background: #00000033;
	backdrop-filter: blur(4px);
	border-radius: 6px;
	border: 1px solid #ffffff33;
	background-color: #00000066;
	margin: 30px 10px;
	transition: all 0.25s;
}
.card-content a:hover {
	border: 1px solid #ffffffcc;
	background-color: #ffcc7033;
}
.card-content h3 {
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.15em;
	margin-bottom: 1.15em;
}
.card-content p {
	margin-bottom: 1.15em;
}
.card-content.left-content h3,
.card-content.left-content p {
	margin-right: 30%;
}
.card-content.right-content h3,
.card-content.right-content p {
	margin-left: 30%;
}
/*card-content left-side*/
.card-content.left-content {
	opacity: 1;
	left: 0;
	background-image: linear-gradient(to right, #000000aa, #00000000);
	transition-delay: 0.25s;
}
.card-content.right-content {
	opacity: 0;
	text-align: right;
	left: 300px;
	background-image: linear-gradient(to left, #000000aa, #00000000);
	transition-delay: 0s;
}

/*card content right-side*/
.card-toggle:checked ~ .card-content.left-content {
	opacity: 0;
	left: -300px;
	transition-delay: 0s;
}

.card-toggle:checked ~ .card-content.right-content {
	opacity: 1;
	left: 0px;
	transition-delay: 0.25s;
}

/*card footer*/
.card-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100px;
	background: #00000099;
	backdrop-filter: blur(4px);
	border-top: 1px solid #ffffff66;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 1;
	transition: all 0.5s ease-in-out;
}
.card-footer a {
	display: block;
	padding: 10px 20px;
	text-transform: uppercase;
	color: #ffffff;
	border: 1px solid #ffffff33;
	background-color: #ffcc7099;
	text-decoration: none;
	border-radius: 8px;
	transition: all 0.25s ease-in-out;
}
.card-footer a:hover {
	border: 1px solid #ffffffcc;
	background-color: #ffcc7033;
}

/*-------------------------*/
/*    open card section    */
/*-------------------------*/

/*label open card*/
label.open-card-label {
	display: block;
	position: absolute;
	top: 10px;
	right: 10px;
	transform: translate(-50%, -50%);
	z-index: 999;
}
input.open-card:checked + label.open-card-label {
	top: 50%;
	right: 50%;
	transform: translate(-50%, -50%);
}
label.open-card-label::before {
	content: "X";
	display: block;
	position: absolute;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1002;
	border-radius: 50%;
	border: 1px solid #ffffff33;
	background: #00000066;
	backdrop-filter: blur(4px);
	transition: all 0.25s ease-in-out;
	cursor: pointer;
	border-top-left-radius: 0%;
	border-bottom-right-radius: 0%;
}

label.open-card-label::after {
	content: "";
	display: block;
	position: absolute;
	width: 0px;
	height: 0px;
	background: #00000066;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1001;
	border-radius: 50%;
	backdrop-filter: blur(4px);
	transition: all 0.5s ease-in-out;
	pointer-events: none;
}

label.open-card-label:hover::after {
	width: 1250px;
	height: 1250px;
}

input.open-card:checked + label.open-card-label::before {
	content: "OPEN";
	width: 90px;
	height: 90px;
	text-align: center;
	line-height: 90px;
	overflow: hidden;
	transition-delay: 0;
	border-top-left-radius: 50%;
	border-bottom-right-radius: 50%;
}
input.open-card:checked ~ label.open-card-label:hover::before {
	width: 100px;
	height: 100px;
	line-height: 100px;
}
input.open-card:checked ~ label.open-card-label::after {
	background: #00000000;
}

input.open-card:checked ~ label.card-toggle-label {
	opacity: 0;
	left: 120%;
}

/*background open-card*/
input.open-card:checked ~ .card-image {
	background-position: 50% 50%;
	opacity: 1;
}

/*card-header open-card*/
input.open-card:checked ~ .card-header {
	opacity: 0;
	top: -100px;
}

/*card-content open-card*/
input.open-card:checked ~ .card-content {
	opacity: 0;
}
input.open-card:checked ~ .card-content.left-content {
	left: -300px;
	transition-delay: 0s;
}
input.open-card:checked ~ .card-content.right-content {
	left: 300px;
	transition-delay: 0s;
}

/*card-footer open-card*/
input.open-card:checked ~ .card-footer {
	opacity: 0;
	bottom: -100px;
}

Recomendado

Generador de contraseñas de SENAPI

Animaciones impulsadas por desplazamiento Detección de desplazamiento

solicitud de citas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS