当前课程知识点：界面设计导论 > 第四章：从设计到实现：H5网页基础概念 > （9）CSS背景、特效、动画 > CSS背景、特效、动画
大家好
本节课我们来通过实例
学习一下css样式中
背景 特效以及动画的使用方法
我们现在还是回到编程环境当中来
来看一下这些css 相关的属性
我们还是先用一个盒子来举例子
还是header这个盒子
把其它的先去掉
好 先来看一下效果
这个效果目前是这样的一个盒子
我们现在给它添加一个背景图
这个呢我们在上节课已经接触到了
我们用logo这个小图片吧
好 现在来看一下效果
现在我们添加了一个背景图
那么现在背景图呢它可以
有几种填充方式
这个我们上次也接触到了
它的填充方式可以是100%的
我们看一下效果
那么这张图就100%的
填充到了这个盒子当中
另外呢还有一个是重复
x轴重复和纵轴重复的设置
可以是让它x轴和y轴都不重复
那把100%先去掉
这样能看出效果
好 看一下效果
现在看横向和纵向都没有重复
也可以让它横向重复
现在横向重复平铺了整个盒子
也可以让它纵向
这儿改成y就行了
就纵向重复平铺了这个盒子
最后呢在背景图这块
还可以设置多重背景图
也就是重叠的几个图可以摞在一起
例如我们用这两个图
先来看一下一个
好 这儿铺了一个背景图
我们后面再加一个
逗号 url
好 再来看一下效果
大家看现在两层背景图
已经叠加在一起了
在我们需要做这种底纹的时候
可以使用这种方法
可以分层的放置背景图
好 接下来呢我们来学习一下
文本阴影的效果
为了方便看清楚
我们把背景图的这两行先给去了
文本阴影用的是text-shadow
在这里呢有几个属性
水平的距离 垂直距离
然后是模糊距离
也先设成5
最后是颜色
先随便设一个颜色然后给它选一下
设一个蓝色吧
好 看一下效果
好 现在有了一个阴影
我们可以通过修改
来看一下它的变化
好 现在垂直的我把它的方向
给设成了负5像素
然后是变到上面去了
好
接下来呢我们学习一下
2D转化的方法
transform
它有几种
一种是旋转
比如旋转30度
看一下效果
好 旋转了30度
我们可以旋转不同的角度
还有呢就是放大
前面是x轴放大
后面是y轴放大
看一下效果
好 横向放大两倍
纵向放大4倍
好 我们整体放大两倍
好 最后还有一种就是翻转
翻转就是x轴多少度y轴多少度
好看一下效果
好 这是有一些翻转
这些呢都是2D的转化
接下来呢我们再看一下过度的特效
好 例如我们看这个盒子
它的宽度是100像素
然后我们现在在鼠标划过的时候
让它变成200像素的宽度
这是鼠标划过的状态
让它的宽度变成200像素
在原来的盒子上的css里面
增加transition
让它的宽度有一些变化
时间是两秒
这块时间可以根据咱们
动画的需要来设置
这儿冒号 没有空格
这个是就是鼠标划入时候的变化效果
我们看一下效果
鼠标划过的时候就宽度
逐渐变成了200像素
然后划出的时候就恢复原样
使用的时间是两秒
好 我们同时可以设置多个变化
例如高度也变成300
再看一下效果
我们高度这块没给它加transition
在这里呢我们可以把第一个
改成all 就是所有变化都同时进行
然后使用的时长是两秒
第三个变量呢是
它的变化形式可以是线性的
也可以是有一些环动
最后一个是延迟时间
例如也是两秒
这样的话是鼠标划入之后两秒
进行一个变化
然后这个变化使用的时长
也是两秒的时间
然后是使用一个环动的变化方式
我们现在看一下效果
让鼠标划入等两秒
然后开始变化
好 划出等两秒
开始 回到原位
这个就是我们过度的特效
接下来我们再学习一下动画的效果
我们先把刚才的都清理掉
然后我们现在要做动画
首先要先做一个keyframes
就是帧
起个名字
例如呢我们还是想把它
从宽度从之前的100变成300
可以用from
从 然后是to
在盒子上呢增加animation
然后是先是它的名字
继续是持续的时间
好 我们看一下效果
好 它就一直出现了一次这个动画
我们还可以呢通过它来修改
其它的样式
例如背景色
让它从红色变成蓝色
好看一下效果
好 从红色变成蓝色
另外呢我们还可以设置
它的iteration-count
这个就是它的循环次数
可以设成无限次循环
让它无限次的循环
可以看一下效果
好 它就不停的在执行这个动画
我们还可以设置它的变换方式
可以是环动的
好 再来看一下效果
这个不是特别明显
变换颜色的时候不是特别明显
没关系
好
这是从from to
是从哪变到哪是一步的这种方式
然后在这里面
因为动画是很灵活的
所以我们可以用百分比的形式
设成一段一段的
例如我们0%的时候是红色
然后50%的时候是蓝色
然后100%的时候
咱们三步吧
100%的时候是让它变成黄色
好 我们来看一下效果
这样从红变成蓝
又变成黄
OK
这里呢不仅是可以0% 50%
可以任意的
比如0% 20% 40% 80%
然后甚至也可以就是不规律的
0% 20% 然后100%
就是每一段都可以设置
我们讲到了背景的设置
文本阴影的效果
以及2D转化
还有过度效果
最后还有动画的这种css的效果
那么这些呢都涉及到一个
浏览器兼容性的问题
所以我们来看一下
在不同浏览器我们要
加上不同的前缀moz
是针对fire fox4
来做的前缀
然后要把每一项都再写一遍
增加前缀的
像我们这里呢就可以
就得再复制三回
第一部分呢增加moz这个前缀
这样可以使这个fire fox 的浏览器
能够正常的显示我们的动画效果
然后是webkit
这个前缀是针对safari这个浏览器
另外还有一个o
这个前缀是针对Opera这个浏览器
另外我们下面这部分
也是需要设置不同的前缀
我们依然是把它们复制
第一个加moz前缀
第二个加webkit前缀
最后一个加o的前缀
好
我们这样做完了之后呢
就对所有的浏览器
基本上都是兼容的
都能够正常显示
然后之前我们所做的transform
然后text-shadow这些
都需要加这些前缀
-课程简介
--课程简介
-（1） 什么是界面
--什么是界面
-（2）界面设计为什么重要
-（3）UI的进化
--UI的进化
-（4）设计师的自我修炼
--新手的疑问
-第一章总结
--第一章总结
-第一章：界面设计概述--课后习题
-本章概述
--本章概述
-（1） 为什么设计？
-- 为什么设计？
-（2）界面设计流程
--界面设计流程
-（3）视觉优化原理
--视觉优化原理
-（4）可用性评估的基本原则
-第二章：GUI设计心法--课后习题
-本章概述
--本章概述
-（1）信息结构与交互设计（1-4）
--第一讲
--第二讲
--第三讲
--第四讲
-（2） 界面草图与原型设计
-（3）视觉设计原则
--视觉设计原则
-（4） 文字与阅读
--字体设计
-（5）图标
--图标
-（6） 色彩
--色彩
-（7） 动效
--动效设计概述
--动效小制作1
--动效小制作2
-（8）第三章小结
--第三章小结
-（9）学生个人作品网站主页设计体会
--张铁汉
-第三章：界面设计元素--大作业
-前言
--前言
-（1）什么是网页
--什么是网页
-（2）标签与元素
--标签与元素
-（3）文本格式化、块级元素与行内元素
-（4）如何使用H5进行网页布局
-（5）目录、目录结构及在页面中插入图片
-（6）CSS样式表
--CSS样式表
-（7）CSS盒子模型
--CSS盒子模型
-（8）CSS控制文本
--CSS控制文本
-（9）CSS背景、特效、动画
-（10）初识javascript及jquery
-总结
--总结
-邱艺芸-清华大学艺术博物馆APP设计
--邱艺芸
-潘俊丞-阿甘跑步改版界面设计——“趣跑”
--潘俊丞
-王婧-星巴克改版设计
--王婧
-李向阳-DIY服装app设计
--李向阳
-相宸卓-效率软件改版设计
--相宸卓
-周文欣-“你好，安德烈”app设计
--周文欣
-走近游戏交互设计
--走近游戏交互设计
-《稻之道》(作者：于汉杰)
--稻之道-于汉杰
-《思想咖啡》(作者：艾瑞雯)
--思想咖啡-艾瑞雯
-《稻香村京八件销售网页设计》(作者：王依柳)
