CSS3动画-扇形展开-（内有js代码）

       本文记录的是使用css新属性制作的扇形展开效果。其功能有：1.当页面加载完成之后，所有的卡片会像扇子一样展开；2.当点击封面，也就是最右边的卡片时，扇子会收起来；3.除封面外的任意一张卡片，该卡片会旋转到中间（整个扇子都旋转），并且卡片上的文字会展示出来。
       最终实现效果如下所示：

       html结构如下图：

<ul class="container">
            <li>
                <h4>云服务</h4>
            </li>

            .....//多个li
            <li>
                <h4>点击展开/折叠</h4>
            </li>
        </ul>

       在CSS部分，主要使用了雪碧图，动画，阴影，背景渐变等CSS属性，运行代码需要标准化浏览器的支持。
       对整体的css设置如下：

.container {
    position: relative;
    margin: 30px auto;
    width: 130px;
    text-align: center;
    height: 500px;
}

       设置整体为相对定位，作为每张卡片定位的父级。每张卡片的通用设置为：

    position: absolute;
    left: 0;
    top: 0;
    width: 130px;
    height: 500px;
    -webkit-transform-origin: 25% 90%;//旋转基点设置
    -moz-transform-origin: 25% 90%;
    -ms-transform-origin: 25% 90%;
    transform-origin: 25% 90%;
    -webkit-transition: -webkit-transform .5s ease;
    -moz-transition: -moz-transform .5s ease;
    transition: transform .5s ease;
}

给每个卡片增加不同的颜色和阴影，如下：

.container li:nth-of-type(1) {
    background-color: #9b5512;
    box-shadow: -1px -1px 3px rgba(0, 0, 0, .5), 1px 1px 1px rgba(0, 0, 0, .5), inset 0 3px 0 rgba(255, 255, 255, .5);
}

.container li:nth-of-type(2) {
    background-color: #ff4001;
    box-shadow: -1px -1px 3px rgba(0, 0, 0, .5), 2px 2px 1px rgba(0, 0, 0, .5), inset 0 3px 0 rgba(255, 255, 255, .5);
}
.....
.container li:nth-of-type(9) {
    background-color: #7f00ff;
    box-shadow: -1px -1px 3px rgba(0, 0, 0, .5), 8px 8px 1px rgba(0, 0, 0, .5), inset 0 3px 0 rgba(255, 255, 255, .5);
}
//封面单独设置背景渐变
.container li:nth-of-type(10) {
    background: -webkit-linear-gradient(-45deg, #dddddd 0%, #58535e 48%, #889396 100%);
    background: -moz-linear-gradient(-45deg, #dddddd 0%, #58535e 48%, #889396 100%);
    background: -ms-linear-gradient(-45deg, #dddddd 0%, #58535e 48%, #889396 100%);
    background: linear-gradient(-45deg, #dddddd 0%, #58535e 48%, #889396 100%);
}

       给每张卡片增加before伪类，用来添加雪碧图标，先是通用设置：

.container li:before {
    background: url(img/sprite.png) no-repeat;
    position: absolute;
    content: "";
    top: 50px;
}

       分开设置：

.container li:nth-of-type(1):before {
    left: 42px;
    background-position: -48px -81px;
    width: 46px;
    height: 37px;
}

.container li:nth-of-type(2):before {
    left: 50px;
    background-position: -248px -132px;
    width: 31px;
    height: 40px;
    }
    .....
    .container li:nth-of-type(9):before {
    left: 42px;
    background-position: -50px -127px;
    width: 46px;
    height: 34px;
}

       给封面增加after伪类，使用border-radius画出装订按钮。代码如下：

.container li:last-of-type:after {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    left: 15px;
    bottom: 50px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .8), inset 0 0 3px rgba(0, 0, 0, .3);
}

       由于动画由CSS3的transform属性来完成，所以js只需要负责改变旋转角度即可。js代码如下所示：

(function() {
    var container = document.querySelector(".container");
    var card = document.querySelectorAll("li");
    var n = card.length;
    var perDeg = 180 / n;
    var isOpen = true;//记录扇形是否展开
    for(var i = 0; i < n; i++) {
        tdeg = i <= n / 2 ? -(n / 2 - i) * perDeg : (i - n / 2) * perDeg;
        card[i].style.webkitTransform = "rotate(" + tdeg + "deg)";
        card[i].style.msTransform = "rotate(" + tdeg + "deg)";
        card[i].style.MozTransform = "rotate(" + tdeg + "deg)";
        card[i].style.transform = "rotate(" + tdeg + "deg)";

    }
    //点击封面来控制扇形的展开与折叠
    card[n - 1].onclick = function() {
        for(var i = 0; i < n; i++) { var tdeg = isOpen ? 0 : i <= n / 2 ? -(n / 2 - i) * perDeg : (i - n / 2) * perDeg; card[i].style.webkitTransform = "rotate(" + tdeg + "deg)"; card[i].style.msTransform = "rotate(" + tdeg + "deg)"; card[i].style.MozTransform = "rotate(" + tdeg + "deg)"; card[i].style.transform = "rotate(" + tdeg + "deg)"; } isOpen = !isOpen; } //点击除封面外的卡片，卡片会显示在中间 for(var i = 0; i < n - 1; i++) { card[i].index = i; card[i].onclick = function() { var tdeg; for(var i = 0; i <= this.index; i++) { tdeg = (i-this.index) * perDeg; card[i].style.webkitTransform = "rotate(" + tdeg + "deg)"; card[i].style.msTransform = "rotate(" + tdeg + "deg)"; card[i].style.MozTransform = "rotate(" + tdeg + "deg)"; card[i].style.transform = "rotate(" + tdeg + "deg)"; } for(var i = this.index + 1; i < n; i++) { tdeg = (i - this.index) * perDeg + 5;//展示图片右侧多加度数，以便更好展示卡片文字 card[i].style.webkitTransform = "rotate(" + tdeg + "deg)"; card[i].style.msTransform = "rotate(" + tdeg + "deg)"; card[i].style.MozTransform = "rotate(" + tdeg + "deg)"; card[i].style.transform = "rotate(" + tdeg + "deg)"; } } } })();