html旋转的环形菜单,基于jQuery插件实现环形图标菜单旋转切换特效

.feature-presenter {

position: absolute;

}

.feature-presenter-icon {

background-color: white;

text-align: center;

transition: transform 0.7s cubic-bezier(0.445,0.05,0.55,0.95);

-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.445,0.95);

border-radius: 50%;

cursor: pointer;

}

.feature-presenter img {

max-width: 100%;

transition: transform 0.7s cubic-bezier(0.445,0.95);

border-radius: 50%;

cursor: pointer;

Box-shadow: 0 0 16px rgba(0,0.1);

filter: blur(0px);

-webkit-filter: blur(0px);

image-rendering: -webkit-optimize-contrast;

}

.feature-presenter i {

font-size: 85px;

/filter: url('data:image/svg+xml;utf8,#gaussian_blur');/

}

.feature-presenter-circle-container {

border-radius: 50%;

display: inline-block;

border: 1px solid rgba(0,0.09);

Box-shadow: 0px 0px 4px rgba(0,0.09);

transition: transform 0.7s cubic-bezier(0.445,0.95);

background-color: white;

}

.feature-presenter-text-container {

line-height: 1.3;

display: inline-block;

vertical-align: top;

z-index: 1001;

position: relative;

overflow: hidden;

}

.feature-presenter-text-heading {

-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.075,0.82,0.165,1);

transition: transform 0.4s cubic-bezier(0.075,1);

margin-bottom: 10px;

color: rgba(0,0.8);

}

.feature-presenter-text-description {

-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.075,1) 0.4s;

transition: transform 0.4s cubic-bezier(0.075,1) 0.4s;

color: rgba(0,0.5);

}

.feature-presenter-text-container-out {

-webkit-transform: translate(200%,0);

transform: translate(200%,0);

-webkit-transition: -webkit-transform 0.5s ease-in;

transition: transform 0.5s ease-in;

}