开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示:

思路:首先动画动效肯定离不开anmimation动画。

和transition动画一样,animation动画也是CSS3动画的一种,这类动画可以理解为是一种关键帧动画,它可以预先为动画设置多个节点,在每个节点中含有不同的状态属性,通过使用animation动画我们可以得到更为复杂的动画效果。

注意:transition是为页面元素设置某个需要产生动画效果的属性,如宽度(width)、高度(height)、透明度(opacity),甚至3D旋转等,并使得这些属性的值在发生变化时产生相应的过渡效果。我们常常在制作类似按钮鼠标经过和移出效果时使用transition。通俗地说,transition是简化版的CSS3动画,而animation则是强化版的CSS3动画。在日常开发中transition的使用频率更高一些,我们往往只有在遇到transition无法解决的问题时,才会转而使用animation。

1、dom元素准备

准备一个span元素作为图标的载体(也可以使用其他元素,如div、a、button等)

<span class="close">Close</span>

使用设置了icon字体的伪元素来生成图标图案,首先引入这个font-family

@font-face {
font-family: 'icon-font';
src: url('font/flat-ui-icons-regular.ttf'), url('font/flat-ui-icons-regular.eot'), url('font/flat-ui-icons-regular.woff'), url('font/flat-ui-icons-regular.svg');
} .close {
font-size: 0px;
/*使span中的文字不显示*/
cursor: pointer;
/*使鼠标指针显示为手型*/
display: block;
width: 20px;
height: 30px;
line-height: 42px;
border-radius: 50%;
/*使背景形状显示为圆形*/
background: #FFF;
color: #8b8ab3;
text-align: center;
} .close::before {
content: "\e609";
font-family: 'icon-font';
speak: none;
font-size: 20px;
display: block;
}

添加了speak:none属性来为该元素增强可访问性,使得有阅读障碍的浏览者不会被插入的伪元素中的无意义字符所困扰。

2、transition使用

为鼠标指针的滑过状态设置一些动画效果。在此,我们希望当鼠标指针滑过时,图标在1秒内匀速旋转360度。我们在此先复习一下transition动画的用法。

.close:hover::before{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transition:-webkit-transform 1s linear;
transition:transform 1s linear;
}

代码中,我们使用了transform属性来实现图标的旋转,并且设置了transition动画,将变化的属性名称设置为transform。测试页面,现在我们将看到图标的旋转效果。

PS:在设置旋转属性时,需要加上deg作为度数单位,即使是旋转0度也需要同样添加这一单位。此外,transform只是一种变换属性,其本身不能生成动画效果,它只能通过与transition或animation属性的配合才能产生动画效果。

发现问题:当前的图标只会旋转一次,然后将停止下来。

3、animation属性

而如果我们希望图标能够一直不停旋转,则需要请出animation动画。使用animation动画的前提是先制作动画的各个关键帧。

@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
} @keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

我们使用了keyframes关键字来定义了一个名为spin的关键帧动画,在该动画中使用了from关键字来指定动画的起始状态,to关键字来指定动画的结束状态。在起始状态中设置transform属性的旋转度为0度,在结束状态中设置该旋转度为360度。此外,我们还添加了-webkit-前缀以确保动画在webkit浏览器中的兼容性。

指定了spin关键帧动画后,我们就可以在图标中运用这一动画,代码如下:

.close:hover::before {
/*-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: -webkit-transform 1s linear;
transition: transform 1s linear;*/
-webkit-animation: spin 1s linear 1s 5 alternate;
animation: spin 1s linear infinite;
}

在以上代码中,我们设置了鼠标滑过状态下伪元素的animation属性,该属性的第一个参数是动画名称,即spin,第2个参数是动画时长,在此设置为1秒,第3个属性为速度曲线,在此设置为匀速运动,第4个属性infinite参数表示动画将无限循环,如果我们只希望动画循环一定次数,则可以将其修改为相应的数字,一次可以不用设置。

animation动画添加各种参数

(1)infinite参数,表示动画将无限循环。在速度曲线和播放次数之间还可以插入一个时间参数,用以设置动画延迟的时间。如希望使图标在1秒钟后再开始旋转,并旋转两次,代码如下

.close:hover::before{
-webkit-animation: spin 1s linear 1s 2;
animation: spin 1s linear 1s 2;
}

(2)alternate参数。animation动画中加入反向播放参数alternate。在加入该参数后,动画将在偶数次数时反向播放动画。

