CSS 不一定要写得多么复杂才能实现特殊效果. 如下就是三个超级简单的过渡的例子, 可能只是几行代码, 但是添加到 web 应用程序中, 却会让它增色不少.
如下是我们将在本教程中构建的代码
项目设置
在这个项目中, 我们将把过渡效果应用到一个 class 为 box 的元素上面. 这个 box 元素内部是垂直和水平居中的文字内容. html 结构相当简单:
- <div class='box'>
- <p>TEXT</p>
- </div>
CSS 代码也一样简单. 我们想要使用无衬线字体, 并确保 div 中的段落文本是白色的, 可以通过如下代码来实现:
- body {
- color: white;
- font-family: Helvetica, Sans-Serif;
- }
另外, 给 box 元素添加如下 CSS 属性:
- .box {
- width:200px; /* Set the Width of box */
- height:50px; /* Set the Height of box */
- background:#424242; /* Dark Grey Background color */
- transition:all 0.25s ease; /* Transition settings */
- display: flex; /* Use Flexbox on P */
- align-items: center; /* Center P */
- justify-content: center; /* Center P */
- margin: 10px; /* Apply a margin around our Box */
- }
专门建立的学习 Q-q-u-n: 731771211, 分享学习方法和需要注意的小细节, 不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
无论你对 CSS 的过渡属性熟悉与否, 我们在这里都来简要介绍一下, 一共分为三步.. 第一步, 我们需要将它应用到 all 变化的属性. 接下来, 设置过渡时长为 0.25 秒. 最后, 将动画函数选为 ease.ease 的表现状态就是起止过程比较缓慢, 中间过渡迅速.
holly high! 目前准备工作都已经就绪, 接下来就是添加过渡效果了. 到目前为止, div 看起来应该像下面这样.
褪色效果
首先, 添加一个褪色的过渡. 新建一个 div 元素, 并为它添加一个名为 fade 的类:
- <div class='box fade'>
- <p>FADE HERE</p>
- </div>
接下来我们所需要做的就是为这个 fade 类指定悬停规则. 我们需要借助 CSS 伪类选择器: hover 来完成这件事情. 这个伪类选择器对所有的元素都有效, 并且会在元素处于鼠标指针悬停状态下的时候激活 CSS 声明. 基于此, 我们借助: hover 选择器将 div 的透明度改为 0.5:
- .fade:hover {
- opacity: 0.5;
- }
简单吧. 上面这句 CSS 声明就为 div 指定了一个悬停效果. 如下就是目前它展现的样子. 而你之所以能够看到过渡样式, 是因为我们一开始在名为 box 的类中使用了 transition:all 0.25s ease; 的声明. 看下面, 是不是一个还不错的褪色效果:
来点颜色看看
指定一个变色过渡其实和褪色过渡的过程异曲同工. 首先, 创建一个 div 元素, 并为它添加一个名为 color 的类.
- <div class='box color'>
- <p>COLOR HERE</p>
- </div>
同样地, 我们也要借助: hover 选择器来帮我们完成这件事, 但是这一次我们不是改变透明度而是背景色:
- .color:hover {
- background: #FF5722;
- }
如下就是实际效果了:
一起摇摆
接下来, 来实现一个摆动的效果. 这个效果实现起来比前面的两个例子稍显复杂. 在这个例子中, 我会采用 @keyframes 来完成.
@keyframes-- 赋予你在一个 CSS 动画序列中控制中间步骤的魔力.
首先还是一样, 你肯定已经听烦了, 创建一个 div 元素, 并未它添加一个名为 wiggle 的类:
- <div class='box wiggle'>
- <p>WIGGLE WIGGLE</p>
- </div>
接下来, 我们要做的就是借助 @keyframes 来创建动画. 我们先给动画起个名字, 就叫 wiggle 吧. 并在如下的代码中添加抖动效果的实现:
专门建立的学习 Q-q-u-n: 731771211, 分享学习方法和需要注意的小细节, 不停更新最新的教程和学习技巧
- (从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
- @keyframes wiggle {
- 20% { transform: translateX(4px); }
- 40% { transform: translateX(-4px); }
- 60% { transform: translateX(2px); }
- 80% { transform: translateX(-1px); }
- 100% { transform: translateX(0); }
- }
从上面的代码已经可以看出,@keyframes 赋予我们将动画分解成单步, 并且精确定义每一步发生了什么的能力. 通过百分比的方式指定动画的进度:
20%--div 相对于初始位置右移 4px.
40%--div 相对于初始位置左移 4px.
60%--div 相对于初始位置右移 2px.
80%--div 相对于初始位置左移 1px.
100%--div 恢复到初始位置.
现在我们就能借助: hover 选择器来展示 wiggle 的动画了:
- .wiggle:hover {
- animation: wiggle 1s ease;
- animation-iteration-count: 1;
- }
我们将 animation 设置成 wiggle. 同时希望动画持续 1 秒的时长, 采用 ease 的动画效果.
最后, 就是指定动画在每次鼠标指针悬停的时候触发一次.
下图就是最终的动画效果:
来源: http://www.jianshu.com/p/46bdbbb82a1d