脚链

位置: 首页 > 代码集锦
[发布: 2023.8.31 作者: Admin 阅读: 545]

以下这组代码，通过CSS transform属性的rotate与translate的巧妙配合，将子元素围成一圈。参与实现总体效果的实现机制还有：父元素以grid布局约束子元素绝对居中、子元素的border-radius属性及box-shadow属性、JS的相关算法。其中，通过修改border-radius属性值可以轻易改变子元素的形状。代码：

<style>
#mydiv {
	margin: 30px;
	width: 200px;
	height: 200px;
	border: 2px dotted purple;
	border-radius: 50%;
	position: relative;
	display: grid;
	place-items: center;
	--size: 30px;
	--borderRadius: 0 50%;
	--mnColor: rgba(0,100,0,.75);
}
li-zi {
	position: absolute;
	width: var(--size);
	height: var(--size);
	border-radius: var(--borderRadius);
}
</style>

<div id="mydiv"></div>

<script>

let total = 15;

Array.from({length: total}).forEach( (item,key) => {
	let cc = '#' + Math.random().toString(16).substr(-6);
	item = document.createElement('li-zi');
	item.style.cssText += `
		background: ${cc};
		transform: rotate(${360 / total * key}deg) translateY(100px);
		box-shadow: inset 0 0 ${10 + Math.random() * 10}px var(--mnColor);
	`;
	mydiv.appendChild(item);
});

</script>

前一篇: CSS关键帧动画驱动的时钟
下一篇: svg : circle to path 演示

发表评论:

评论列表 [0条]