`

伸缩式的个人头像菜单

阅读更多

伸缩式个人头像菜单

<div class="container">
 
<div class="profile-container unfold">
<div class="profile">
<div class="avatar">
<img src="http://www.gbtags.com/gb/laitu/135x180&text=MY AVATAR/222222/dd4814" /></div>
<div class="follow"><button><i class="icon-plus"></i> 关注</button></div>
</div>
<ul class="profile-list">
<li class="first"><i class="fa fa-user"></i> 介绍</li>
<li class="second"><i class="fa fa-tags"></i> 动态</li>
<li class="third"><i class="fa fa-home"></i> 技能</li>
<li class="fourth"><i class="fa fa-sun-o"></i> 背景</li>
</ul>
</div>
 
</div>

 

@import "//cdn.gbtags.com/font-awesome/4.1.0/css/font-awesome.min.css";

html {
    background: #d7d9d9;
    font-family: 'microsoft yahei' ,Arial,sans-serif;
}

*, html, body {
    font-family: Open Sans;
}

ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.container {
    margin: 40px auto 0;
    width: 143px;
}

.profile-container {
    position: relative;
    width: 143px;
    float: left;
}

.profile {
    background: #f6f6f6;
    float: left;
    padding: 4px;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.avatar img {
    display: block;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.follow {
    margin: 4px 0 0 0;
}

.follow button {
    display: block;
    width: 100%;
    border: 0;
    background: #268cde;
    color: white;
    padding: 7px 0;
    margin: 0;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.follow button i {
    font-size: 10px;
    color: #b9daf4;
}

.follow button:hover {
    background: #3096e8;
}

.follow button:active {
    background: #2085d6;
}

.profile-list {
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    color: #767b7e;
    font-size: 13px;
}

.profile-list li {
    cursor: pointer;
    background: #ffffff;
    border-top: 1px solid #e5e6e6;
    padding: 15px 10px;
}

.profile-list li:last-child {  
    border-radius: 0 0 3px 3px;;
    -o-border-radius: 0 0 3px 3px;
    -ms-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
}

.profile-list li [class^="icon-"] {
    margin: 0 3px 0 0;
}


.profile-list .profile {
    border-radius: 3px 3px 0 0;
    position: relative;
}

.profile-list li {
    -webkit-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: perspective(250px) rotateX(-90deg);
    -o-transform: perspective(250px) rotateX(-90deg);
    transform: perspective(250px) rotateX(-90deg);
    -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
}

.profile-list .first {
    -webkit-transition: 0.2s linear 0.8s;
    -o-transition: 0.2s linear 0.8s;
    transition: 0.2s linear 0.8s;
}

.profile-list .second {
    -webkit-transition: 0.2s linear 0.6s;
    -o-transition: 0.2s linear 0.6s;
    transition: 0.2s linear 0.6s;
}

.profile-list .third {
    -webkit-transition: 0.2s linear 0.4s;
    -o-transition: 0.2s linear 0.4s;
    transition: 0.2s linear 0.4s;
}

.profile-list .fourth {
    -webkit-transition: 0.2s linear 0.2s;
    -o-transition: 0.2s linear 0.2s;
    transition: 0.2s linear 0.2s;
}

.profile-container:hover .profile {
    border-radius: 3px 3px 0 0;
    -o-border-radius: 3px 3px 0 0;
    -ms-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
}

.profile-container:hover .profile-list li {
    -webkit-transform: perspective(350px) rotateX(0deg);
    -o-transform: perspective(350px) rotateX(0deg);
    transform: perspective(350px) rotateX(0deg);
    -webkit-transition: 0.2s linear 0s;
    -o-transition: 0.2s linear 0s;
    transition: 0.2s linear 0s;
}

.profile-container:hover .profile-list .second {
    -webkit-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.profile-container:hover .profile-list .third {
    -webkit-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.profile-container:hover .profile-list .fourth {
    transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
} 

 

 

 

.

分享到:
评论

相关推荐

    伸缩式菜单_JS

    标题中的“伸缩式菜单_JS”指的是一个使用JavaScript和CSS技术实现的交互式菜单系统,这种菜单可以在用户操作时动态地展开或收缩,提供了一种高效且用户友好的导航方式。这种菜单通常用于网站或者应用的头部,帮助...

    伸缩式菜单_JS_Well

    【标题】"伸缩式菜单_JS_Well"指的是一个使用JavaScript实现的动态伸缩菜单,其设计风格简洁且效果出色,无需依赖任何图像资源。在Web开发中,这样的菜单能够提高用户体验,因为它允许用户根据需要展开或收起子菜单...

    Axure7.0伸缩式菜单

    伸缩式菜单帮助初学者省去很多设计麻烦,希望能够帮到大家

    伸缩树形菜单+树状菜单

    在网页开发中,"伸缩树形菜单"和"树状菜单"是常见的交互元素,它们主要用于组织和展示层级结构的数据,例如网站导航、文件目录等。这两种菜单形式提供了良好的用户体验,用户可以通过展开和收缩节点来查看或隐藏子...

    jquery左侧自动伸缩菜单

    总的来说,“jquery左侧自动伸缩菜单”涉及到jQuery的基本使用,事件处理,动画效果,以及一些高级特性如插件开发和响应式设计。通过熟练掌握这些知识点,开发者可以创建出功能强大、用户体验优秀的网页导航菜单。在...

    jQuery伸缩型菜单

    jQuery伸缩型菜单是一种在网页开发中常用的交互式导航组件,它允许用户通过鼠标悬停或点击来展开或收缩子菜单项,为用户提供更直观、更便捷的浏览体验。这种菜单设计尤其适用于多层次的网站结构,能有效地组织大量...

    VB 可伸缩展开的菜单实例

    在VB(Visual Basic)编程环境中,可伸缩展开的菜单是一种常见的用户界面设计技术,它允许用户根据需要显示或隐藏菜单项,以提供更简洁、更个性化的界面体验。这样的菜单设计尤其适用于那些功能丰富但界面空间有限的...

    C#Winform左侧伸缩菜单实现

    在C# WinForm应用开发中,创建一个可伸缩的左侧菜单是常见需求,它可以提供良好的用户界面体验,尤其在大型复杂系统中。本话题将深入探讨如何在C# WinForm环境中实现这样的功能。 首先,我们需要理解WinForm的基本...

    jQuery页面左侧伸缩下拉导航菜单.zip

    本主题聚焦于使用jQuery实现的页面左侧伸缩下拉导航菜单,这是一款常见的前端功能,尤其适用于内容丰富的网站。jQuery是一种轻量级、高性能的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得开发者能够更...

    js实现的可伸缩的级联菜单

    5. **响应式设计**:为了确保在不同设备和屏幕尺寸上都能良好工作,这个菜单可能还考虑了响应式设计,使用媒体查询(media queries)来调整菜单在不同屏幕尺寸下的表现。 通过这个“js实现的可伸缩的级联菜单”,...

    HTML+CSS 实现伸缩式导航栏.zip

    HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 ...

    jQuery实现的动态伸缩导航菜单实例

    在介绍jQuery实现的动态伸缩导航菜单实例中,我们首先需要了解jQuery这个前端开发常用的JavaScript库。jQuery极大的简化了JavaScript编程,尤其在处理文档结构、事件处理、动画效果以及Ajax交互等方面提供了简便的...

    C#实现伸缩菜单类QQ菜单

    在C#编程中,创建一个类似QQ的伸缩菜单(也称为手风琴菜单)是一项常见的任务,这种菜单设计能够高效地展示多个层次的选项,同时保持界面的整洁。本项目实现了这样一个功能丰富的伸缩菜单类,使得开发者可以轻松定制...

    jQuery左侧伸缩导航菜单.zip

    在本文中,我们将深入探讨如何使用jQuery来创建一个动态的左侧伸缩导航菜单。这个菜单是基于`jquery-1.8.3.min.js`库构建的,提供了多种交互效果,包括无缓动的展开和隐藏,以及两种不同类型的百叶窗效果。我们将...

    是实现伸缩的两级菜单

    "是实现伸缩的两级菜单"这个主题聚焦于创建一种可扩展的导航结构,这种结构通常用于网站或应用的主菜单,它允许用户方便地浏览多级分类。在这里,我们将深入探讨如何使用jQuery来实现这样的功能。 jQuery是一个强大...

    Android水平方向伸缩的path按钮菜单开源代码.zip

    在Android应用开发中,设计一个独特且吸引用户的交互界面至关重要,而水平方向伸缩的path按钮菜单就是一个很好的创新设计。这种菜单通常用于提供多种功能选项,用户可以通过滑动或者点击来展开或收起,增强用户体验...

    炫酷flash伸缩菜单源码

    "炫酷Flash伸缩菜单源码"是一个利用Adobe Flash(可能使用ActionScript 2或3)开发的交互式菜单系统,它以动态、富有视觉吸引力的方式呈现网站的层级结构。这个源码的核心特点是菜单项在用户交互时能够伸缩,提供了...

    html+css折叠伸缩式导航栏

    html+css折叠伸缩式导航栏

Global site tag (gtag.js) - Google Analytics