css3的动画特效--元素旋转（transition，animation）

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

思路：首先动画动效肯定离不开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

posted @ 2017-12-20 08:52  saucxs  阅读(79031)  评论(0)  编辑  收藏  举报