css横幅_带有CSS3的动画网页横幅

css横幅

View demo 查看演示 Download Source 下载源

Hey there folks! Today we’re going to take a look at spicing up our web banners, ads or any content for that matter, with CSS3 animations.

大家好！ 今天，我们来看看如何使用CSS3动画来修饰我们的网络横幅，广告或任何与此相关的内容。

Firefox and WebKit browsers are currently the only browsers that support CSS animation, but we’ll take a look at how we can easily make these ads also function in other browsers (which I’ll affectionately refer to as 18th century browsers). However, don’t expect perfect support for all browsers (specifically IE 7 and lower) when experimenting with modern CSS techniques.

Firefox和WebKit浏览器是目前唯一支持CSS动画的浏览器，但是我们将研究如何轻松地使这些广告在其他浏览器中正常工作(我将其亲切地称为18世纪浏览器)。 但是，当尝试使用现代CSS技术时，不要指望对所有浏览器(特别是IE 7和更低版本)都提供完美的支持。

Ok then, let’s build some kick-butt, animated web banners!

好吧，让我们建立一些逼真的动画网页横幅！

Please note: In order to save space, all vendor prefixes have been removed. Refer to the source files for the complete CSS. If you are unfamiliar with CSS animations, I’d highly recommend reading this first.

请注意：为了节省空间，所有供应商前缀均已删除。 有关完整CSS，请参考源文件。 如果您不熟悉CSS动画，则强烈建议您先阅读此内容。

标记 (The Markup)

First off, we’re going to structure the ad’s elements by laying out the HTML. At this point, we’ll need to think through how we want the animation to function – as this will effect the child/parent structure of our markup (I’ll explain further below):

首先，我们将通过布置HTML来构造广告的元素。 在这一点上，我们需要仔细考虑动画的功能，因为这将影响标记的子级/父级结构(我将在下面进一步解释)：

<div id="ad-1">
	<div id="content">
		<h2>Lost at sea?</h2>
		<h3>Relax - we've got your rudder.</h3>
		<form>
			<input type="text" id="email" value="Email address..." />
			<input type="submit" id="submit" value="Guide me" />
		</form>
	</div>
	<div id="clouds">
		<ul id="cloud-group-1">
			<li class="cloud-1"></li>
			<li class="cloud-2"></li>
			<li class="cloud-3"></li>
		</ul>
		<ul id="cloud-group-2">
			<li class="cloud-1"></li>
			<li class="cloud-2"></li>
			<li class="cloud-3"></li>
		</ul>
	</div>
	<ul id="boat">
		<li>
			<div id="question-mark"></div>
		</li>
	</ul>
	<ul id="water">
		<li id="water-back"></li>
		<li id="water-front"></li>
	</ul>
</div>

In order to understand our markup structure, let’s focus in on the boat for a second:

为了理解我们的标记结构，让我们专注于第二点：

<ul id="boat"> <!-- Groups the boat's elements -->
	<li> <!-- The boat itself -->
		<div id="question-mark"></div> <!-- The question mark (no crap) -->
	</li>
</ul>

Now, when you view the first ad on the demo page, there are 3 separate animations taking place on the boat:

现在，当您在演示页面上查看第一个广告时，船上将发生3个单独的动画：

1. An animation that slides the boat in from the left. This is applied directly to the unordered list (group).

   从左向右滑动船的动画。 这直接应用于无序列表(组)。

2. An animation that gives the boat a nice bobbing effect – simulating the boat floating on water. This is applied directly to the list element (boat).

   一种动画，使船具有很好的起跳效果–模拟船在水上漂浮。 这直接应用于列表元素(船)。

3. An animation that fades in the question mark. This is applied directly to the div (question mark).

   淡入问号的动画。 这直接应用于div(问号)。

If you’re not already seasick, take another look at the demo page. You’ll see that the bobbing animation applied to the list item (the boat) also affects the div inside of it (the question mark). Similarly, the “slide in” animation that is applied to the unordered list (group) also affects the list item and div inside of it (the boat and question mark). This leads us to an important observation:

如果您还没有晕船，请再次查看演示页面。 您将看到应用于列表项(船)的浮动动画也影响其中的div(问号)。 同样，应用于无序列表(组)的“滑入”动画也会影响列表项和其中的div(船和问号)。 这导致我们得到一个重要的观察结果：

