css3 扇形动画

css3 扇形动画

扇形动画，因为我工作中遇到了只执行一次就ok，所以没细研究，该css暂时只能执行1次扇形动画，无限循环会有问题。

css:

@keyframes rotateAn{
    0%{transform: rotate(0deg); }
    99%{ transform: rotate(180deg); opacity: 0.8; }
    100%{ transform: rotate(180deg); opacity: 0; }
}
*{margin: 0; padding: 0;}
.circle-dev{ width: 200px; height: 200px; border-radius: 100px; overflow: hidden; position: relative; }
.circle-bg, .circle-alt{ width: 100%; height: 100%; border-radius: 50%; background: #ccc; position: absolute; top: 0; left: 0; }
.circle-alt{ opacity: 0.4; }
.circle-alt-lft, .circle-alt-rht{ position: absolute; width: 50%; height: 100%; top:0; }
.circle-alt-lft{left: 0; overflow: hidden; border-radius: 50% 0 0 50%; }
.circle-alt-lft:after{ background: #fff; opacity: 0.8; display: block; content: ""; width: 100%; height: 100%; transform-origin: right center; animation: rotateAn 1s 1s linear forwards;}
.circle-alt-rht{ right: 0; overflow: hidden; border-radius: 0 50% 50% 0; }
.circle-alt-rht:after{ background: #fff; opacity: 0.8; display: block; content: ""; width: 100%; height: 100%; transform-origin: left center; animation: rotateAn 1s linear forwards;}

html:

<div class="circle-dev">
    <div class="circle-bg"></div>
    <div class="circle-alt">
        <div class="circle-alt-lft"></div>
        <div class="circle-alt-rht"></div>
    </div>
</div>

 ps：我这里为了省事简化了，css3上少了webkit前缀，在移动端上使用时，一定要在css3的上面加上-webkit-。这里需要加上-webkit-的是：

transform-origin、

animation、

keyframes、

transform

重要的事情说三遍：

加上-webkit-！加上-webkit-！加上-webkit-！否则移动端上将会出错。

 

posted on 2016-05-11 22:38  安蝶 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/cyj7/p/5483882.html