css3字体弹跳动画_如何使用CSS3动画创建弹跳效果

今天，我们将使用CSS3动画进行实验。 在上一篇文章中，我们讨论了如何使用CSS3 Animation重新创建“字幕”效果 。 这次，我们将尝试创建一个具有反弹效果的“通知栏”。

因此，让我们开始吧。

• 观看演示

入门

让我们创建一个新HTML文档，并添加以下标记来构造通知栏。

<div class="css3-notification">
	<p>Hi, this is a notification and it bounces.</p>
</div>

然后，添加一些装饰样式来修饰通知栏。

.css3-notification {
	font-size: .8em;
	text-align: center;
	padding: 10px;
	background-color: #111;
	color: #fff;
	box-shadow:	0px 1px 3px 0px rgba(0, 0, 0, .3);
	text-transform: uppercase;
	position: relative;