绘制太极图(CSS)

绘制太极图(CSS)

    • 预览图
    • 思路
    • html布局代码部分
    • CSS样式部分

Hello!大家好,这里是万物之恋。今天给大家带来的是CSS3动画制作一个旋转的太极图案。

预览图


貌似有些卡顿 是录制软件的锅。。。

思路

先在页面中绘制出一个大的白色圆形,再将其分为两个一黑一白的半圆。然后各自延伸出一个大小适合的同颜色小圆,里面居中绘制一个对立颜色的中心圆,最后利用css3动画让其旋转。

html布局代码部分

	<body>
		
		<div class="box">
			
			<div class="list1 lis">
				
				<div class="bom bom1">
					
					<div class="bos bos1">div>
					
				div>
			div>
			<div class="list2 lis">
				
				<div class="bom bom2">
					
					<div class="bos bos2">div>
					
				div>
			div>
		div>
	body>

CSS样式部分

		

这里是万物之恋,我们下次再见了!

你可能感兴趣的:(html+css+js习题集,css,html,css3)