css3圆环动画
这是之前面试时遇到的一个问题。先看效果。这个是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属性，完成圆环动画。
相关文章
图文推荐
- 文章
- 推荐
- 热门新闻