今天小编跟大家讲解下有关css教程制作八卦镜代码分享 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css教程制作八卦镜代码分享 的相关资料，希望小伙伴们看了有所帮助。
复制代码代码如下:.bagua { height: 300px; width: 300px; text-align: center;}.bagua .dir { position:absolute; height:124px; width: 300px; background: #aaa; transform: rotate(45deg); -o-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); clear: both; margin: auto;}.bagua > .dir { position: relative; top: 89px;}.left,.right{ line-height: 124px; position: relative; z-index: 1;}.left { float: left; transform: rotate(90deg); -o-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg);}.right { float: right; transform: rotate(-90deg); -o-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); text-direction: left;}.mirror { clear: both; width: 100px; height: 100px; margin: auto; position: relative; top: -15px; left: -50px;}.mirror .dir { background: orange; height:83px; width: 200px;}.era,.zodiac,.yinyang_fish,.fish_semicircle,.yang_fish,.yin_fish,.fish_eye { border-radius:50%; -o-border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; margin: auto; position:relative;}.era { width: 100px; height: 100px; margin: auto; top: -34px; left: 25px;}.era .dir { width: 150px; height: 150px; transform: rotate(15deg); -o-transform: rotate(15deg); -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); background: transparent;}.era .left,.era .right { line-height: 150px;}.zodiac { width: 100px; height: 100px; top: 25px; left: 25px;}</p><p>.zodiac .dir { width: 100px; height: 100px; transform: rotate(30deg); -o-transform: rotate(30deg); -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); position: absolute; clear: both;}.zodiac .left,.zodiac .right { line-height: 100px;}.yinyang_fish { width: 60px; height: 60px; top: 20px; background:linear-gradient(left, white 49%, #333 51%); background:-o-linear-gradient(left, white 49%, #333 51%); background:-moz-linear-gradient(left, white 49%, #333 51%); background:-webkit-linear-gradient(left, white 49%, #333 51%);}.yang_fish,.yin_fish { width: 50%; height: 50%; background: radial-gradient(#333 19%, white 21%); background: -o-radial-gradient(#333 19%, white 21%); background: -moz-radial-gradient(#333 19%, white 21%); background: -webkit-radial-gradient(#333 19%, white 21%);}.yin_fish { background: radial-gradient(white 19%, #333 21%); background: -o-radial-gradient(white 19%, #333 21%); background: -moz-radial-gradient(white 19%, #333 21%); background: -webkit-radial-gradient(white 19%, #333 21%);}.solid,.dashed { width: 100%; height: 3px; background: #333; margin: 5px;}.dashed { background: linear-gradient(left, #333 45%, transparent 46%, transparent 54%, #333 55%); background: -o-linear-gradient(left, #333 45%, transparent 46%, transparent 54%, #333 55%); background: -moz-linear-gradient(left, #333 45%, transparent 46%, transparent 54%, #333 55%); background: -webkit-linear-gradient(left, #333 45%, transparent 46%, transparent 54%, #333 55%);}
来源：爱蒂网
