Css3：一条线围绕这容器边缘转动。不知道怎么实现。
就是类似于这样，这个容器外面 有一条 线，然后围绕着这个容器慢慢的转动。
whoamis浏览 3829回答 2
2回答
-
Junru
这个线的长度 是小于正方形盒子容器的宽度，还是 等于或大于盒子容器的宽度？ -
Chris_威
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>rotate</title> </head> <style> *{ margin: 0; padding: 0; } .wrapper{ padding: 20px; position: relative; height: 250px; } .main{ height: 200px; width: 200px; margin: 25px auto; box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5); } .main , .main::before, .main::after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .main::before, .main::after { content: ''; margin: -5%; box-shadow: inset 0 0 0 2px rgba(105, 202, 98, 0.5); animation: clip 8s linear infinite; } .main::before { animation-delay: 0s; } @keyframes clip { 0%, 100% { clip: rect(0px, 220.0px, 2px, 0px); } 25% { clip: rect(0px, 2px, 220.0px, 0px); } 50% { clip: rect(218.0px, 220.0px, 220.0px, 0px); } 75% { clip: rect(0px, 220.0px, 220.0px, 218.0px); } } </style> <body> <div class="wrapper"> <div class="main"></div> </div> </body> </html>有个类似的，你参考参考
随时随地看视频慕课网APP
CSS3
Html/CSS
Html5