盒子源码分享阁最近盒子在网上看到很多人使用css3做出了一个圆形旋转效果，比如时间展示使用圆形旋转展示，这些看起来很炫酷！本次盒子带大家看一看css3怎么实现圆形旋转效果！
在css中，可以先利用border属性和border-radius属性给一个正方形元素设置成圆环样式，再利用animation属性和@keyframes 规则还有transform属性实现圆环旋转即可，示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>div{ width:200px; height:200px; border:100px solid black; border-top-color:pink; border-radius:50%; animation:fadenum 5s ; } @keyframes fadenum{ 100%{transform:rotate(360deg);} }</style>
</head>
<body>
<div></div>
</body>
</html>
效果图:
以上就是本次盒子带来的一个小效果，大家可以复制下来去尝试一下，大家也可以在这个基础上添加一些内容，实现更好看的效果！
