首页 > 程序开发 > web前端 > HTML/CSS >

css3圆环动画

2017-02-15

这是之前面试时遇到的一个问题。先看效果。这个是GIF录屏录得不是很流畅。这是代码 图片的路径自己可以调整一下。

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

\

// 这是代码 图片的路径自己可以调整一下。
<!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>
        <div id="contain">
            <div id="box"></div>
            <div id="box1"></div>
        </div>
    </body>
</html
这个用的css的裁剪属性clip,结合css3的transition属性,完成圆环动画。

相关文章
最新文章
热点推荐