教程、示例代码和示例

教程、示例代码和示例


当我们使用 JS 和 jQuery 时,我们可以完全控制动画,我们可以创建一些很棒的效果,但价格相当高。 处理时间、跨浏览器兼容性(例如,移动设备在涉及 JS 时就大不相同)和代码复杂性本身是我们在创建动画界面时应该牢记的要点。

所以,今天我们将看看如何通过使用 CSS 动画和过渡来避免 JS。 我们将从非常基本的步骤到一些很棒的效果进行讨论,例如手风琴面板和动画子菜单。

找个座位,你的记事本和一个真正的浏览器(除了 IE 之外的任何东西),让我们开始吧。

热身

在使用 CSS 动画方面,我们有很多优点(和我们生活中的一切一样的缺点)。 如果您需要将这些产品卖给您的老板或客户,请记住以下几点:

  • 它们可能更快,因为它们可以利用硬件加速(作为 HTML5 实现)
  • 它们在移动设备中的表现会更好,并且不需要特定的代码来跟踪触摸事件
  • JS需要被浏览器解释,破坏浏览器的可能性要大得多。 所以当 CSS 失败时,它会默默地失败,而 JS 可以破坏整个页面
  • 他们有很好的浏览器支持(这个网站将帮助你检查具体的统计数据:http://caniuse.com/#search)

CSS3 动画示例

在我们开始讨论这篇文章的内容之前,让我们看一些用纯 CSS 制作的漂亮动画。

纯 CSS Twitter 失败的鲸鱼

动画失败的鲸鱼

由 Steven Dennis 制作,请看实际操作。

纯 CSS 滚动可乐罐
CSS 3 动画示例:滚动可乐罐

由 Roman Cortes 制造,请参阅实际操作。

纯 CSS 行走的人

CSS 3 动画示例:行走的人

由 Andrew Hoyer 制作,请看实际操作。

弄脏你的手

让我们开始代码。 我们将使用大量的 CSS 伪类来触发动画。 老实说,很多开发者建议你使用 JS 来激活和取消激活动画,但这里我们会看到更简单的方法:

#test {
	background: red;
}
#test:hover {
	background: green;
}
#test:active {
	background: blue;
}
#test:target {
	background: black;
}

我们还有一些其他的伪类可以使用,但你已经明白了! 因此,如果您单击 #test 元素(假设它是一个链接),会发生以下情况:

  • 正常状态:背景为红色
  • 悬停:当鼠标进入元素区域时,它会有一个绿色背景
  • 活动:当您单击光标并按下鼠标按钮时,背景颜色将为蓝色
  • 目标:当当前页面在 URL 中有 #test 时,此元素将为黑色

这些中的每一个都可以用于 CSS 动画,例如,您可以使用以下代码创建 2 个链接来激活和停用 CSS 动画,并使用目标伪元素:

<a href="#test">activate</a>
<a href="#">deactivate</a>

CSS 过渡

CSS 过渡将从初始状态平滑地更改为结束状态。 因此,您将在主选择器中使用“transition”属性定义时间和将受到影响的每个属性以及动画应该如何。 让我们看一个例子:

.test {
	/*transition-property duration timing-function,*/
	color: blue;
	transition: color 2s, font-size 2s ease-out;
}
.test:hover {
	color: red;
}
.test:active {
	font-size: 200%;
}

当您将鼠标悬停在 .test 元素上时,它会逐渐将颜色从蓝色变为红色(多好的调色板啊?)。 单击元素时,字体大小将逐渐增加到默认字体大小的 200%。

我们还有“过渡时间”属性,设置为缓出,即动画可用的“时间”将如何使用。 以下是可能的值:

  • 线性:从开始到结束的速度相同
  • 缓入:慢启动
  • 缓出:慢结束
  • 轻松:慢开始,中间快,然后慢结束
  • Ease-in-out:慢开始,慢结束
  • Cubic-bezier(a,b,c,d):自定义速度

三次贝塞尔函数将创建一个自定义动画,其中包含 4 个从 0 到 1 变化的数字,代表动画速度 X 持续时间的数学曲线。

为了获得更好的浏览器兼容性,您应该考虑为 Opera、Firefox 和 webkit 使用供应商前缀,如下所示:

div {
	width: 400px;
	-o-transition: width 2s;
	-moz-transition: width 2s;
	-webkit-transition: width 2s;
	transition: width 2s;
}

此外,您可以利用媒体查询根据浏览器宽度(移动设备、平板电脑)定义不同的转换。 这是一个简单的例子:

body {
	font-size: 1em;
}
@media screen and (max-width: 800px) {
	body {
		font-size: 0.8em;
}
}
@media screen and (max-width: 400px) {
	body {
		Font-size: 0.7em;
	}
}

当您增加浏览器宽度时,这里的字体大小会突然改变。 此代码将防止这种情况发生,从而提供更平滑的过渡:

