css:只用一個div實現八卦圖
阿新 • • 發佈:2018-11-26
只用一個div實現一個八卦圖
效果圖:
html:
<div></div>
css:
<style> div{ width: 100px; height: 200px; background: #fff; position: absolute; left: 0; right: 0; top:0; bottom: 0; margin: auto; border-style: solid; border-color: #000; border-width: 1px 100px 1px 1px; border-radius: 50%; } div:before { content: ''; background: #000; width: 20px; height: 20px; border: 40px solid #fff; border-radius: 100%; position: absolute; left: 50%; top: 0; } div:after { content: ''; background: #fff; width: 20px; height: 20px; border: 40px solid #000; border-radius: 100%; position: absolute; right: -50%; bottom: 0; } </style>
補:加一個小小的動畫
效果:讓八卦圖順時針旋轉
html程式碼:
<div></div>
css程式碼:
<style> div{ width: 100px; height: 200px; background: #fff; position: absolute; left: 0; right: 0; top:0; bottom: 0; margin: auto; border-style: solid; border-color: #000; border-width: 1px 100px 1px 1px; border-radius: 50%; animation: change 3s;/*引數1:動畫名稱;引數2:規定動畫完成一個週期所花費的秒或毫秒。預設是 0。*/ animation-iteration-count: infinite;/*設定動畫次數無限[預設值是1]*/ animation-timing-function: linear;/*使動畫勻速旋轉[預設值是ease,動畫以低速開始,然後加快,在結束前變慢。]*/ } div:before { content: ''; background: #000; width: 20px; height: 20px; border: 40px solid #fff; border-radius: 100%; position: absolute; left: 50%; top: 0; } div:after { content: ''; background: #fff; width: 20px; height: 20px; border: 40px solid #000; border-radius: 100%; position: absolute; right: -50%; bottom: 0; } /*@keyframes:規定動畫。*/ @keyframes change { 0% {transform: rotate(0deg)} 100% {transform: rotate(360deg)} } </style>