伸缩式个人头像菜单
<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”指的是一个使用JavaScript和CSS技术实现的交互式菜单系统,这种菜单可以在用户操作时动态地展开或收缩,提供了一种高效且用户友好的导航方式。这种菜单通常用于网站或者应用的头部,帮助...
【标题】"伸缩式菜单_JS_Well"指的是一个使用JavaScript实现的动态伸缩菜单,其设计风格简洁且效果出色,无需依赖任何图像资源。在Web开发中,这样的菜单能够提高用户体验,因为它允许用户根据需要展开或收起子菜单...
伸缩式菜单帮助初学者省去很多设计麻烦,希望能够帮到大家
在网页开发中,"伸缩树形菜单"和"树状菜单"是常见的交互元素,它们主要用于组织和展示层级结构的数据,例如网站导航、文件目录等。这两种菜单形式提供了良好的用户体验,用户可以通过展开和收缩节点来查看或隐藏子...
总的来说,“jquery左侧自动伸缩菜单”涉及到jQuery的基本使用,事件处理,动画效果,以及一些高级特性如插件开发和响应式设计。通过熟练掌握这些知识点,开发者可以创建出功能强大、用户体验优秀的网页导航菜单。在...
jQuery伸缩型菜单是一种在网页开发中常用的交互式导航组件,它允许用户通过鼠标悬停或点击来展开或收缩子菜单项,为用户提供更直观、更便捷的浏览体验。这种菜单设计尤其适用于多层次的网站结构,能有效地组织大量...
在VB(Visual Basic)编程环境中,可伸缩展开的菜单是一种常见的用户界面设计技术,它允许用户根据需要显示或隐藏菜单项,以提供更简洁、更个性化的界面体验。这样的菜单设计尤其适用于那些功能丰富但界面空间有限的...
在C# WinForm应用开发中,创建一个可伸缩的左侧菜单是常见需求,它可以提供良好的用户界面体验,尤其在大型复杂系统中。本话题将深入探讨如何在C# WinForm环境中实现这样的功能。 首先,我们需要理解WinForm的基本...
本主题聚焦于使用jQuery实现的页面左侧伸缩下拉导航菜单,这是一款常见的前端功能,尤其适用于内容丰富的网站。jQuery是一种轻量级、高性能的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得开发者能够更...
5. **响应式设计**:为了确保在不同设备和屏幕尺寸上都能良好工作,这个菜单可能还考虑了响应式设计,使用媒体查询(media queries)来调整菜单在不同屏幕尺寸下的表现。 通过这个“js实现的可伸缩的级联菜单”,...
HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 ...
在介绍jQuery实现的动态伸缩导航菜单实例中,我们首先需要了解jQuery这个前端开发常用的JavaScript库。jQuery极大的简化了JavaScript编程,尤其在处理文档结构、事件处理、动画效果以及Ajax交互等方面提供了简便的...
在C#编程中,创建一个类似QQ的伸缩菜单(也称为手风琴菜单)是一项常见的任务,这种菜单设计能够高效地展示多个层次的选项,同时保持界面的整洁。本项目实现了这样一个功能丰富的伸缩菜单类,使得开发者可以轻松定制...
在本文中,我们将深入探讨如何使用jQuery来创建一个动态的左侧伸缩导航菜单。这个菜单是基于`jquery-1.8.3.min.js`库构建的,提供了多种交互效果,包括无缓动的展开和隐藏,以及两种不同类型的百叶窗效果。我们将...
"是实现伸缩的两级菜单"这个主题聚焦于创建一种可扩展的导航结构,这种结构通常用于网站或应用的主菜单,它允许用户方便地浏览多级分类。在这里,我们将深入探讨如何使用jQuery来实现这样的功能。 jQuery是一个强大...
在Android应用开发中,设计一个独特且吸引用户的交互界面至关重要,而水平方向伸缩的path按钮菜单就是一个很好的创新设计。这种菜单通常用于提供多种功能选项,用户可以通过滑动或者点击来展开或收起,增强用户体验...
"炫酷Flash伸缩菜单源码"是一个利用Adobe Flash(可能使用ActionScript 2或3)开发的交互式菜单系统,它以动态、富有视觉吸引力的方式呈现网站的层级结构。这个源码的核心特点是菜单项在用户交互时能够伸缩,提供了...
html+css折叠伸缩式导航栏