您的位置：首页 > Web前端 > CSS

CSS3 动画配合clip属性创建圆形进度条动画

2015-07-16 14:32 711 查看

这里先讲下clip这个css中很少用到的样式，在w3chool是这样描述的

clip 属性剪裁绝对定位元素。

当一幅图像的尺寸大于包含它的元素时会发生什么呢？”clip” 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。

第一句话就很明确的表达了，裁剪元素必须带position:absolute;属性，然后才能使用clip去对图像进行裁剪。语法为

img

{

position:absolute;

clip:rect(0px,60px,200px,0px);//0 60 200 0分别对应上，右，下，左四个方位

}

有关clip的详细说明可以参考：http://www.w3cplus.com/css3/clip.html

下面开始主题。

大概思路如下：

1.先画一个正方形边框，通过border-radius属性使他变成一个圆

2.设置动画效果，通过改变clip的裁剪方式使这个圆慢慢显现。

@-webkit-keyframes craw {
0% {
clip:rect(0em,1em,0em,0.5em);/*因为bottom属性为0，也就是一开始是不让他显示，right为1,left为0，显示的是右边那半圆*/
}
50%{clip:rect(0em,1em,1em,0.5em);/*改变bottom的值使他从上往下慢慢显示到50%的时候停下刚好形成一个半圆*/
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
clip:rect(0em,1em,1em,0em);/*半圆之后开始改变left的值，但是会发现结果是从两段开始像中间合并，这并不是想要的结果，因此加了个旋转动画，虽然结果是有点差距，但是还算成功*/
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
}

下面贴上源码：

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>CSS3动画技能栏</title>
<style>
/* RESET */
* {
margin: 0;
padding: 0;
}

/* DEMO BODY */
body{
overflow-x: hidden;
overflow-y: scroll;
font-family: MuseoSans, Georgia, "Times New Roman", Times, serif;
font-size: 13px;
color: #444;
border-top: 3px solid #444;
background-color: #E4E6E5;
overflow-x:hidden;
}

section .demo {
width: 530px;
margin:15em auto;
overflow: hidden;
}
ul.notes { clear:both;}
ul.notes li {
float:left;
margin-right:3em;
display:inline;
}
ul.notes li:last-child {margin:0;}
ul.notes li span.skill {
display:block;
text-align:center;
padding: 10px 0;
text-shadow: 1px 0 0 #FFFFFF;
}
.notesite {
display: inline-block;
position:relative;
width:1em;
height:1em;
font-size: 5.4em;
cursor:default;
}
.notesite > .percent {
position: absolute;
top: 20px;
left: 0;
width:100%;
font-size:25px;
text-align:center;
z-index:2;
}
.notesite > .percent .dec {
font-size:15px;
}
.notesite > #slice {
position:absolute;
width:1em;
height:1em;
clip:rect(0px,1em,1em,0.5em);
}
.notesite > #slice.gt50 {
clip:rect(auto, auto, auto, auto);
}
.notesite > #slice > .pie {
position:absolute;
border: 0.1em solid #444;
width:0.8em;
height:0.8em;

-moz-border-radius:0.5em;
-webkit-border-radius:0.5em;
border-radius:0.5em;
-webkit-animation: craw 2s linear;
-webkit-animation-iteration-count: 1;
}
@-webkit-keyframes craw {
0% {
clip:rect(0em,1em,0em,0.5em);
}
50%{clip:rect(0em,1em,1em,0.5em);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
clip:rect(0em,1em,1em,0em);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
}
li.html .notesite > #slice > .pie {
border-color:#DF6C4F;
}
.notesite.fill > .percent {
display: none;
}
li.html .notesite:before {
background:#DF6C4F;
}
</style>
</head>
<body class="home">
<div class="wrapper">
<section>
<div class="demo">
<ul class="notes">
<li class="html"><div class="notesite" id="note_0" dir="100">
<div class="percent"></div>
<div id="slice" class="gt50">
<!--<div class="pie"></div>-->
<div class="pie fill">
</div>
</div>
</div><span class="skill">HTML</span>
</li>
</ul>
</div>
</section>
</div>
</body>
</html>

补充下，如果还要加上进度的话：

<div class="percent"><span class="int">0</span></div><!-- percent里面加个span -->

然在加段js

$(document).ready(function() {
/* timerSeconds = 10;
timerFinish = new Date().getTime() + (timerSeconds * 1000);
$('.notesite').each(function(id) {
note = $('#note_' + id).attr('dir');
timer = setInterval('stopNote(' + id + ', ' + note + ')', 0);
});*/

count(0);
function count(num){
var dir = $('#note_0').attr("dir");
$(".int").html(num);
if(++num<=dir){
setTimeout(function(){count(num)},10);//1秒是1000，这里要跟上面动画设置时间一样，2秒就是2000，除以100那就是20了。。。。
}

}
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3 动画 clip

相关文章推荐

新的分享

章节导航