用css3属性如何来做一个动态螺旋丸

用css3属性如何来做一个动态螺旋丸_第1张图片
效果图:

这里用到的css3属性:

transform
animation
transform-style

<body>
    <div class="smallbox">div>
    <div id="box">
        <div class="box1 one">div>
        <div class="box2 one">div>
        <div class="box3 one">div>
        <div class="box4 one">div>
        <div class="box5 one">div>
        <div class="box6 one">div>
        <div class="box7 one">div>
        <div class="box8 one">div>
        <div class="box9 one">div>
        <div class="box10 one">div>
        <div class="box11 one">div>
        <div class="box12 one">div>
        <div class="box13 one">div>
        <div class="box14 one">div>
        <div class="box15 one">div>
        <div class="box16 one">div>
        <div class="box17 one">div>
        <div class="box1 two">div>
        <div class="box2 two">div>
        <div class="box3 two">div>
        <div class="box4 two">div>
        <div class="box5 two">div>
        <div class="box6 two">div>
        <div class="box7 two">div>
        <div class="box8 two">div>
        <div class="box9 two">div>
        <div class="box10 two">div>
        <div class="box11 two">div>
        <div class="box12 two">div>
        <div class="box13 two">div>
        <div class="box14 two">div>
        <div class="box15 two">div>
        <div class="box16 two">div>
        <div class="box17 two">div>
        <div class="box1 tre">div>
        <div class="box2 tre">div>
        <div class="box3 tre">div>
        <div class="box4 tre">div>
        <div class="box5 tre">div>
        <div class="box6 tre">div>
        <div class="box7 tre">div>
        <div class="box8 tre">div>
        <div class="box9 tre">div>
        <div class="box10 tre">div>
        <div class="box11 tre">div>
        <div class="box12 tre">div>
        <div class="box13 tre">div>
        <div class="box14 tre">div>
        <div class="box15 tre">div>
        <div class="box16 tre">div>
        <div class="box17 tre">div>
        <div class="box1 four">div>
        <div class="box2 four">div>
        <div class="box3 four">div>
        <div class="box4 four">div>
        <div class="box5 four">div>
        <div class="box6 four">div>
        <div class="box7 four">div>
        <div class="box8 four">div>
        <div class="box9 four">div>
        <div class="box10 four">div>
        <div class="box11 four">div>
        <div class="box12 four">div>
        <div class="box13 four">div>
        <div class="box14 four">div>
        <div class="box15 four">div>
        <div class="box16 four">div>
        <div class="box17 four">div>
    div>
body>

背景图:
用css3属性如何来做一个动态螺旋丸_第2张图片

你可能感兴趣的:(HTML,html,css,css3,animation)