这里先讲下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" c