CSS等分圆

最新推荐文章于 2024-04-23 11:10:17 发布

⑧o年崋

最新推荐文章于 2024-04-23 11:10:17 发布

阅读量625

点赞数

分类专栏： css 文章标签： css css3 画圆

本文链接：https://blog.csdn.net/xnlzg/article/details/110624766

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>CSS等分圆</title>
    <meta charset="utf-8">
    <style type="text/css">
	.container{
		position: relative;
		width: 200px;
		height: 200px;
		overflow: hidden;
		border: 2px outset deeppink;
		border-radius: 50%;
		margin: 5em auto;
	} 
	.layer{
	position: absolute;
    transform-origin: left top;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
    border: 1px solid white;
    box-sizing: border-box;
	} 
    </style>
</head>
<body onload="onload">
<div class="container">
<div class="layer layer4"></div>
<div class="layer layer4"></div>
<div class="layer layer4"></div>
<div class="layer layer4"></div> 
</div> 
      
<div class="container">
<div class="layer layer5"></div>
<div class="layer layer5"></div>
<div class="layer layer5"></div>
<div class="layer layer5"></div> 
<div class="layer layer5"></div> 
</div> 
	  <script type="text/javascript">
	  document.querySelectorAll('.layer4').forEach(function (item, i) {
            item.style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16);
            item.style.transform = 'rotate(' + 360 / 4 * (i + 1) + 'deg)skewX(0deg)';
            item.style.width = '110px';
            item.style.height = '110px';
        });
	  document.querySelectorAll('.layer5').forEach(function (item, i) {
            item.style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16);
            item.style.transform = 'rotate(' + 360 / 5 * (i + 1) + 'deg)skewX(18deg)'; 
        });
	  </script>
</body>

</html>

⑧o年崋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS等分圆

<!DOCTYPE html><html><head> <title>CSS等分圆</title> <meta charset="utf-8"> <style type="text/css"> .container{ position: relative; width: 200px; height: 200px; overflow: hidden; border: 2px o
复制链接

扫一扫