首页 > 代码库 > 线条围绕 div 中心转圈 效果
线条围绕 div 中心转圈 效果
1. 用到知识：
CSS:animate ,clipe
2.原理： 用clip 属性 将div 切边 ，会出现 切边的动态效果，然后内部的div 遮住外部的div ,流出一部分 作为边；
就是旋转的效果；
代码如下：
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>边缘线条转圈效果</title> </head> <style> #f1{width:500px;height:500px;position:absolute;background:red;} @keyframes clips{ 0%{ clip:rect(0px 220px 2px 10px) } 25%{ clip:rect(0px 2px 220px 10px) } 50%{ clip:rect(218px 220px 210px 10px) } 70%{ clip:rect(0px 220px 220px 210px) } 100%{ clip:rect(0px 220px 2px 10px) } } #f1{animation:clips 8s linear infinite} </style> <body> <div id="f1"> </div> </body></html>
线条围绕 div 中心转圈 效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。