Child elements take on their parent’s animation in addition to their own animation. With this knowledge added to our arsenal, we’re just a number of child/parent structures away from creating animations that’ll blow minds (and the processor on your Grandma’s laptop)!

子元素除了具有自己的动画外，还具有其父级的动画。 将这些知识添加到我们的军械库后，我们仅是一些儿童/父级结构，而无法制作出令人震惊的动画(以及奶奶笔记本电脑上的处理器)！

CSS (The CSS)

Before we jump into the really fun stuff and start animating, we still need to style the ad and come up with a pure CSS fallback for browsers stuck in the 18th century.

在我们跳入真正有趣的内容并开始进行动画制作之前，我们仍然需要对广告进行样式设置，并为陷入18世纪的浏览器提供纯CSS后备功能。

18世纪浏览器的后备 (The Fallback For 18th Century Browsers)

We’ll create a fallback by simply styling the markup as if CSS animations don’t exist (the thought of CSS animations being non-existent is enough to make any grown man cry – but hang in there with me). In other words, if our animations aren’t able to play, the ad should still look decent. This way, when someone is viewing your ad with an 18th century browser, they will see a normal, static web ad – instead of blank ad space.

我们将通过简单地对标记进行样式设置来创建后备，就好像CSS动画不存在一样(不存在CSS动画的想法足以使任何成年男子哭泣-但与我同在)。 换句话说，如果我们的动画无法播放，则广告仍然应该看起来不错。 这样，当有人使用18世纪的浏览器查看您的广告时，他们将看到正常的静态网络广告-而不是空白的广告空间。

For example: If someone were to use CSS like this, they’d be in trouble:

例如：如果有人使用这样CSS，他们将会遇到麻烦：

/* WRONG WAY! */

@keyframe our-fade-in-animation {
	0%   {opacity:0;}
	100% {opacity:1;}
}

div {
	opacity: 0; /* This div is hidden by default - a big no-no!*/
	animation: our-fade-in-animation 1s 1;
}

If a user’s browser doesn’t support animations, the div will remain invisible for the rest of its sad and lonely life. This is when their client breaks down the door of their office – chainsaw in hand – and demands to know why they haven’t sold a single too-too (or whatever their client is selling)! While failing to comprehend how a browser could be so pathetic, their life will end miserably as they curses Internet Explorer with their last breath…

如果用户的浏览器不支持动画，则div在余生和孤独的生活中将保持不可见状态。 这是当他们的客户用手电锯打破办公室的门，并要求知道为什么他们没有卖得太单一(或客户出售的任何产品)时！ 尽管无法理解浏览器如何如此可悲，但他们的生命将因悲惨地诅咒Internet Explorer而悲惨地结束……

Don’t worry though – neither of us have to be in that poor, developer’s shoes. This is how we’ll provide increased browser support:

不过，请放心-我们俩都不必身处那可怜的开发人员的行列。 这就是我们将提供更多浏览器支持的方式：

/* CORRECT WAY */

@keyframe our-fade-in-animation {
	0%   {opacity:0;}
	100% {opacity:1;}
}

div {
	opacity: 1; /* This div is visible by default */
	animation: our-fade-in-animation 1s 1;
}

As you can see, the div will show even if the animation is not able to play. If the animation is able to play like God intended, the div will instantly hide and the epic animation you created will follow through.

如您所见，即使动画无法播放，div也会显示。 如果动画能够按照上帝的预期进行播放，则div将立即隐藏，并且您创建的史诗动画将继续进行。

这肉 (The Meat)

Now that we know how to make our animated ads play nicely with 18th century browsers (and avoid being hacked to pieces by our clients), let’s get to the meat of the CSS and lay this ad out.

现在，我们知道如何使动画广告在18世纪的浏览器中很好地播放(并避免被我们的客户砍成碎片)，让我们了解CSS的本质，并布置该广告。

While we are doing this, there are 3 key things to keep in mind:

在执行此操作时，需要牢记3个关键事项：

1. Since these ads could be used on different websites, we’ll make all of our CSS selections very specific. We’ll do this by starting every selector with the id: #ad-1. This will keep our ad’s styles from interfering with existing styles and elements.

   由于这些广告可以在不同的网站上使用，因此我们将非常明确地选择所有CSS。 我们将通过以id＃ad-1开头的每个选择器来完成此操作。 这样可以防止我们的广告样式干扰现有的样式和元素。

