如何通过css样式设置动画，转换，过渡等界面效果

天我们学习的内容有：过渡，动画，转换，伸缩盒子。

可以说今天学习的内容都是重量级的大佬，学好了，使用css3做出酷炫的效果 So Easy！~~

1.过渡

在css3中，有一个属性可以设置过渡效果。

它就是transition，所谓的过渡效果，指的就是以动画的形式慢慢演化样式属性变化的过程。

A.案例：通过transition设置焦点过渡效果

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;margin:200px;background: url(girl.jpg);border-radius:50%;transition:all 1s linear 0.3s;cursor: pointer;}div:hover{box-shadow: 0px 0px 20px blue;}</style></head><body><div></div></body></html>

注意页面中的代码：

第一，我们给div添加了一个hover伪类样式，当我们鼠标悬停在div上方的时候，会给div盒子添加一个蓝色的盒子阴影。

第二，我们给div盒子添加了一个transition样式，设置的值为：all 1s linear 0.3s;

这四个数据分别对应

transition-property(需要过渡的属性)：如果设置为all表示所有样式属性都需要过渡。

transition-duration(过渡的时间):以秒作为单位，设置过渡的时间

transition-timing-function(过渡的方式):常用的有linear(匀速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等

transition-delay(延迟的时间):以秒作为单位进行延迟，延迟之后开始进行过渡效果。

所以，我们通过transition这个复合属性设置的过渡效果为：

all:需要过渡所有的属性

1s:过渡的时间为1秒

linear:匀速过渡

0.3s:在延迟0.3秒之后开始过渡动画。

如果大家理解了上面的描述，那么也就不难理解咱们鼠标放到div上之后，为啥会慢慢出现蓝色的光晕了，就是因为咱们添加了过渡，所以，慢慢的就会给盒子添加阴影效果。

2.动画：

在学习完了过渡之后，发现咱们可以使用transition去以动画的形式展示样式的改变以及变化的过程，这可以帮助我们来实现一些过渡的动画。

但是，有的时候，我们的需求会更加的复杂，要求会更加的多变，那么，transition可能就无法满足我们的需要了，我们需要有更加炫酷，复杂的效果呈现。

那么，动画animation就可以满足我们的需要。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>@keyframes moveAndChange{0%{left:0px;top:0px;}25%{left:200px;top:200px;background:green;border-radius: 0;}50%{left:400px;top:200px;background:blue;border-radius: 50%;}75%{left:400px;top:0px;background:#ccc;border-radius: 0;}100%{left:0px;top:0px;background:red;border-radius: 50%;}}div{margin:200px;width: 200px;height: 200px;position: absolute;background:red;border-radius:50%;animation: moveAndChange 5s linear 0.5s infinite normal;}</style></head><body><div></div></body></html>

代码效果如下：

同样，让我们来关注编写的代码：

1.在样式中，首先我们使用@keyframes 来定义了一个复杂的动画，在css3中，新增了@keyframes可以来帮助我们添加动画。代码如下：

/*动画的名字叫做moveAndChange*/

@keyframes moveAndChange{

/*动画最初的时候，将left设置为0px，top设置为0px*/

0%{

left:0px;

top:0px;

}

/*当动画进行到25%的时候，使用动画将left过渡到200px，top过渡到200px，

背景颜色过渡为绿色，圆角过渡为0(无圆角)*/

25%{

left:200px;

top:200px;

background:green;

border-radius: 0;

}

/*当动画进行到50%的时候，使用动画将left过渡到400px，top过渡到200px，

背景颜色过渡为蓝色，圆角过渡为50%(正圆)*/

50%{

left:400px;

top:200px;

background:blue;

border-radius: 50%;

}

/*当动画进行到75%的时候，使用动画将left过渡到400px，top过渡到0，

背景颜色过渡为灰色，圆角过渡为0(无圆角)*/

75%{

left:400px;

top:0px;

background:#ccc;

border-radius: 0;

}

/*当动画结束的时候，使用动画将left过渡到0x，top过渡到0px，

背景颜色过渡为红色，圆角过渡为50%(正圆)*/

100%{

left:0px;

top:0px;

background:red;

border-radius: 50%;

}

这是一个比较复杂的动画效果，可以发现，它通过百分比的形式将一个完整的动画拆分成了5个部分，每个部分都有不同的样式效果，而当我们采用该动画的元素就会按照设置的顺序和样式效果进行动画的过渡和展示。

2.上面我们只是通过@keyframes创建了一个动画，我们还需要通过特定的语法来使用这个动画。

就是下面这句代码了：

animation: moveAndChange 5s linear 0.5s infinite normal;

它是一个复合属性，设置了6个值，分别对应：

animation-name(设置动画的名称)：用来设置动画的名字，我们这里写的是moveAndChange ，也就是说我们就是要使用我们刚刚创建的动画。

animation-duration(设置整个动画的时间):以秒作为单位，我们这里写的是5s，表示整个动画的时间为5秒

animation-timing-function(设置播放动画的方式)：播放动画的方式，常用的有linear(匀速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等，我们使用的是linear匀速播放动画。

animation-delay(设置动画的延迟):以秒作为单位，我们写的是0.5s，表示延迟0.5秒之后开始播放动画。

animation-iteration-count(设置动画播放的次数):播放动画的次数，我们这里写的是infinite ，表示动画将会被播放无限次，如果写数字，那么就会播放数字对应的次数。

animation-direction(设置是否反向播放动画)：我们写的是normal，表示正常播放动画，如果写的是

alternate则表示要反向播放动画，大家也可以自己试一试这个效果。

最终，我们通过@keyframes创建动画，通过animation设置动画，成功完成了这个复杂的动画效果。

3.转换

在css3中，我们通过transform属性可以设置元素的转换效果，具体的效果如下：

A.平移

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body{background:pink;}div{width: 200px;height: 200px;position: absolute;background: green;left:0px;top:0px;transform: translate(300px,300px);}</style></head><body><div></div></body></html>

代码效果如下：

如上图所示，本来div盒子的位置是left:0,top:0;

但是我们通过transform: translate(300px,300px);将盒子进行了偏移，所以，盒子的位置发生了改变。

B.旋转

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: rotate(45deg);}</style></head><body><div></div></body></html>

代码效果如下：

如上图所示，本来div盒子应该是四四方方的。

但是，经过我们的代码transform: rotate(45deg); //deg为单位，表示度数。

进行了45度的旋转之后，呈现出来的就是一个菱形的盒子了，旋转的正方向为顺时针，负方向为逆时针。

C.缩放

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: scale(0.5,0.25);}</style></head><body><div></div></body></html>

代码效果如下：

如上图所示，本来盒子的宽高为200*200,而我们通过transform: scale(0.5,0.25);进行的缩放

scale的第一个参数为0.5,表示横向缩小为0.5倍

scale的第二个参数为0.25，表示纵向缩小为0.25倍。

scale的参数如果为1，则表示不进行任何缩放，小于1就是做缩小，而大于1表示做放大。

小结：transform转换中其实还包含了skew(倾斜)，matrix(矩阵转换)，相对来说用到的不是特别多，所以在本文中我们便不再做介绍。

4.flex布局

Flex布局，可以简便、完整、响应式地实现各种页面布局。

Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: flex-start}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

代码效果如下：

如图所示，咱们通过display:flex将.parent元素设置为了flex盒子，那么子元素将会按照justify-content设置的方式进行元素的排列，目前看来，和我们没有设置flex盒子的效果是一致的。

接下来我们更改一下，将justify-content设置为flex-end，效果如下图所示：

所以我们就应该发现，flex-start是让所有的子元素从父元素的左侧开始排列

而flex-end是让所有的子元素从元素的右侧开始排列。

我们再来更改一下，将justify-content设置为center，效果如下图所示：

更厉害了，子元素在父盒子的中央位置排列显示了。

然后，我们再将justify-content设置为space-around，效果如下图所示：

它是平均分配的形式为每一个子元素设置了间距，但是看起来有点变扭。

所以我们推荐将justify-content设置为space-between，效果如下图：

我们还可以通过flex-wrap来设置子元素是否换行显示，以及flex-direction设置子元素排列的顺序。

这两个属性可以设置的值如下：

flex-wrap: nowrap;//不换行，会自动收缩

flex-wrap: warp;//换行，会自动收缩

flex-wrap: warp-reverse;//反转，从默认的从上到下排列反转为从下到上。

flex-direction:row; //从左至右一行一行进行子元素的排列

flex-direction:column; //从上到下一列一列进行子元素的排列

flex-direction:row-reverse; //从右至左一行一行进行子元素的排列

flex-direction:column-reverse; //从下到上一列一列进行子元素的排列

案例代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;flex-wrap: nowrap;flex-direction: row-reverse;}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></body></html>

我们设置了flex-wrap: nowrap;（不换行，压缩所有的子元素在一行中显示），以及flex-direction: row-reverse;（反向排列）

代码效果如下：

如果设置为flex-wrap: warp（换行显示无法在一行显示的子元素），则效果如下：

如果将flex-direction: column;,则会纵向排列元素，效果如下图：

除了上面的这些给伸缩盒子父元素设置的样式之外，我们还可以可以伸缩盒子的子元素设置flex属性，用来设置平均分配整个父盒子的空间。

代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div{flex:1;width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

效果如下：

如上图所示，每个盒子平均分配了父盒子的空间，原本宽度为20%，现在被拉伸了。

除此之外，咱们还可以使用flex属性进行进一步的设置，代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div:nth-of-type(1){flex:1;border:1px solid #ccc;background:red;}.parent div:nth-of-type(2){flex:2;border:1px solid #ccc;background:green;}.parent div:nth-of-type(3){flex:2;border:1px solid #ccc;background:blue;}.parent div:nth-of-type(4){flex:1;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

效果如下图：

我们分别给四个子盒子设置了flex:1 , flex:2, flex:2 ,flex:1.

这是什么意思呢？

四个flex加起来一共是6.那么第一个盒子就占据整个父盒子的1/6宽度。

同理，另外三个盒子分别占据2/6,2/6,1/6的宽度，所以就形成了我们现在看到的效果。

原文来源于：黑马程序员社区

学习资源：

想学习css，可以关注：黑马程序员头条号，后台回复：css

周在给学生讲授JavaScript课程中setInterval方法时，想到了我们在网上看到的各类GIF动图比较有意思，就将其引入到教学中，教学内容设计如果通过HTML5与JavaScript实现网页类似GIF效果的动态图。于是在网上搜集了部分gif格式动图，将每一个Gif动图分解为一组jpg格式图片，再采用setInterval与html5 Canvas进行动画的实现。通过学习可以让学生进一步了解canvas动画实现的过程与原理。并将其发布到头条，也希望对有兴趣的初学者了解HTML5 Canvas等有所帮助。图片分组图片素材如下：

素材一

实现动画的素材我们已经给出，主要通过gif动图导出一组图片，下面对html5动画实现过程进行简单说明。

基本思路

实现其动画的基本思路是通过HTML5提供的canvas元素进行图片的绘制与展示，借助setInterval方法实现间隔指定时间调用新的图片实现重新绘图。其中绘图主要使用drawImage方法进行绘图，最终通过图片依次重绘实现动画效果。具体实现过程如下：

HTML5 Canvas设置

在页面body部分添加Canva标签，设置其id属性为canv，宽度为600，高度为400,编写代码描述如下图：

添加画布元素

canvas浏览效果

加载图片资源

使用Canvas借助JavaScript提供的drawImage方法进行绘图，需要提供要绘制的图片资源即绘图的坐标位置。该方法原型如下：

drawImage方法原型

因此我们需要加载图片资源，本例由于需要调用多个img实现定时不同图片的绘制，因此我们可以使用数组存储所加载的图片资源。本例图片数量为14，因此我们数组长度为14。使用素组存储图片实现代码如下：

加载图片资源代码

定义页面加载事件onload

本例设计在页面加载时自动播放动画，因此需要在JavaScript脚本中添加页面onload事件，在事件中编写绘图相关代码，主要代码包括获取画布canva与实例化绘图对象context。部分代码描述如下：

onload事件及绘图初始化

使用setInterval实现动画

使用setInterval方法实现动画主要需要定义回调函数与回调函数触发执行的周期，本例中我们使用匿名函数作为回调函数，触发周期设置为100毫秒。setInterval函数定义如下：

setInterval函数

在定义完函数之后可在其匿名函数函数体部分写入绘图方法dramImage(),实现周期调用不同图片资源进行绘图，最终展示出动画效果。为了保证循环调用14张图片，我们需要设置一计数全局变量i，由于我们图片采用数组存储，下标为数组，且从0-13进行编号，因此当计数值小于13时自动+1，指向下一数组下标，当为13时，设置计数值为0，回到数组第一元素，最终实现数组访问下标的循环。setInterval实现完整代码如下：

setInterval完整代码

实现效果展示

HTML动画效果展示

本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可以联系作者，共同探讨。期待大家关注！如需案例完整代码请关注并私信，往期前端设计文章链接如下：

前端设计-JavaScript中的值、引用传递与垃圾回收
前端设计-JavaScript美女拼图游戏开发实例
前端设计- JavaScript验证码制作及实例分析
前端设计-Ajax技术及实例展示
前端设计-响应式页面开发基础
Web开发前端、后端与全栈的区别是什么？

页动画图像、Flash 动画和 JavaScript 实现的效果图片，我们用最基础的CSS也能实现。制作一个简单的gif动画图，上图就是效果图。

用CSS3制作动画图，你需要了解两个css属性。

其一是 @keyframes

因为它限定了CSS 样式和动画逐步从目前的样式更改为新的样式的变化过程。浏览器兼容的时候需要在keyframes上加前缀，-webkit-, -ms- 或 -moz- 。

keyframes中有两个属性，from和to，from里面的内容定义动画开始的状态，to记录动画结束的状态。@keyframes后面紧跟的是动画的名字，这个可以自定义取名字，比如我取 gifname，页面某个标签元素使用这个动画时候，就需要用到这个名字。

@keyframes gifname
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes gifname /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

from和to也可以用百分比来表示动画的过程，可以用百分比的话，就可以把动画的内容定义得更加丰富了。

@keyframes gifname
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes gifname /* Safari 与 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

比如我在一个div元素上用到这个动画

div
{
    animation: gifname 5s;
    -webkit-animation: gifname 5s; /* Safari 与 Chrome */
}

其二是 animation

刚刚我们在div元素中看到的animation就是我们要认识的第二个属性。animation其实是一堆属性的简写。比如看下面一句代码：

 animation:gifname 2s step-start 1s infinite alternate;

这一句其实可以写成

    animation-name: gifname;
    animation-duration: 2s;
    animation-timing-function: step-start;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;

animation-name：动画名称

这里是引入 @keyframes 动画的名称。

animation-duration：动画的持续时间

单位可以是秒(s)，也可以是毫秒(ms)

animation-timing-function：动画的过度类型

属性值 :默认是 "ease"

linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

cubic-bezier(n,n,n,n):在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

step-start:马上跳到动画每一结束帧的状态

animation-delay：动画延迟时间

默认是 0。

animation-iteration-count：动画循环次数

默认是 1。属性值infinite 代表无数次。

animation-direction：动画是否在下一周期逆向地播放

属性值

normal：正常方向

reverse：反方向运行

alternate：动画先正常运行再反方向运行，并持续交替运行

alternate-reverse：动画先反运行再正方向运行，并持续交替运行

另外还有两项属性：

animation-fill-mode:设置动画播放后的效果

取值:

none:初始样式,不改变默认行为.(默认行为)

forwards:动画播放结束后保持最后一个状态;

backwards:结束后保持第一个状态;

animation-play-state :检索或设置对象动画的状态

属性值

animation-play-state:running | paused;

running:运动

paused: 暂停

animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行

到此为止，属性我们都学习完了，开始实践部分：

首先准备好我们需要的图片，这里我使用了九张图片。

我把九张图片放在九个<li></li>标签里。所有li标签用ul标签包含起来。然后把ul放在一个div标签里，div设置成一张图片的大小，然后通过逐帧移动ul元素实现动画。

最后的处理，把超出div元素的部分隐藏即可。然后就得到了文章开始时候的图片了。

最关键的，上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css动画</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
        margin-right: 0;
    }
#div{
    width:100px;
	height:100px;
    border: 1px solid #fff;
    overflow: hidden;
	margin: 100px 0 0 100px;
    }
    #box{
     width:900px;
     height:100px;   
    border: 1px solid #fff;
    overflow:visible;
    position:relative;
    animation:myfirst 2s step-start 1s infinite ;
    /* Firefox: */
	-moz-animation:myfirst 2s step-start 1s infinite ;
	/* Safari and Chrome: */
	-webkit-animation:myfirst 2s step-start 1s infinite ;
	/* Opera: */
	-o-animation:myfirst 2s step-start 1s infinite ;
    }
    #box li{
        float: left;
        width:98px;
        height:100px; 
        border:1px solid #fff;
    }
    li img{
        width:100%;
        height:100%;
    }
    @keyframes myfirst
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
    55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}
@-moz-keyframes myfirst /* Firefox */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
   100% {left:0px; top:0;}
}

    </style>
</head>
<body>
    <div id="div">
        <ul id="box">
            <li><img src="./img/o1.jpg"/></li>
            <li><img src="./img/o2.jpg"/></li>
            <li><img src="./img/o3.jpg"/></li>
            <li><img src="./img/o4.jpg"/></li>
            <li><img src="./img/o5.jpg"/></li>
            <li><img src="./img/o6.jpg"/></li>
            <li><img src="./img/o7.jpg"/></li>
            <li><img src="./img/o8.jpg"/></li>
            <li><img src="./img/o9.jpg"/></li>
        </ul>
    </div>
</body>
</html>

最后唠叨一句，该动画不支持IE9及更早版本的IE浏览器。

喜欢的话，就点赞支持一下吧！

在线咨询

上一篇：数据可视化-使用Python进行图表叠加
下一篇：HTML 表格

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

如何通过css样式设置动画，转换，过渡等界面效果

基本思路

HTML5 Canvas设置

加载图片资源

定义页面加载事件onload

使用setInterval实现动画

实现效果展示

其一是 @keyframes

其二是 animation

您的项目需求