CSS 设计对象呼吸视觉动画效果

CSS

关键代码 @keyframes compare-details-hero-image-float

调用代码 animation:compare-details-hero-image-float 5s ease-in-out infinite;

@keyframes compare-details-hero-image-float {
	0% {
		transform:translateY(0)
	}

	50% {
		transform:translateY(-12px)
	}
	to {
		transform:translateY(0)
	}
}

.compare-details-hero-image {
	position: relative;
	max-width: 399px;
	background: rgba(255, 255, 255, 0.18);
	left: 0;
	right: 0;
	margin: 86px auto;
	padding: 38px;
	border-radius: 8px;
	text-align: center;
	animation:compare-details-hero-image-float 5s ease-in-out infinite;
}

.compare-details-hero-image img {
	animation:compare-details-hero-image-float 5s ease-in-out infinite;
}

HTML

<div class="compare-details-hero-image">
	<img src="https://static.hexingxing.cn/v2/element/webp/so.png" height="98px" width="98px">
</div>
<div class="compare-details-hero-image">
	何星星
</div>

Demo

https://static.hexingxing.cn/v3/css/respiratory-visualization/