2. We will purposefully ignore the animation delay feature when setting up our animations. If we used the animation delay feature, as well as styling our elements the correct way (visible by default), things would abruptly fly off the screen (or hide) when their animation finally played. This is why it’s key for our animations to start instantly – allowing our animations enough time to hide and move elements off the screen before they actually display. We will simulate an animation delay by increasing the duration of the animation and manually adjusting keyframes. You’ll see examples of this when we start animating.

   设置动画时，我们将有目的地忽略动画延迟功能。 如果我们使用动画延迟功能，以及以正确的方式设置元素的样式(默认情况下可见)，则当动画最终播放时，事物会突然从屏幕上飞出(或隐藏)。 这就是为什么动画立即启动的关键所在–让我们的动画有足够的时间在元素实际显示之前将其隐藏和移出屏幕。 我们将通过增加动画的持续时间并手动调整关键帧来模拟动画延迟。 当我们开始动画制作时，您会看到这样的示例。

3. Whenever possible, use one animation for multiple elements. This way we can save a lot of time and cut down on code bloat (nobody wants a sumo sitting on their bandwidth). You can create slightly different effects with the same animation by adjusting duration and easing.

   尽可能将一个动画用于多个元素。 这样，我们可以节省大量时间并减少代码膨胀(没人希望相扑坐在他们的带宽上)。 您可以通过调整持续时间和缓动来使用相同的动画创建稍微不同的效果。

Alrighty, we’ll start by setting up our “canvas” for the ad. Let’s make sure it has a relative position so that element’s inside can be positioned correctly. We also need to make sure that any overflow is hidden:

好吧，我们将从为广告设置“画布”开始。 让我们确保它具有相对位置，以便可以正确定位元素的内部。 我们还需要确保隐藏了所有溢出：

#ad-1 {
	width: 720px;
	height: 300px;
	float: left;
	margin: 40px auto 0;
	background-image: url(../images/ad-1/background.png);
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	position: relative;
	box-shadow: 0px 0px 6px #000;
}

Next, we’ll style the text and input fields and call for the corresponding animations. We also want to make sure this content has the highest z-index of all our moving parts – that way it can’t be accidentally covered up:

接下来，我们将设置文本和输入字段的样式，并调用相应的动画。 我们还想确保此内容在所有运动部件中具有最高的z索引-这样就不会被意外掩盖：

#ad-1 #content {
	width: 325px;
	float: right;
	margin: 40px;
	text-align: center;
	z-index: 4;
	position: relative;
	overflow: visible;
}
#ad-1 h2 {
	font-family: 'Alfa Slab One', cursive;
	color: #137dd5;
	font-size: 50px;
	line-height: 50px;
	text-shadow: 0px 0px 4px #fff;
	animation: delayed-fade-animation 7s 1 ease-in-out; /* This will fade in our h2 with a simulated delay */
}
#ad-1 h3 {
	font-family: 'Boogaloo', cursive;
	color: #202224;
	font-size: 31px;
	line-height: 31px;
	text-shadow: 0px 0px 4px #fff;
	animation: delayed-fade-animation 10s 1 ease-in-out; /* This will fade in our h3 with a simulated delay */
}
#ad-1 form {
	margin: 30px 0 0 6px;
	position: relative;
	animation: form-animation 12s 1 ease-in-out;  /* This will slide in our email address form with a cool elastic effect. This also has a simulated delay */
}
#ad-1 #email {
	width: 158px;
	height: 48px;
	float: left;
	padding: 0 20px;
	font-size: 16px;
	font-family: 'Lucida Grande', sans-serif;
	color: #fff;
	text-shadow: 1px 1px 0px #a2917d;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	border:1px solid #a2917d;
	outline: none;
	box-shadow: -1px -1px 1px #fff;
	background-color: #c7b29b;
	background-image: linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
}
#ad-1 #email:focus {
	background-image: linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);
	
}
#ad-1 #submit {
	height: 50px;
	float: left;
	cursor: pointer;
	padding: 0 20px;
	font-size: 20px;
	font-family: 'Boogaloo', cursive;
	color: #137dd5;
	text-shadow: 1px 1px 0px #fff;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border:1px solid #bcc0c4;
	border-left: none;
	background-color: #fff;
	background-image: linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
}
#ad-1 #submit:hover {
	background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
}

