下载APP 编程狮,随时随地学编程
返回 首页

Jquery合集

9种纯CSS3人物信息卡片UI设计效果

查看演示
下载地址:http://www.jq22.com/jquery-info8710

ie兼容10
插件描述:
  每种效果在鼠标滑过卡片时,通过CSS3使图片和HTML元素变形生成 非常漂亮的鼠标滑过动画特效。

这是一组纯CSS3人物信息卡片UI设计效果。这组人物信息卡片共9种效果,每种效果在鼠标滑过卡片时,通过CSS3使图片和HTML元素变形生成 非常漂亮的鼠标滑过动画特效。

使用方法

HTML结构

该人物信息卡片的基本HTML结构如下:

<div class="single-member effect-3">
  <div class="member-image">
    <img src="demo.jpg" alt="">
  </div>
  <div class="member-info">
    <h3>标题</h3>
    <h5>子标题</h5>
    <p>描述信息...</p>
    <div class="social-touch">
      <a class="fb-touch" href="#"></a>
      <a class="tweet-touch" href="#"></a>
      <a class="linkedin-touch" href="#"></a>
    </div>
  </div>
</div>

CSS样式

为卡片添加一些通用样式:

.single-member{
  width: 280px; 
  float: left; 
  font-family: sans-sarif; 
  margin: 30px 2.5%; 
  background-color: #fff; 
  text-align: center; 
  position: relative;
}
.member-image img{
  max-width: 100%; 
  vertical-align: middle;
}
h3 {
  font-size: 24px; 
  font-weight: normal; 
  margin: 10px 0 0; 
  text-transform: uppercase;
}
h5 {
  font-size: 16px; 
  font-weight: 300; 
  margin: 0 0 15px; 
  line-height: 22px;
}
p {font-size: 14px; 
  font-weight: 300; 
  line-height: 22px; 
  padding: 0 30px; 
  margin-bottom: 10px;
}
.social-touch a{
  display: inline-block; 
  width: 27px; 
  height: 26px; 
  vertical-align: middle; 
  margin: 0 2px; 
  background-image: url(images/social-icons.png); 
  background-repeat: no-repeat; 
  opacity: 0.7; 
  transition: 0.3s;
}
.social-touch a:hover{
  opacity: 1; 
  transition: 0.3s;
}
.fb-touch{
  background-position: 0 0;
}
.tweet-touch{
  background-position: -35px 0;
}
.linkedin-touch{
  background-position: -71px 0;
}
.icon-colored .fb-touch{
  background-position: 0 -27px;
}
.icon-colored .tweet-touch{
  background-position: -35px -27px;
}
.icon-colored .linkedin-touch{
  background-position: -71px -27px;
}

第三种效果的CSS代码如下:

.effect-3{
  max-height: 302px; 
  min-height: 302px; 
  overflow: hidden;
}
.effect-3 h3{
  padding-top: 7px; 
  line-height: 33px;
}
.effect-3 .member-image{
  border-bottom: 5px solid #e5642b; 
  transition: 0.4s; 
  height: 212px; 
  width: 100%; 
  display: inline-block; 
  float: none; 
  vertical-align: middle;
}
.effect-3 .member-info{
  transition: 0.4s;
}
.effect-3 .member-image img{
  width: 100%; 
  vertical-align: bottom;
}
.effect-3 .social-touch{
  background-color: #e5642b; 
  float: left; 
  left: 0; 
  bottom: 0; 
  overflow: hidden; 
  padding: 5px 0; 
  width: 100%; 
  transition: 0.4s;
}
.effect-3:hover .member-image{
  border-bottom: 0; 
  border-radius: 0 0 50px 50px; 
  height: 81px; 
  display: inline-block; 
  overflow: hidden; 
  width: 109px; 
  transition: 0.4s;
}

目录

浏览声明

请看我~!没错就是我~!点我~!点我~!
阿里云服务器代金券免费领取
各版本JQuery.js合集

UI

