CSS3 动画库-animation

画库-animation.css

简介

animate.css 是一个来自国外的 CSS3 动画库, 它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、

淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果, 几乎包含了所有常见的动画效果。

虽然借助 animate.css 能够很方便、快速的制作 CSS3 动画效果, 但还是建议看看 animate.css 的代码, 也许你能从中学到一些东西。

浏览器兼容：当然是只兼容支持 CSS3 animate 属性的浏览器, 他们分别是：IE10+、Firefox、Chrome、Opera、Safari。

使用

1github官网地址：https://daneden.github.io/animate.css/

中文API地址：http://www.dowebok.com/98.html

使用方法：

一、项目背景】

生活中经常会见到很多gif图，那么gif图到底是什么？GIF是一种位图。简单来说就是通过每一张张静图，通过控制它的关键帧，从而达到静态图动起来的效果。

这种GIF图的效果，也可以用html+CSS3结合来做。

【二、项目目标】

完成GIF图的制作。

【三、项目分析】

1、分析图片。打开其中一张图。

2、可以看到这张图有45张不一样动作的静态图合成。有点击属性。如图所示：

看到这张照片是7020*156，一共有45帧。高度不变，宽度7020/45帧，就可以把每一帧的内容显示出来。

【四、项目准备】

1、图片：准备自己的喜欢的GIF静态长图，保存在文件夹。

2、软件：Dreamweaver。

【五、项目实现】

1、创建div 存放图片和文件，添加class属性。

<body>
  <div class="box">
  <div class="box2">
  </div>  
  </div>
</body>

2、添加CSS样式

1）设置box的宽、高、位置、背景颜色。

.box{
      width: 300px;
      height: 300px;
      background: #ccc;
      position: absolute;
      left: 0px;
      top: 0;
    }

2）加载图片，设置宽、高，-webkit-animation动画效果。

.box2{
        width: 156px;
        height: 156px;
        background: url("fox45.png");
         -webkit-animation:aa 3s steps(45) infinite ;
      }
   @-webkit-keyframes aa{
  
  
      100%{
     background-position: -7020px 0;
      }
     }

CSS3 animation属性中的steps实现GIF动图(逐帧动画)

steps(45)表示让整个动画在45个关键帧之间切换。这个松鼠的图片中

包含了45帧，所以这里设置了45。而且我们的动画时长是3s，也就是说每一帧

停留1s，这就和普通的GIF动图达到了一样的效果。

【六、效果展示】

1、点击F12运行到浏览器。

2、点击图片，效果如下。

【七、总结】

1、本项目，就gif图遇到的一些难点进行了分析及提供解决方案。

2、html+css也可以做出网站页面的效果，在上面显示图片标题的地方不能用绝对定位，于是用的relative定位，这个地方是布局的核心部分。

3、按照操作步骤，自己尝试去做。自己实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。

4、需要本文源码的小伙伴，后台回复“GIF图”四个字，即可获取。

****看完本文有收获？请转发分享给更多的人****

IT共享之家

入群请在微信后台回复【入群】

想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/

、变形

CSS3变形是一些效果的集合

如平移、旋转、缩放、倾斜效果

每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化

语法：transform:[transform-function] *;

变形函数

translate()：平移函数，基于X、Y坐标重新定位元素的位置

transform:translate(100px,0) x轴移动

transform:translate(0,100px) y轴移动

scale()：缩放函数，可以使任意元素对象尺寸发生变化

transform:scale(2,0) 设置X轴的缩放

transform:scale(0,2) 设置Y轴的缩放

rotate()：旋转函数，取值是一个度数值

transform:rotate(30deg);

skew()：倾斜函数，取值是一个度数值

transform:skewX（ax）：表示只设置X轴的倾斜

transform:skewY（ay）：表示只设置Y轴的倾斜

注：rotate( )函数只是旋转，而不会改变元素的形状

skew( )函数是倾斜，元素不会旋转，会改变元素的形状

二、过度

transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等

CSS3 transition的过渡功能更像是一种“黄油”，通过一些CSS的简单动作触发样式平滑过渡

语法：transition:[transition-property transition-duration transition-timing-function transition-delay ]

过渡属性（ transition-property ）

定义转换动画的CSS属性名称

IDENT：指定的CSS属性（width、height、background-color属性等）

all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all

过渡所需的时间（ transition-duration ）

定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）

过渡动画函数（ transition-timing-function ）

指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式

ease：速度由快到慢（默认值）

linear：速度恒速（匀速运动）

ease-in：速度越来越快（渐显效果）

ease-out：速度越来越慢（渐隐效果）

ease-in-out：速度先加速再减速（渐显渐隐效果）

过渡延迟时间（ transition-delay ）

指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果

正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发

负值：元素过渡效果会从该时间点开始显示，之前的动作被截断

0：默认值，元素过渡效果立即执行

三、animation动画简介

animation实现动画主要由两个部分组成

通过类似Flash动画的关键帧来声明一个动画

在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果

设置关键贞：

@keyframes spread {

0% {width:0;}

33% {width:23px;}

66% {width:46px;}

100% {width:69px;}

}

调用关键贞：

animation:animation-name animation–duration animation-timing-function

animation-delay animation-iteration-count animation-direction

animation-play-state animation-fill-mode;

动画的使用过程：

动画的播放次数（animation-iteration-count）

值通常为整数，默认值为1

特殊值infinite，表示动画无限次播放

动画的播放方向（animation-direction）

