您现在的位置：首页 >> 前端 >> 内容

css3圆环动画

时间：2017/2/15 10:29:04 点击：

　　核心提示：这是之前面试时遇到的一个问题。先看效果。这个是GIF录屏录得不是很流畅。// 这是代码图片的路径自己可以调整一下。!DOCTYPE HTMLhtmlheadmeta http-equiv=conte...

这是之前面试时遇到的一个问题。先看效果。这个是GIF录屏录得不是很流畅。

css3圆环动画

// 这是代码 图片的路径自己可以调整一下。
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
     
        <title>Index</title>
        <style type="text/css" media="screen">
            #box{position:absolute;width:100px;height:100px;background:url(creal.jpg);clip:rect(0px 100px 0px 50px);transition:all .5s;}
            #box1{position:absolute;width:100px;height:100px;background:url(creal.jpg);clip:rect(100px 50px 100px 0px);transition:all .5s;}
            #contain{width:100px;height:100px;}
            #contain:hover #box{clip:rect(0px 100px 100px 50px);background:url(creal.jpg);}
            #contain:hover #box1{clip:rect(0px 50px 100px 0px);background:url(creal.jpg);}
        </style>
    </head>
    <body>
        <p id="contain">
            <p id="box"></p>
            <p id="box1"></p>
        </p>
    </body>
</html

这个用的css的裁剪属性clip，结合css3的transition属性，完成圆环动画。