jQuery筛选列表过滤插件Filterizr
9种纯CSS3人物信息卡片UI设计效果
metro界面交互动画
超炫酷的进度条
纵向tab插件tabWeek.js
jQuery表格隔行换色
4种超酷jQuery导航超链接鼠标滑过动画特效插件HoverSlippery
icon图表表面遮罩层的碎泡效果
jQuery鼠标经过图片高亮插件jFade
SVG悬停效果Shape Hover Effect with SVG
CSS3视差滚动实例
HTML5 SVG轻量级jQuery进度条插件
粒子效果插件
纯CSS3鼠标滑过图片效果动画库imagehover.css
jQuery可伸缩搜索框
lightbox2 图片插件
纯CSS实现自适应布局表格
CSS变形弹窗效果mphingmodalwindow
可制作炫酷页面滚动效果的jQuery事件插件
CSS3按钮多种移入动画
很酷的CSS3多窗口邮件阅读器
HTML5实现的图书翻页效果
滚动下拉页面打开样式

分类插件

jQuery分类插件jquery.sort.js

模态框

iziModal-时尚炫酷的jQuery模态窗口插件

滚动轮播

横版

jQuery 3D旋转木马轮播图插件jquery.caroursel.js
鼠标经过不同标签触发不同背景
jQuery超酷旋转轮播

竖版

图片全屏自适应轮播
带视觉差效果的平滑单页滚动jQuery插件
jquery仿flash产品图片多角度展示特效代码
jQuery全屏滚动插件XSwitch
jQuery和CSS3网页固定背景视觉差特效插件

拖拉排序

一个轻简的jQuery拖放排序插件DDSort
jQuery可拖拽型控件

多选框

mootools分页多选搜索插件

滚动条

兼容IE的滚动条
jQuery滑动固定插件scrollfix
jQuery滚动监听插件Waypoints
jQuery上下滑动加载刷新插件iscroll.js
sectionscroll.js|可生成垂直整页滚动导航的jQuery插件

Loading

CSS3网页Loading

移动端

移动端手指上下滑动切换插件pageSlider
jQuery手机端遮罩弹出菜单代码

提示框

效果非常棒的tooltip插件
easyDialog 简单、实用的弹出层组件
SweetAlert2强大的纯Js模态消息对话框插件
3种形式tips帮助提示框代码
html5提示信息提示框
jQuery通知提示插件overhang.js

功能性插件

Twitter bootstrap模糊查询插件
jQuery表格排序插件 jquery.tablesort.js
jQuery分步指引介绍插件
jQuery自动固定表头插件freezeheader.js
OrgChart组织架构图控件
支持移动端的HTML5 Canvas逼真黑板特效
jquery日历插件SimpleCalendar
标准的放大镜效果(商品展示)
jQuery多层多区域拖插件XQ_drag.js
CSS3和js超酷iPhone样式科学计算器插件
美观强大的日期时间选择器插件flatpicker
JQuery多功能自适应导航
jquery.jqplot 绘图插件
jQuery+GooFlow网页在线流程图
动态JSON树形菜单
富文本插件ckedit
jQuery虚拟键盘插件softkey

瀑布流

最小的响应式动态网格瀑布流布局js插件
等距网格和三维网格
瀑布流相册可点击放大(适应手机移动端)
aos.js超赞页面滚动元素动画jQuery动画库
超酷堆叠相片转瀑布流网格布局动画效果设计
CSS3立方体小照片
D3.js logo可视化库 D3.js

图片处理

响应式jQuery图片放大镜插件magnificent.js
3D鼠标滑动效果
6种图片轮播效果
可拖拽和带预览图的jQuery文件上传插件ssi-uploader
jQuery图片裁剪插件jQuery-photoClip

小游戏(上班别偷玩~)

基于angular.js的HTML5剪刀石头布小游戏
游戏见缝插针
大转盘插件(zepto)
20行 js 写的 贪吃蛇游戏
html推箱子游戏
jQuery像素鸟
HTML5实现水果忍者
js实现简单的跳舞机(劲舞团)游戏
js模仿微信打飞机游戏代码
jQuery超级英雄宝石方块
三国杀版连连看实现代码
jQuery游戏引擎插件gameQuery

banner特效

文字浮动跟随鼠标移动

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }