线条围绕 div 中心转圈 效果
Posted Terre
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了线条围绕 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 中心转圈 效果的主要内容,如果未能解决你的问题,请参考以下文章
Android UIPaint Gradient 渐变渲染 ② ( SweepGradient 梯度渐变渲染 | 围绕中心点绘制扫描渐变的着色器 | 多渐变色构造函数 | 雷达扫描效果 )