scss MalikBabaAïssa的钢笔。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了scss MalikBabaAïssa的钢笔。相关的知识，希望对你有一定的参考价值。
Placing elements on a circle
----------------------------
This is a quick method to place items on a circle.
I built a quick and dirty SASS Mixin to build the position and radius size for you. Just calculate how many items you want, add the mixin for every item and of you go!
I am convinced this can be exanded on, and made a lot better!
A [Pen](http://codepen.io/malikba/pen/FDwho) by [Malik Baba Aïssa](http://codepen.io/malikba) on [CodePen](http://codepen.io/).
[License](http://codepen.io/malikba/pen/FDwho/license).<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<div class="container">
<h1>Placing elements on a circle using CSS3</h1>
<p>Below is a pretty nifty method I use to place elements on circle. </p>
<!-- BEGIN CIRCLE CODE -->
<div class="wrapper">
<div class="radius">
<a href='#' class='center'>O</a>
<a href='#' class='point deg0'><span>1</span></a>
<a href='#' class='point deg15'><span>2</span></a>
<a href='#' class='point deg30'><span>3</span></a>
<a href='#' class='point deg45'><span>4</span></a>
<a href='#' class='point deg60'><span>5</span></a>
<a href='#' class='point deg75'><span>6</span></a>
<a href='#' class='point deg90'><span>7</span></a>
<a href='#' class='point deg105'><span>8</span></a>
<a href='#' class='point deg120'><span>9</span></a>
<a href='#' class='point deg135'><span>1O</span></a>
<a href='#' class='point deg150'><span>11</span></a>
<a href='#' class='point deg165'><span>12</span></a>
<a href='#' class='point deg180'><span>13</span></a>
<a href='#' class='point deg195'><span>14</span></a>
<a href='#' class='point deg210'><span>15</span></a>
<a href='#' class='point deg225'><span>16</span></a>
<a href='#' class='point deg240'><span>17</span></a>
<a href='#' class='point deg255'><span>18</span></a>
<a href='#' class='point deg270'><span>19</span></a>
<a href='#' class='point deg285'><span>2O</span></a>
<a href='#' class='point deg300'><span>21</span></a>
<a href='#' class='point deg315'><span>22</span></a>
<a href='#' class='point deg330'><span>23</span></a>
<a href='#' class='point deg345'><span>24</span></a>
</div>
</div>
<!-- END CIRCLE CODE -->
<h6>This method was originally described by: <a href="http://dabblet.com/gist/3864650" target="_blank">http://dabblet.com/gist/3864650</a></h6>
</div>@import "compass";
// A. THE MIXIN ++++++++++++++++++++++++++++++++++
@mixin build-circle($degree, $radius){
-webkit-transform: rotate($degree) translate($radius) rotate(-$degree);
-moz-transform: rotate($degree) translate($radius) rotate(-$degree);
-ms-transform: rotate($degree) translate($radius) rotate(-$degree);
-o-transform: rotate($degree) translate($radius) rotate(-$degree);
transform: rotate($degree) translate($radius) rotate(-$degree);
/* animation: linear scalation 5s infinite;
-webkit-animation: linear scalation 5s infinite;*/
}
// A. END ++++++++++++++++++++++++++++++++++
// B. THE CIRCLE ++++++++++++++++++++++++++++++++++
// B.1. Build your circle
.wrapper {
background: #c0392b;
text-align: center;
position: relative;
height: 400px;
width: 400px;
margin: 0 auto;
border-radius: 100%;
}
.radius {
position:absolute;
top:190px;
left:190px;
right:0;
/*animation: rotation 5s;
-webkit-animation: rotation 5s;*/
.point, .center {
display: block;
position: absolute;
width: 25px;
height: 25px;
background: #fff;
border-radius: 100%;
text-align: center;
color: #e74c3c;
text-decoration: none;
span {
display:block;
margin-top:2px;
}
}
}
// B.1. End
// B.1. Plot your points ( I chose 24 items )
.deg0 {
@include build-circle(0deg, 150px);
}
.deg15 {
@include build-circle(15deg, 150px);
}
.deg30 {
@include build-circle(30deg, 150px);
}
.deg45 {
@include build-circle(45deg, 150px);
}
.deg60 {
@include build-circle(60deg, 150px);
}
.deg75 {
@include build-circle(75deg, 150px);
}
.deg90 {
@include build-circle(90deg, 150px);
}
.deg105 {
@include build-circle(105deg, 150px);
}
.deg120 {
@include build-circle(120deg, 150px);
}
.deg135 {
@include build-circle(135deg, 150px);
}
.deg150 {
@include build-circle(150deg, 150px);
}
.deg165 {
@include build-circle(165deg, 150px);
}
.deg180 {
@include build-circle(180deg, 150px);
}
.deg195 {
@include build-circle(195deg, 150px);
}
.deg210 {
@include build-circle(210deg, 150px);
}
.deg225 {
@include build-circle(225deg, 150px);
}
.deg240 {
@include build-circle(240deg, 150px);
}
.deg255 {
@include build-circle(255deg, 150px);
}
.deg270 {
@include build-circle(270deg, 150px);
}
.deg285 {
@include build-circle(285deg, 150px);
}
.deg300 {
@include build-circle(300deg, 150px);
}
.deg315 {
@include build-circle(315deg, 150px);
}
.deg330 {
@include build-circle(330deg, 150px);
}
.deg345 {
@include build-circle(345deg, 150px);
}
// B.1. End
// B. END ++++++++++++++++++++++++++++++++++
// C. HOUSEKEEPING ++++++++++++++++++++++++++++++++++
body {
background: #e74c3c;
}
.container {
width: 940px;
margin: 0 auto;
color: #FFF;
font-family: 'Open Sans', sans-serif;
text-align: center;
}
h1 {
text-transform: uppercase;
}
@-webkit-keyframes rotation {
0% {
-webkit-transform-origin: 0 0;
-webkit-transform: rotate(0deg) scale(1);
}
100% {
-webkit-transform-origin: 0 0;
-webkit-transform: rotate(360deg) scale(1);
}
}
@-webkit-keyframes circular { from {
-webkit-transform: rotate(360deg)
rotate(0deg);
} to {
-webkit-transform: rotate(-360deg)
rotate(360deg);}
}
@-webkit-keyframes scalation {
0% {
-webkit-transform: scale(0);
}
25% {-webkit-transform:scale(.8);}
50% {-webkit-transform:scale(1.2);}
75% {-webkit-transform:scale(.8);}
100% {
-webkit-transform: scale(0);
}
}
.wrapper {
animation: linear circular 5s infinite;
-webkit-animation: linear circular 5s infinite;
}
// C. END ++++++++++++++++++++++++++++++++++以上是关于scss MalikBabaAïssa的钢笔。的主要内容，如果未能解决你的问题，请参考以下文章