苏飞论坛

标题: css-实现大圆套小圆，小圆转动样式 [打印本页]
作者: xyc    时间: 2021-6-23 11:51
标题: css-实现大圆套小圆，小圆转动样式
   今天看到大圆套小圆，小圆不停的转动一个效果，就整理了一下给大家分享一下。
   原理：首先实现两个圆的效果，小的圆放到大的圆的边上，然后再用animation属性实现转动

  HTML代码：
  
[HTML] 纯文本查看 复制代码
<div class="container">

    <div class="round big">

        <div class="round smaller"></div>

    </div>

</div>

  css代码：
  
[CSS] 纯文本查看 复制代码
.round {

    border-radius: 50%;

    background: #88a1ff;

    border: 1px solid #ccc;

    display: inline-block;

}

.big {

    width: 50px;

    height: 50px;

    -webkit-animation: move 2s infinite;

    -moz-animation: move 2s infinite;

    -o-animation: move 2s infinite;

    animation: move 2s infinite;

}

.smaller {

    width: 10px;

    height: 10px;

    margin-left: 19px;

    margin-top: 40px;

}

.big .smaller {

    background: black;

}

@-webkit-keyframes move {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

}

@-moz-keyframes move {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

}

@-o-keyframes move {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

}

@keyframes move {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

}

以上就是实现大圆套小圆，小圆转动的代码，如有需要，可下载源码，源码为同时多个的代码，下载源码，请点击》》 (, 下载次数: 0)