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

前端之家收集整理的这篇文章主要介绍了基于jQuery插件实现环形图标菜单旋转切换特效前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

feature.presenter.1.5.css

.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,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;<filter id="gaussian_blur">#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;
}

html:

基于jQuery环形图标<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>旋转切换特效

以上所述就是本文的全部内容了,希望大家能够喜欢。

原文链接:https://www.f2er.com/jquery/54285.html

猜你在找的jQuery相关文章