标签：部分 osi class 案例 属性 title init oct bug
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>太极八卦图案例</title> 6 <link rel="stylesheet" type="text/css" href="buguaStyle.css" /> 7 </head> 8 <body> 9 <div class="background"> <!--主要是用到了定位，还有动画 --> 10 <div class="box"> 11 <div class="Black"></div> 12 <div class="White"></div> 13 <div class="medium_black"></div> 14 <div class="medium_white"></div> 15 <div class="little_black"></div> 16 <div class="little_white"></div> 17 </div> 18 </div> 19 </body> 20 </html>
1 *{ /*css代码上来必须写的*/ 2 padding: 0; 3 margin: 0; 4 list-style: none; 5 } 6 .background{ 7 width: 100%; 8 height: 100%; 9 background: darkgray; 10 position: fixed; 11 /*定位 -> absolute(生成绝对定位元素，相对于父级元素进行定位) 12 fixed（生成绝对定位元素，相对于浏览器窗口进行定位） 13 relative（生成相对定位元素，相对于其正常位置进行定位）*/ 14 } 15 .box{ 16 width: 400px; 17 height: 400px; 18 border-radius:50%; 19 position: absolute; /*因为父级元素有了定位，所以这里用absolute*/ 20 top: 0; /*上、下、左、右四个属性值来实现元素位置的改变*/ 21 bottom: 0; 22 left: 0; 23 right: 0; 24 margin: auto; 25 animation:run 5s infinite linear; 26 } 27 .Black{ 28 width: 200px; 29 height: 400px; 30 background: black; 31 border-radius: 200px 0 0 200px; /*形成一个黑色的左半圆*/ 32 position: absolute; 33 } 34 .White{ 35 width: 200px; 36 height: 400px; 37 background: white; 38 border-radius:0 200px 200px 0; /*形成一个白色的左半圆*/ 39 left: 200px; 40 position: absolute; 41 } 42 .medium_black{ 43 width: 200px; 44 height: 200px; 45 background: black; 46 border-radius: 50%; 47 position: absolute; 48 left: 0; 49 right: 0; 50 margin: auto; 51 bottom: 0; /*四个属性实现了中等大小的圆在最xia边的中间的位置*/ 52 } 53 .medium_white{ 54 width: 200px; 55 height: 200px; 56 background: white; 57 border-radius: 50%; 58 position: absolute; 59 left: 0; 60 right: 0; 61 margin: auto; 62 top: 0; /*这个可以写也可以不写，因为是这个默认是在左上角的，写了上边三个属性后就己经能达到想要的效果了*/ 63 } 64 .little_black{ 65 width: 100px; 66 height: 100px; 67 background: black; 68 border-radius: 50%; 69 position: absolute; 70 left: 0; 71 right: 0; 72 margin: auto; 73 top: 50px; 74 } 75 .little_white{ 76 width: 100px; 77 height: 100px; 78 background: white; 79 border-radius: 50%; 80 position: absolute; 81 left: 0; 82 right: 0; 83 margin: auto; 84 bottom: 50px; 85 } 86 @keyframes run{ 87 from{ 88 transform: rotate(0deg);/*这里不写也是可以的，因为默认的话就是0*/ 89 } 90 to{ 91 transform: rotate(360deg); 92 } 93 }
主要是用到了定位（position），要熟悉定位的三个常用属性。
标签：部分 osi class 案例 属性 title init oct bug
原文地址：https://www.cnblogs.com/stary-pointer/p/13195538.html
