活动通知效果，（点击放大、缩小）

一、HTML

<div id="container">
	<button type="button">

		<section class="activity">
			<div class="item">
				<p><a href="#">Rachel</a>, <a href="#">Derek</a>, <a href="#">Maria</a>, and <a href="#">4 other users</a> loved your pen "<a href="#">Untitled</a>"</p>
			</div>
			<div class="item">
				<p>8 users added your pen "<a href="#">Untitled</a>" to a collection.</p>
			</div>
			<div class="item">
				<p><a href="#">Marques</a>, <a href="#">Greg</a>, <a href="#">Penny</a>, and <a href="#">16 other users</a> loved your pen "<a href="#">Untitled II</a>"</p>
			</div>
		</section>

		<span class="buttonText">Activity</span>

	</button>
</div>

二、CSS

#container {
	position: absolute;
	bottom: 50%;
	left: 50%;
	transform: translate(-50%, 50%);
}

.activity {
	opacity: 0;
	height: 0;
	transition: 300ms all ease;
	position: absolute;
	pointer-events: none;
	left: 50%;
	top: 4.8rem;
	transform: translatex(-50%);
	.item {
		max-height: 0;
		opacity: 0;
		margin: 1rem;
		padding: 2rem;
		font-weight: 500;
		text-transform: none;
		letter-spacing: 0;
		font-size: 1.8rem;
		text-align: left;
		background: fade(#362f21, 10%);
		outline: 2px solid orangered;
		border-radius: 0.6rem;
		transition: 300ms background ease-in-out;
		&:hover {
			background: fade(#362f21, 5%);
		}
		p {
			margin: 0;
		}
	}
	.active & {
		opacity: 1;
		width: 100%;
		height: 100%;
		pointer-events: auto;
	}
}

.active .activity .item {
	animation: 800ms ease-in 500ms 1 forwards itemLoad;
}

button {
	font-size: 1.8rem;
	text-transform: uppercase;
	font-family: inherit;
	font-weight: 700;
	letter-spacing: 0.1rem;
	padding: 1.2rem 2.4rem;
	border: none;
	border-radius: 0.8rem;
	color: #362f21;
	border: 0.2rem solid #362f21;
	background: none;
	position: relative;
	cursor: pointer;
	min-width: 0;
	min-height: 0;
	transition: 300ms color ease-in-out, 300ms background ease-in-out,
		300ms min-width 0ms ease-in-out, 300ms min-height 300ms ease-in-out;
	.buttonText {
		position: relative;
		top: 0;
		transition: 300ms top 280ms ease-in-out;
	}
	&::before {
		content: "3";
		letter-spacing: 0;
		color: #e6e1d6;
		font-weight: 500;
		font-size: 1.4rem;
		line-height: 2.4rem;
		padding: 0 0.7rem;
		height: 2.4rem;
		background: radial-gradient(orangered 50%, red 75%);
		border-radius: 1.2rem;
		position: absolute;
		top: -1.2rem;
		left: 0.7rem;
	}
	&:hover {
		background: #362f21;
		color: #e6e1d6;
	}
	&:focus,
	&:active {
		background: #e6e1d6;
		color: #362f21;
	}
	.active & {
		min-width: 36rem;
		min-height: 36rem;
		&:hover {
			background: #e6e1d6;
			color: #362f21;
		}
		&::before {
			animation: 600ms ease-in 500ms 1 forwards notiPop;
		}
	}
	.active & .buttonText {
		top: -15rem;
	}
}

.clicked:not(.active) button::before {
	display: none;
}

@keyframes itemLoad {
	to {
		opacity: 1;
		max-height: 20rem;
		outline: 2px solid transparent;
	}
}

@keyframes notiPop {
	to {
		transform: scale(0);
	}
}

body {
	height: 100vh;
	margin: 0;
	background: #e6e1d6;
	font-family: "Inter", sans-serif;
}

html {
	font-size: 62.5%;
}

三、JS

const trigger = document.getElementById("container");
trigger.addEventListener("click", (event) => {
	trigger.classList.add("clicked");
	trigger.classList.toggle("active");
});