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这些

都需要加这些前缀