css中自定义变量妙用一例
利用CSS中自定义的变量
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 #div1 7 { 8 position: relative; 9 height: 200px; 10 width: 200px; 11 margin: 100px; 12 padding:0px; 13 border: 1px solid black; 14 } 15 .div2 16 { 17 padding:0px; 18 width:20px; 19 height:20px; 20 border-radius:50%; 21 position: absolute; 22 left:50%; 23 margin-left:-10px; 24 border: 1px solid black; 25 background-color: red; 26 transform: rotate(calc(var(--i) * 45deg)); 27 transform-origin:10px 100px; 28 } 29 </style> 30 </head> 31 <body> 32 <div id="div1"> 33 <div class="div2" style='--i:0;'>1</div> 34 <div class="div2" style='--i:1;'>2</div> 35 <div class="div2" style='--i:2;'>3</div> 36 <div class="div2" style='--i:3;'>4</div> 37 <div class="div2" style='--i:4;'>5</div> 38 <div class="div2" style='--i:5;'>6</div> 39 <div class="div2" style='--i:6;'>7</div> 40 <div class="div2" style='--i:7;'>8</div> 41 </div> 42 </body> 43 </html>
效果如图：
浙公网安备 33010602011771号