小圆围绕大圆360度旋转的2种方法

来源：互联网发布：网络开展学生教育工作编辑：程序博客网时间：2024/06/09 17:38

第一种：覆盖法
1. ul包含7个li，每个li包含图片和含小圆的span；
2. li、img、div、span都给border-radius:50%，img（图片）的大小要小于li；
3. span（小圆）由一个div包住，div覆盖（定位）到li上面去，div的大小和li大小一样;
4. 给每个li和span定位；
5. div旋转360度，小圆就旋转360度；

这里写图片描述

HTML

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>face</title>    </head>    <body>        <ul>            <li class="image1">                <img src="imgs/1.jpg" alt="" />                <div><span></span></div>            </li>            <li class="image2">                <img src="imgs/2.jpg" alt="" />                <div><span></span></div>            </li>            <li class="image3">                <img src="imgs/3.jpg" alt="" />                <div><span></span></div>            </li>            <li class="image4">                <img src="imgs/4.jpg" alt="" />                <div><span></span></div>            </li>            <li class="image5">                <img src="imgs/5.jpg" alt="" />                <div><span></span></div>            </li>            <li class="image6">                <img src="imgs/6.jpg" alt="" />                <div><span></span></div>            </li>        </ul>    </body></html>

css

<style type="text/css">            /*基本设置*/            html, body, div, ul, li{                margin: 0;                padding: 0;                list-style: none;            }            ul{                width: 600px;                height: 600px;                background: #2a2a2a;                position: relative;                margin: 0 auto;            }            li{                width: 70px;                height: 70px;                border: 1px solid #ff4346;                border-radius:70px;                padding: 15px;                position: relative;            }            img{                width: 70px;                height: 70px;                border: 1px solid transparent;                border-radius:70px;            }            /*给每个图片定位*/            li.image1{                position: absolute;                left:30px;                top: 80px;            }            li.image2{                position: absolute;                left:265px;                top: 80px;            }            li.image3{                position: absolute;                right:30px;                top: 80px;            }            li.image4{                position: absolute;                left:135px;                top: 265px;            }            li.image5{                position: absolute;                right:135px;                top: 265px;            }            li.image6{                position: absolute;                left:265px;                bottom: 30px;            }            span{                display: block;                width: 10px;                height: 10px;                border-radius: 10px;            }            /*小圆给一个div包住，div覆盖到li上面去，div的大小和li大小一样，div旋转360度就是小圆围绕脸谱转360*/            li div{                width: 100px;                height: 100px;                border-radius: 100px;                position: absolute;                left:0;                top: 0;            }            li div{                transform: rotate(0deg);                -webkit-transform: rotate(0deg);                -moz-transform: rotate(0deg);                transition: transform 10s;                animation: circle 10s infinite linear;                -webkit-animation:circle 10s infinite linear;                -moz-animation:circle 10s infinite linear;            }            @keyframes circle{                0%{ transform:rotate(0deg); }                100%{transform:rotate(360deg);}            }            @-webkit-keyframes circle{                0%{ transform:rotate(0deg) ; }                100%{transform:rotate(360deg);}            }            @-moz-keyframes circle{                0%{ transform:rotate(0deg) ; }                100%{transform:rotate(360deg);}            }            /*给每个小圆定位*/            .image1 span{                background: #c11ced;                position: absolute;                left: 18px;                top:2px;            }            .image2 span{                background: #FF4346;                position: absolute;                right: 18px;                bottom: 2px;            }            .image3 span{                background: #18ed58;                position: absolute;                left: 18px;                bottom: 3px;            }            .image4 span{                background: #0352cc;                position: absolute;                left: 40px;                bottom: -4px;            }            .image5 span{                background: #d90fb2;                position: absolute;                left: -5px;                bottom: 53px;            }            .image6 span{                background: #dff757;                position: absolute;                left: 67px;                bottom: 0px;            }        </style>

第二种方法：改变小圆的旋转起点transform-origin
1. ul包含7个li，每个li包含图片和含小圆的span；
2. li、img、div、span都给border-radius:50%，img（图片）的大小要小于li；
3. 给每个li和span定位；
4. 改变span（小圆）的旋转起点transform-origin，使其位置刚好；
5. div旋转360度，小圆就旋转360度；

HTML

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>face</title>    </head>    <body>        <ul>            <li class="image1">                <img src="imgs/1.jpg" alt="" />                <span></span>            </li>            <li class="image2">                <img src="imgs/2.jpg" alt="" />                <span></span>            </li>            <li class="image3">                <img src="imgs/3.jpg" alt="" />                <span></span>            </li>            <li class="image4">                <img src="imgs/4.jpg" alt="" />                <span></span>            </li>            <li class="image5">                <img src="imgs/5.jpg" alt="" />                <span></span>            </li>            <li class="image6">                <img src="imgs/6.jpg" alt="" />                <span></span>            </li>        </ul>    </body></html>

CSS

<style type="text/css">            html, body, div, ul, li{                margin: 0;                padding: 0;                list-style: none;            }            ul{                width: 600px;                height: 600px;                background: #2a2a2a;                position: relative;                margin: 0 auto;            }            li{                width: 70px;                height: 70px;                border: 1px solid #ff4346;                border-radius:70px;                padding: 15px;                position: relative;            }            img{                width: 70px;                height: 70px;                border: 1px solid transparent;                border-radius:70px;            }            li.image1{                position: absolute;                left:30px;                top: 80px;            }            li.image2{                position: absolute;                left:265px;                top: 80px;            }            li.image3{                position: absolute;                right:30px;                top: 80px;            }            li.image4{                position: absolute;                left:135px;                top: 265px;            }            li.image5{                position: absolute;                right:135px;                top: 265px;            }            li.image6{                position: absolute;                left:265px;                bottom: 30px;            }            span{                display: block;                width: 10px;                height: 10px;                border-radius: 10px;                transform: rotate(0deg);                -webkit-transform: rotate(0deg);                -moz-transform: rotate(0deg);                transition: transform 10s;                animation: circle 10s infinite linear;                -webkit-animation:circle 10s infinite linear;                -moz-animation:circle 10s infinite linear;            }            @keyframes circle{                0%{ transform:rotate(0deg); }                100%{transform:rotate(360deg);}            }            @-webkit-keyframes circle{                0%{ transform:rotate(0deg) ; }                100%{transform:rotate(360deg);}            }            @-moz-keyframes circle{                0%{ transform:rotate(0deg) ; }                100%{transform:rotate(360deg);}            }            .image1 span{                background: #c11ced;                position: absolute;                left: 18px;                top:2px;                transform-origin: 32px 48px;            }            .image2 span{                background: #FF4346;                position: absolute;                right: 18px;                bottom: 2px;                transform-origin: -22px -38px;            }            .image3 span{                background: #18ed58;                position: absolute;                left: 18px;                bottom: 3px;                transform-origin: 32px -38px;            }            .image4 span{                background: #0352cc;                position: absolute;                left: 40px;                bottom: -4px;                transform-origin: 10px -46px;            }            .image5 span{                background: #d90fb2;                position: absolute;                left: -5px;                bottom: 53px;                transform-origin: 55px 12px;            }            .image6 span{                background: #dff757;                position: absolute;                left: 67px;                bottom: 0px;                transform-origin: -17px -40px;            }        </style>

1 0