body {
	-o-transition: font-size .5s linear;
	-moz-transition: font-size .5s linear;
	-webkit-transition: font-size .5s linear;
	transition: font-size .5s linear;
}

如果您有不同的纵向/横向显示或尺寸,如果您想更改宽度、颜色、填充、菜单显示,您也可以使用它。

CSS 动画——真正有趣的开始

动画是在单个选择器中定义的一系列转换。 要定义 CSS 动画,您需要执行 2 个步骤。

@keyframe 规则用于定义一系列动画步骤,它由一个唯一的名称和描述此动画如何工作的样式定义。 像往常一样,我们需要一些供应商前缀,就像在这个例子中一样:

/*the same code for each vendor*/
@-o-keyframe my-animation { ...
@-moz-keyframe my-animation { ...
@-webkit-keyframe my-animation { ...
/*animation name*/
@keyframe my-animation {
	/*frame selector*/
	0% {
		/*frame style*/
		Left: 0px;
		Top: 0px;
	}
	25% {
		Left: 200px;
		Top: 0px;
	}
	50% {
		Left: 200px;
		Top: 200px;
	}
	75% {
		Left: 0px;
		Top: 200px;
	}
	100% {
		Left: 0px;
		Top: 0px;
	}
}

因此,每种样式都由帧/时间帧(如 Flash 动画中的那些帧)定义为百分比以及应在此处应用的样式。 例如,此关键帧表示元素将向左移动,然后是顶部,然后是右侧,然后是底部。

完成第 1 步并创建关键帧后,您实际上可以将其应用于元素。 然后我们将使用与 CSS 过渡几乎相同的逻辑,不同之处在于现在我们的“过渡”是一个非常复杂的动画。

要应用它,我们将使用动画属性,它有 7 个子属性:

  • 名称:那个唯一标识符
  • 持续时间:从 0% 到 100% 需要多长时间
  • Timing-function:与过渡计时功能几乎相同
  • 延迟:启动 0% 需要多长时间
  • 迭代计数:我们将有多少次重复(无限循环的“无限”)
  • 方向:正常或交替(反向)
  • 播放状态:如果动画正在运行或暂停

当 #test 元素是页面的目标时,这会将我们的动画应用到它:

#test:target {
	/*animation-name | duration | timing-function | delay  |iteration-count | direction | play-state */
	animation: my-animation 10s linear 0s infinite normal running;
}

考虑到这一点,我们可以创建一些很棒的例子。

仅 CSS 手风琴

我们将使用 CSS 动画创建可折叠面板。 这是基本的 HTML 结构:

<div class="accordion">
	<a href="#tab1">Tab 1</a><div id="tab1"><p>TEXT 1</p></div>
	<a href="#tab2">Tab 2</a><div id="tab2"><p>TEXT 2</p></div>
	<a href="#tab3">Tab 3</a><div id="tab3"><p>TEXT 3</p></div>
</div>

这将只创建面板和触发每个面板的链接。 这就是魔法发生的地方:

/* any div that is inside of the accordion*/
.accordion div  {
	/*is hidden by default */
	height: 0;
	overflow: hidden;
	/* the black magic */
	transition: height 1s;
}
	/*when the mentioned div is the target */
	.accordion div:target {
		/*height:auto won’t work, but this will work fine*/
		height: 80px;
	}

很简单吧? 而你已经为此使用 JS 度过了你的一生? 🙂

带有子菜单的纯 CSS 菜单

这是另一个相当简单的应用程序。 您的站点中当然有一个导航菜单,而且我们经常需要在那里使用一些子菜单。 显示和隐藏项目的最佳方式是使用 jQuery,对吗? 好吧,在你测试了这段代码之后再想一想:

<nav>
	<ul>
		<li><a href="#item1">Item 1</a><div><ul>
			<li><a href="#item11">Item 1.1</a></li>
			<li><a href="#item12">Item 1.2</a></li>
		</ul></div></li>
		<li><a href="#item2">Item 2</a><div><ul>
			<li><a href="#item21">Item 2.1</a></li>
			<li><a href="#item22">Item 2.2</a></li>
		</ul></div></li>
	</ul>
</nav>

魔法从这里开始:

a {
	/* just making the links a tad better */
	display: block;
	padding: 4px;
}
nav {
	text-align: center;
}
	/* any menu (including the main one)*/
	nav ul {
		display: inline-block;
		list-style: none;
	}
		nav>ul>li {
			/* horizontal items (vertical will work fine too) */
			float: left;
		}
			nav li div {
				/*collapsing any sub-menu*/
				height: 0;
				overflow: hidden;
				/* Houdini feelings */
				transition: height 1s;
			}
			nav li:hover>div {
				height: 56px;
			}

加起来

这当然只是一个入门指南。 还有很多其他很酷的效果可以使用纯 CSS 动画来完成,而且还有很多事情还没有实现。

那么,你以前用过这个吗? 你能想到另一个 CSS 动画的好应用吗? 使用评论分享您的想法!

Leave a Comment