.close:hover::before{
-webkit-animation: spin 1s linear 1s 2 alternate;
animation: spin 1s linear 1s 2 alternate;
}

欢迎访问:

1、云商城isv系统http://isv.suningcloud.com/mpisv-web/index

2、云商城消费者门户http://www.suningcloud.com/promotion/index/experience_center.html

css3的动画特效--元素旋转(transition,animation)的更多相关文章

  1. css3的动画特效--元素旋转

    开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和transition动画一样,animation动画也是CSS3动画的一种,这类动 ...

  2. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  3. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  4. CSS3与动画有关的属性transition、animation、transform对比

    最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了. 索性在这里进行一个简单的对比,加深自己的记忆. 浏览器兼容性 CSS3 transform 属性 Internet ...

  5. 9种jQuery和css3图片动画特效代码演示

    1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...

  6. css3的动画特效--动画序列(animation)

    首先复习一下animation动画添加各种参数 (1)infinite参数,表示动画将无限循环.在速度曲线和播放次数之间还可以插入一个时间参数,用以设置动画延迟的时间.如希望使图标在1秒钟后再开始旋转 ...

  7. css3之动画属性transform、transition、animation

    工作当中,会遇到很多有趣的小动画,使用css3代替js会节省工作量,css3一些属性浏览器会出现不兼容,加浏览器的内核前缀 -moz-. -webkit-. -o- 1.transform rotat ...

  8. CSS3点赞动画特效源码下载

    体验效果:http://hovertree.com/texiao/jquery/62/ 效果图: 下载:http://hovertree.com/h/bjaf/1dvh9ym6.htm 特效库:htt ...

  9. CSS3 Hover 动画特效

    根据 奇舞团:http://www.75team.com/archives/807 做的demo 根据视频中跟着做的 demo1: <!DOCTYPE html> <html lan ...

随机推荐

  1. Spring中@Autowired和@Resource两种自动装配的方法

    @Autowired 默认按bean类型查找并注入,若此时有多个相同类型的bean时,按bean name查找则为:@Autowired @Qulifer(value=”bean名称”). @Reso ...

  2. [Union]C++中Union学习笔记

    C++ union结构式一种特殊的类.它能够包含访问权限.成员变量.成员函数(可以包含构造函数和析构函数).它不能包含虚函数和静态数据变量.它也不能被用作其他类的基类,它本身也不能有从某个基类派生而来 ...

  3. hashMap 方法详解

    http://www.iteye.com/topic/754887 /** * 扩展散列表的容量 * @param newCapacity */ void resize(int newCapacity ...

  4. JAVA递归生成树形菜单

    递归生成一个如图的菜单,编写两个类数据模型Menu.和创建树形的MenuTree.通过以下过程实现: 1.首先从菜单数据中获取所有根节点. 2.为根节点建立次级子树并拼接上. 3.递归为子节点建立次级 ...

  5. 输出九九乘法表(Python、Java、C、C++、JavaScript)

    最近在学python的过程中,接触到了循环的知识,以及这个案例,于是写了下!感觉还不错,然后就用其它几种语言也试了下!! 接下来,就跟大家分享下实现方法!! 实现输出九九乘法表,主要用到的是循环的知识 ...

  6. JavaOOP笔记

    http://note.youdao.com/noteshare?id=bbdc0b970721e40d327db983a2f96371

  7. 虚拟环境更新HA

    停止HA服务 sudo systemctl stop homeassistant@homeassistant 开始更新HA sudo -u homeassistant -H -s cd /srv/ho ...

  8. centOS7.3新安装后,设置IP,以及Putty远程和Xshell远程 (学习是个持续的过程,也许中途放松过,但是仍然能重新捡起来,并学以致用,方为真勇士)

    有一段时间没有写学习心得了:现在开始加油,再接再励. 从最基础的开始 1.安装centOS7.3之后设置IP地址.一般linux的系统都是作为服务器的系统来使用,服务器的属性注定了他的IP不能随意的更 ...

  9. JS 存储

    1. 描述cookie ,sessionStorage 和 localStorage 的区别? cookie : 本身用于客户端和服务器端通信, 但是有本身存储的功能,就被‘借用’ 使用documen ...

  10. 学习之路-->大小文件读取并分页展示

    1.读取小文件,并进行分页 商品|价格 飞机|1000 大炮|2000 迫击炮|1000 手枪|123 ..... lis = [] n = 10 #每页显示10条信息 with open('小文件' ...