normal，动画每次都是循环向前播放

alternate，动画播放为偶数次则向前播放

动画的播放状态（animation-play-state）

running将暂停的动画重新播放

paused将正在播放的元素动画停下来

代码展示：

<html>

<head>

</head>

<body>

</div>

</body>

</html>

margin: 0;

padding: 0;

}

/* 父div设置宽高 */

.box{

width: 80%;

height: 600px;

margin: 0px auto;

margin-top: 10px;

position: relative;

}

/* 所有的图片设置 */

.box>img{

width: 300px;

height: 250px;

position: absolute;

border: 1px solid white;

box-shadow:5px 5px 5px rgba(0,0,0,.6);

border-radius: 20px;

}

/* 第一张图片设置 */

.box>img:nth-of-type(1) {

right: 2;

top: 0px;

transform: rotate(48deg);

}

.box>img:nth-of-type(2){

left: 2px;

top: 10px;

transform: rotate(319deg);

}

.box>img:nth-of-type(3){

left: 500px;

top: 40px;

transform: rotate(278deg);

}

.box>img:nth-of-type(4){

left:250px;

top:40px;

transform: rotate(-50deg);

}

.box>img:nth-of-type(5){

top:300px;

transform: rotate(-80deg);

}

.box>img:nth-of-type(6){

left:700px;

top:300px;

transform: rotate(-260deg);

}

.box>img:nth-of-type(7){

left: 310px;

top: 300px;

transform: rotate(94deg);

}

.box>img:nth-of-type(8){

left: 460px;

top: 300px;

transform: rotate(205deg);

}

.box>img:nth-of-type(9){

left: 100px;

top: 210px;

transform: rotate(38deg);

}

.box>img:nth-of-type(10){

right:100px;

top:300px;

transform: rotate(-210deg);

}

.box>img:hover{

/* 图片前置 */

z-index: 1;

/* 还原放大1.5倍 */

transform: rotate(360deg) scale(2);

transition:all 1s ease-in-out;

}

<!DOCTYPE html>

<head>

<title>QQ彩贝导航条</title>

</head>

<body>

<nav>

<h1>

</a>

</h1>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</section>

</nav>

</div>

</body>

</html>

margin: 0;

padding:0;

}

li{

list-style: none;

}

text-decoration: none;

color: #787690;

}

/* 整个导航 */

nav{

height: 100px;

width: 100%;

margin: 0 auto;

position: relative;

background: linear-gradient(to bottom, #FFFFFF, rgba(204, 204, 204, 0.4));

}

/* 导航Logo部分 */

.topleft{

padding-top: 30px;

padding-left: 110px;

}

/* 中间整体部分 */

.topMiddle{

position: absolute;

left: 400px;

bottom: 20px;

height: 50px;

}

/* 导航中间文字 */

.topMiddle>ul>li{

float: left;

margin-right: 20px;

padding-top: 20px;

}

.topMiddle>ul>li>a:hover{

color:yellow;

}

/* 导航中间文字部分第一个li */

.iconOne{

display: inline-block;

position: absolute;

width: 46px;

height: 100px;

left: 0;

top:0;

background: url('../htmlNine/img/header_03.png') 2px 1px no-repeat;

}/* 导航中间文字部分第三个li */

.iconTwo{

display: inline-block;

position: absolute;

width: 46px;

height: 100px;

top:0;

background: url('../htmlNine/img/header_07.png') 2px 1px no-repeat;

}

/* 调用关键贞 */

.topMiddle>ul>li:nth-child(1)>a:hover .iconOne{

background: url('../htmlNine/img/header_05.png') 2px 1px no-repeat;

animation: identifier 1s ease-out both;

}

/* 调用关键贞 */

.topMiddle>ul>li:nth-child(3)>a:hover .iconTwo{

background: url('../htmlNine/img/header_09.png') 2px 1px no-repeat;

animation: identifier 1s ease-out both;

}

/* topRight */

/* 登录部分所有li */

.topRight{

position: absolute;

left: 1380px;

bottom: 55px;

height: 40px;

}

.topRight>ul>li{

height: 25px;

width: 30px;

}

/* 登录部分三个图标 */

.topRight>ul>li:nth-child(1){

position: absolute;

right: 100px;

top:45px;

background: url('../htmlNine/img/iconsB_13.png') 2px 1px no-repeat;

}

.topRight>ul>li:nth-child(2){

position: absolute;

right: 150px;

top:45px;

background: url('../htmlNine/img/iconsB_12.gif') 2px 1px no-repeat;

}

.topRight>ul>li:nth-child(3){

position: absolute;

right:200px;

top:45px;

background: url('../htmlNine/img/iconsB_11.gif') 2px 1px no-repeat;

}

.topRight>ul>li:hover{

/* 变形 */

transform: rotate(720deg) scale(2);

/* 过度 */

transition:all 0.6s ease-in-out ;

}

/* 动画设置关键帧名称identifier */

@keyframes identifier {

0%{width: 0;}

33%{width:23px;}

66%{width: 46px;}

100%{width: 69px;}

}

效果链接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlNine/duocaiqiang.html

file:///D:/ruanjian/VS/wenjianxiangmu/htmlNine/QQcaibeidaohang.html

在线咨询

上一篇：Java实例：Vue前端与Java后端实现大文件异步
下一篇：9999元玩转4K 明基超高清家用投影评测

您的项目需求

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

整合营销服务商

CSS3 动画库-animation

您的项目需求