主要使用border-radius属性实现圆,半圆,定位坐标覆盖部分模块。 半圆: 实例源码 ...
太极图可以理解为一个一半黑一半白的半圆,上面放置着两个圆形,一个黑色边框白色芯,一个白色边框黑色芯。 1、实现黑白各半的圆形。 2、用:before伪类实现一个黑色边框白色芯的园。 3、用:after伪类实现一个白色边框黑色芯的圆 ...
...
...
使用一个div实现太极图的步骤如下: HTML部分: 第一步,结合border实现左黑右白的正方形,加上圆角、阴影。代码如下; 效果如下: 第二步,通过伪类,实现一个一个白色的圆形,定位好位置。同时,利用box-shadow:0 200px 0 #000 ...
使用三个div实现太极图的步骤如下: HTML部分 第一步,画一个宽高为300px的圆,并为其加上阴影(为了看起来有立体感) /*animation:rotation 2.5s linear infinite ...