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

思路:首先动画动效肯定离不开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. IE外挂

    //引用 Windows/system32/Shell32.dll //引用COM组件 shdocvw.dll (Microsoft Internet Controls) //引用COM组件 msht ...

  2. arcgis js 鼠标点和绘制的点位有偏移

    问题描述:鼠标点和绘制的点位有偏移 问题原因:地图DIV中包含了一个面板DIV,停靠在了地图页面的左边,隐藏掉就是正确了 解决方法:重写DIV样式,让左边DIV与地图DIV平级排列.

  3. Android进阶:五、RxJava2源码解析 2

    上一篇文章Android进阶:四.RxJava2 源码解析 1里我们讲到Rxjava2 从创建一个事件到事件被观察的过程原理,这篇文章我们讲Rxjava2中链式调用的原理.本文不讲用法,仍然需要读者熟 ...

  4. 2018-2019-2 网络对抗技术 20165220 Exp2 后门原理与实践

    实验内容 1.使用netcat获取主机操作Shell,cron启动2.使用socat获取主机操作Shell, 任务计划启动3.使用MSF meterpreter(或其他软件)生成可执行文件,利用nca ...

  5. Python之tkinter:调用python库的tkinter带你进入GUI世界(二)——Jason niu

    #tkinter:tkinter应用案例之便签框架LabelFrame的应用将组件(多选按钮)放到一个框架里 from tkinter import * root=Tk() root.title(&q ...

  6. 关于使用spring版本4.1.6注解@Import报错

    记录一下遇到的错误 org.springframework.beans.factory.parsing.BeanDefinitionParsingException: 使用环境:spring 4.1. ...

  7. 1. Linux系统介绍

    1. 什么是操作系统? 定义:操作系统是计算机系统中必不可少的基础系统软件,它的作用是负责管理和控制计算机系统中的硬件和软件资源,合理地组织计算机系统的工作流程,以便有效地利用资源为使用者提供一个功能 ...

  8. ubuntu的安装及ubuntu中安装mysql和tomcat

    一.安装ubuntu 1.创建虚拟机 2.向导选择自定义 3.然后下一步再下一步,直到这里,稍后再安装系统 4.然后选择linux,注意这里下面的下拉选择Ubuntu64,因为我们下载的是64位的,如 ...

  9. ABAQUS/CAE——Context

    Part(部分) 用户在Part单元内生成单个部件,可以直接在ABAQUS/CAE环境下用图形工具生成部件的几何形状,也可以从其他的图形软件输入部件.详细可参考ABAQUS/CAE用户手册第15章. ...

  10. RTN 实操

    创建房间 test-rtn 10001 e2uii6r7r 8LfwOcreM76OiV1V1y8jXrMG_BNa-cmktpWUznRa:kdYdsEpcYLc5ceWEHPaK0ZDI7Qc=: ...