标签：举例 scale cal ima 样式 原理 infinite 二级菜单 lin
大家很容易在一些网页上看到二级菜单上有一个小的三角形，这个小三角型 除了可以使用图片或者使用iconfont写出来，还可以使用border写出来
这边简单的为大家举一个例子，希望对大家有用吧！
css样式为：
1 *{ 2 margin:0; 3 padding:0; 4 } 5 .box{ 6 position: relative; 7 margin:100px 400px; 8 animation: move1 4s linear infinite; 9 } 10 .box div{ 11 /*opacity: 0.6;*/ 12 } 13 .box1{ 14 border-left:200px solid red; 15 border-right:200px solid transparent; 16 border-bottom:200px solid transparent; 17 content:" "; 18 width:0; 19 height:0; 20 } 21 .box2{ 22 border-left:200px solid transparent; 23 border-right:200px solid yellow; 24 border-bottom:200px solid transparent; 25 content:" "; 26 width:0; 27 height:0; 28 position: absolute; 29 top:0; 30 } 31 .box3{ 32 border-left:200px solid transparent; 33 border-right:200px solid green; 34 border-bottom:200px solid transparent; 35 content:" "; 36 width:0; 37 height:0; 38 transform: translateX(-200px); 39 transform: rotate(180deg); 40 } 41 .box4{ 42 border-left:200px solid transparent; 43 border-right:200px solid palevioletred; 44 border-bottom:200px solid transparent; 45 content:" "; 46 width:0; 47 height:0; 48 position: absolute; 49 top:100px; 50 left: 100px; 51 transform: rotate(90deg); 52 } 53 .box5{ 54 border-left:200px solid blueviolet; 55 border-right:200px solid transparent; 56 border-bottom:200px solid transparent; 57 content:" "; 58 width:0; 59 height:0; 60 position: absolute; 61 top:-100px; 62 left: 100px; 63 transform: rotate(-90deg); 64 } 65 .box6{ 66 border-left:200px solid transparent; 67 border-right:200px solid yellowgreen; 68 border-bottom:200px solid transparent; 69 content:" "; 70 width:0; 71 height:0; 72 position: absolute; 73 left: -200px; 74 top:200px; 75 76 } 77 .box7{ 78 border-left:200px solid red; 79 border-right:200px solid transparent; 80 border-bottom:200px solid transparent; 81 content:" "; 82 width:0; 83 height:0; 84 position: absolute; 85 top:200px; 86 left: 200px; 87 88 } 89 .box8{ 90 border-left:200px solid transparent; 91 border-right:200px solid blue; 92 border-bottom:200px solid transparent; 93 content:" "; 94 width:0; 95 height:0; 96 position: absolute; 97 top:-100px; 98 left:-100px; 99 transform: rotate(90deg); 100 101 } 102 .boxt{ 103 position: relative; 104 top:-400px; 105 animation: move 2s linear infinite; 106 } 107 @keyframes move { 108 from { 109 transform-origin: 200px 200px; 110 transform: rotate(0); 111 } 112 to { 113 transform-origin: 200px 200px; 114 transform: rotate(360deg); 115 } 116 } 117 @keyframes move1 { 118 from { 119 transform-origin: 200px 200px; 120 transform: rotate(360deg) scale(1); 121 } 122 to { 123 transform-origin: 200px 200px; 124 transform:rotate(0) scale(1.5); 125 } 126 }
html样式为：
1 <div class="box"> 2 <div class="box1"></div> 3 <div class="box2"></div> 4 <div class="box3"></div> 5 <div class="box4"></div> 6 <div class="boxt"> 7 <div class="box5"></div> 8 <div class="box6"></div> 9 <div class="box7"></div> 10 <div class="box8"></div> 11 </div> 12 </div>
虽然这里我举例的并不是二级菜单上的小三角，但是你只要明白了这个原理，二级菜单上的小三角直接用border和定位就可以写出来了！
标签：举例 scale cal ima 样式 原理 infinite 二级菜单 lin
原文地址：http://www.cnblogs.com/ldlx-mars/p/6785735.html
