css3和html5如何实现这样的旋转的图？

Question

我在张鑫旭的博客上面看到的，但是链接到codepen的链接失效了
http://www.zhangxinxu.com/wor...

Answer 1

恰好在练习css3 比较粗糙,大体思路同楼上

<style>
    *{
        background: #080808;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .box{
        width: 400px;
        height: 400px;
        position: relative;
        margin: 300px;
    }
    @-webkit-keyframes spin-a{
        form{
            -webkit-transform:rotate(0deg)
        }
        to{
            -webkit-transform:rotate(360deg)
        }
    }
    @-webkit-keyframes spin-b{
        form{
            -webkit-transform:rotate(10deg)
        }
        to{
            -webkit-transform:rotate(350deg)
        }
    }
    
    .a{
        position: absolute;
        left: 0;
        top: 0;
        width: 400px;
        height: 400px;
        border-radius:50%; 
        border: 15px solid #0B3B3C;
        border-top: 10px solid #080808;
        border-bottom: 10px solid #080808;
        -webkit-animation: spin-a 2s infinite linear;
        background-color: #091717;
         /* background-image: -webkit-radial-gradient(circle,#fff 160px,#091717 200px); */
    }
    .b{
        position: absolute;
        left: 25px;
        top: 25px;
        width: 350px;
        height: 350px;
        border-radius:50%; 
        border: 6px solid #17F6FB;
        border-top: 10px solid #091717;
        border-bottom: 10px solid #091717;
        -webkit-animation: spin-a 3s infinite linear;
        background-color: #0A3334;
        /* background-image: -webkit-radial-gradient(circle,#fff 150px,#091717 180px); */
    }

    .c{
        position: absolute;
        left: 45px;
        top: 45px;
        width: 310px;
        height: 310px;
        border-radius:50%; 
        border: 6px solid #17F6FB;
        border-top: 10px solid #0A3334;
        border-bottom: 10px solid #0A3334;
        -webkit-animation: spin-a 6s infinite linear;
        background-color: #0A3334;
        background-image: -webkit-radial-gradient(circle,#1F8989 100px,#0A3334 180px);
    }
    .d{
        position: absolute;
        left: 80px;
        top: 80px;
        width: 240px;
        height: 240px;
        border-radius:50%; 
        border: 15px solid #17F6FB;
        border-top: 10px solid black;
        border-bottom: 10px solid black;
        -webkit-animation: spin-a 1.5s infinite linear;
        background-color: black;
    }
    .e{
        position: absolute;
        left: 110px;
        top: 110px;
        width: 180px;
        height: 180px;
        border-radius:50%; 
        border: 4px solid #101D1D;
    }
    .f{
        position: absolute;
        left: 120px;
        top: 120px;
        width: 160px;
        height: 160px;
        border-radius:50%; 
        background-color: #080808;
    }
</style>

\

<div class="box">

    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
    <div class="f"></div>

</div>

Answer 2

多个div+border+border-radius+transform: rotate

然后让它动起来就行了

Answer 3

从图上来看的话 ， 每一个园内的弧度都是1/4圆 ， 简单的可以写多个div嵌套 ， 然后写border-radius成圆 ， 隐藏对边边框 ， 做css的 animation动画即可 ；

如果并非1/4圆的话可以考虑使用svg画弧度来做 ； 当dom元素多的时候 还可以考虑使用canvas绘制；

Answer 4

图片转起来

Answer 5

关键帧动画。。。

@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}