css3實現星星閃爍效果

時間 2019-11-25

標籤 css3 css 實現星星閃爍效果欄目 CSS 简体版

原文原文鏈接

素材： html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	body {
		background: black;
	}

	.shine {
		background-image: url(./shine.png);
		background-repeat: no-repeat;
		background-position: center;
		width: 155px;
		height: 155px;
		position: absolute;
		animation: opacity-change 1s ease-in-out infinite;
		-webkit-animation: opacity-change 1s ease-in-out infinite;
		-moz-animation: opacity-change 1s ease-in-out infinite;
		-o-animation: opacity-change 1s ease-in-out infinite;
	}

	.shine2 {
		animation: opacity-change 1.75s ease-in-out infinite;
		-webkit-animation: opacity-change 1.75s ease-in-out infinite;
		-moz-animation: opacity-change 1.75s ease-in-out infinite;
		-o-animation: opacity-change 1.75s ease-in-out infinite;
	}

	@keyframes opacity-change {
		0% {
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

	@-webkit-keyframes opacity-change {
		0% {
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

	@-moz-keyframes opacity-change {
		0% {
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

	@-o-keyframes opacity-change {
		0% {
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

</style>

<body>
	<div class="shine shine2">
		<h2>閃爍的星星</h2>
	</div>
</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。