Now we’re going to style the water and call for the corresponding animations:

现在我们将对水进行样式设置并调用相应的动画：

#ad-1 ul#water{
	/* If we wanted to add another animation to the water (move it horizontally for instance), we could do that here */
}
#ad-1 li#water-back {
	width: 1200px;
	height: 84px;
	background-image: url(../images/ad-1/water-back.png);
	background-repeat: repeat-x;
	z-index: 1;
	position: absolute;
	bottom: 10px;
	left: -20px;
	animation: water-back-animation 3s infinite ease-in-out; /* Bobbing water effect */
}
#ad-1 li#water-front {
	width: 1200px;
	height: 158px;
	background-image: url(../images/ad-1/water-front.png);
	background-repeat: repeat-x;
	z-index: 3;
	position: absolute;
	bottom: -70px;
	left:-30px;
	animation: water-front-animation 2s infinite ease-in-out; /* Another bobbing water effect - yet slightly different. We'll make this animation move a little bit faster in order to create some perspective. */
}

Let’s style the boat and all of its elements. Again, we’ll need to make calls for the corresponding animations:

让我们设计船及其所有元素的样式。 同样，我们需要调用相应的动画：

#ad-1 ul#boat {
	width: 249px;
	height: 215px;
	z-index: 2;
	position: absolute;
	bottom: 25px;
	left: 20px;
	overflow: visible;
	animation: boat-in-animation 3s 1 ease-out; /* Slides the group in when ad starts */
}
#ad-1 ul#boat li {
	width: 249px;
	height: 215px;
	background-image: url(../images/ad-1/boat.png);
	position: absolute;
	bottom: 0px;
	left: 0px;
	overflow: visible;
	animation: boat-animation 2s infinite ease-in-out; /* Simulate the boat bobbing on the water - similar to the animation already used on the water itself. */
}
#ad-1 #question-mark {
	width: 24px;
	height: 50px;
	background-image: url(../images/ad-1/question-mark.png);
	position: absolute;
	right: 34px;
	top: -30px;
	animation: delayed-fade-animation 4s 1 ease-in-out; /* Fade in the question mark */
}

Last but not least, we’ll style the cloud groups and the single clouds. We’ll also call a pretty nifty animation that will give them a continuous, scrolling effect. Here’s an illustration of what’s going on:

最后但并非最不重要的一点是，我们将对云组和单个云进行样式设置。 我们还将调用一个非常漂亮的动画，它将为他们提供连续的滚动效果。 以下是发生的情况的说明：

Now here’s the CSS:

现在是CSS：

#ad-1 #clouds {
	position: absolute;
	top: 0px;
	z-index: 0;
	animation: cloud-animation 30s infinite linear; /* Scrolls the clouds off to the left, resets, and repeats */
}
#ad-1 #cloud-group-1 {
	width:720px;
	position: absolute;
	left:0px;
}
#ad-1 #cloud-group-2 {
	width: 720px;
	position: absolute;
	left: 720px;
}
#ad-1 .cloud-1 {
	width: 172px;
	height: 121px;
	background-image: url(../images/ad-1/cloud-1.png);
	position: absolute;
	top: 10px;
	left: 40px;
}
#ad-1 .cloud-2 {
	width: 121px;
	height: 75px;
	background-image: url(../images/ad-1/cloud-2.png);
	position: absolute;
	top: -25px;
	left: 300px;
}
#ad-1 .cloud-3 {
	width: 132px;
	height: 105px;
	background-image: url(../images/ad-1/cloud-3.png);
	position: absolute;
	top: -5px;
	left: 530px;
}

Phew! That was a lot of CSS. Hang in there, the fun part is next!

！ 那是很多CSS。 挂在那里，有趣的部分是下一个！

动画 (The Animations)

Remember: Up to this point, nothing is actually being animated. If you were to view the ad now, you would see what 18th century browsers will render – a static ad. We will now actually create the animations we have previously called for in our CSS.

切记：到目前为止，实际上没有任何动画。 如果您现在要查看广告，您将看到18世纪浏览器将呈现的内容–静态广告。 现在，我们将实际创建我们以前在CSS中要求的动画。

Now that our ad is displaying nicely, let’s give this static ad a shock and bring it to life (horrible pun is 100% intended)! Let’s jump right in – I’ll walk you through what’s going on in the comments:

