首页 > 代码库 > div元素呈圆环排列

div元素呈圆环排列

<style>.path {width: 300px;height: 300px;padding: 20px;border-radius: 50%;background: rgba(79, 11, 152, 0.5);;margin: 50px auto;}.avatar {width: 50px;margin: 0 auto;border-radius: 50%;overflow: hidden;display: block;transform-origin:50% 150px;    position: absolute;}</style>    <div class="avatar" style="transform: rotate(0deg);">        <img  src="https://www.baidu.com/img/bd_logo1.png" width=‘50‘ height=‘50‘ style=‘transform: rotate(0deg);‘/>    </div>    <div class="avatar" style="transform: rotate(72deg);">        <img  src="https://www.baidu.com/img/bd_logo1.png" width=‘50‘ height=‘50‘ style=‘transform: rotate(-72deg);‘/>    </div>    <div class="avatar" style="transform: rotate(144deg);">        <img  src="https://www.baidu.com/img/bd_logo1.png" width=‘50‘ height=‘50‘ style=‘transform: rotate(-144deg);‘/>    </div>    <div class="avatar" style="transform: rotate(216deg);">        <img  src="https://www.baidu.com/img/bd_logo1.png" width=‘50‘ height=‘50‘ style=‘transform: rotate(-216deg);‘/>    </div>    <div class="avatar" style="transform: rotate(288deg);">        <img  src="https://www.baidu.com/img/bd_logo1.png" width=‘50‘ height=‘50‘ style=‘transform: rotate(-288deg);‘/>    </div>

技术分享

div元素呈圆环排列