现在，我们的广告可以很好地展示，让我们给这个静态广告一个震撼，并将其变为现实(可怕的双关语是100％想要的)！ 让我们直接进入–我将带您逐步了解评论中的内容：

/* An animation with a simulated delay used to fade in multiple elements. We've achieved a simulated delay by starting the fade in process 80% of the way through the animation (instead of starting the process immediately). We can use this technique and increase the animation duration on any element to reach the desired delay duration: */

@keyframes delayed-fade-animation {
	0%   {opacity: 0;}
	80%  {opacity: 0;}
	100% {opacity: 1;}
}

/* An animation that will slide in our email address form. We've spiced this animation up by overshooting the desired position and sliding it back - this creates a nice elastic effect. As you can see, this animation also uses a simulated delay: */

@keyframes form-animation {
	0%   {opacity: 0; right: -400px;}
	90%  {opacity: 0; right: -400px;}
	95%  {opacity: 0.5; right: 20px;}
	100% {opacity: 1; right: 0px;}
}

/* This is as basic as an animation gets. Only two keyframes and no simulated delay. This animation slides the boat in from the left when the ad begins: */

@keyframes boat-in-animation {
	0%   {left: -200px;}
	100% {left: 20px;}
}

/* Here's our really cool cloud animation. The first group of clouds will start off aligned in the center with the second group off to the right of the screen. While the left group of clouds is sliding off the screen to the left, the right group will begin to appear on the right side of the screen. As soon as the left group is completely off the screen, the clouds will reset (very quickly) to their original positions and repeat: */

@keyframes cloud-animation {
	0%       {left: 0px;}
	99.9999%   {left: -720px;}
	100%     {left: 0px;}
}

/* These last 3 animations are all basically the same - the only difference being the position of each element. They will emulate the bobbing effect of an ocean: */

@keyframes boat-animation {
	0%   {bottom: 0px; left: 0px;}
	25%  {bottom: -2px; left: -2px;}
	70%  {bottom: 2px; left: -4px;}
	100% {bottom: -1px; left: 0px;}
}
@keyframes water-back-animation {
	0%   {bottom: 10px; left: -20px;}
	25%  {bottom: 8px; left: -22px;}
	70%  {bottom: 12px; left: -24px;}
	100% {bottom: 9px; left: -20px;}
}
@keyframes water-front-animation {
	0%   {bottom: -70px; left: -30px;}
	25%  {bottom: -68px; left: -32px;}
	70%  {bottom: -72px; left: -34px;}
	100% {bottom: -69px; left: -30px;}
}

Presto! Our ad has finally come to life. 🙂

快点！ 我们的广告终于变成了现实。 🙂

收盘时 (In Closing)

During the course of this tutorial, we learned the key concepts of creating animated, 18th century browser supporting(ish) web ads:

在本教程的过程中，我们学习了制作18世纪动画浏览器支持的网络广告的关键概念：

1. Child elements take on their parent’s animation in addition to their own animation. We can use this to create more complex animations.
   子元素除了具有自己的动画外，还具有其父级的动画。 我们可以使用它来创建更复杂的动画。
2. When styling our ads, we should use very specific selectors so that our ads won’t interfere with existing CSS.
   在设计广告样式时，我们应该使用非常具体的选择器，以免广告干扰现有CSS。
3. Position and style elements so that if our animations aren’t able to run, the ad will still look decent.
   位置和样​​式元素，以便如果我们的动画无法播放，则广告仍将看起来不错。
4. When possible, use one animation for multiple elements – save time and code bloat.
   尽可能将一个动画用于多个元素-节省时间和代码膨胀。
5. Frequently refer to Internet Explorer as “the 18th century browser” while shaking your fist in disgust and anger.
   经常将Internet Explorer称为“ 18世纪浏览器”，而在厌恶和愤怒中握紧拳头。

Don’t let your creativity be limited by these examples – there are plenty of other creative things you can do with CSS animations that I didn’t cover. For instance, try playing around with CSS transformations.

不要让您的创造力受到这些示例的限制-我没有讲过CSS动画还有很多其他的创造力。 例如，尝试使用CSS转换。

Thanks for reading and happy CSS’ing!

感谢您的阅读和CSS的快乐！

翻译自: https://tympanus.net/codrops/2012/01/10/animated-web-banners-with-css3/

css横幅