js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS常用代码 > 图片相册

HTML5鼠标经过图片显示带阴影效果的特效代码

发布时间:2017-04-06 16:28:14    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

HTML5鼠标经过图片显示带阴影效果的特效代码

HTML5鼠标经过图片显示带阴影效果的特效代码

@import url(http://fonts.useso.com/css?family=Open+Sans:600);

body {
 background:url('../img/norwegian_rose.png');
  font-family: 'Open Sans', sans-serif;
  font-weight:600;
  text-align:center;
}

.wrapper {
  margin: 0 auto;
  margin-top:2%; 
}

ul.gallery {
  position: relative;
  z-index: 1;
  overflow: hidden;
  list-style: none;
  padding:5px;
}


ul.gallery li {
  border:5px solid #fff;
  position: relative;
  display:inline-block;
  width: 250px;
  height: 150px;
  margin: 0 30px 30px 0;
  background: #fff;
  -webkit-box-shadow: 0 1px 4px #ccc, 0 0 40px #ccc inset;
  -moz-box-shadow: 0 1px 4px #ccc, 0 0 40px #ccc inset; 
  box-shadow: 0 1px 4px #ccc, 0 0 40px #ccc inset;
}

ul.gallery li:before,
ul.gallery li:after {
  content: '';
  z-index: -1;
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 70%;
  height: 55%;
  -webkit-box-shadow: 0 15px 16px #6b6b6b;
  -moz-box-shadow: 0 15px 16px #6b6b6b;
  box-shadow: 0 15px 16px #6b6b6b;
  -webkit-transform: skew(-15deg) rotate(-6deg);
  -moz-transform: skew(-15deg) rotate(-6deg);
  -ms-transform: skew(-15deg) rotate(-6deg);
  -o-transform: skew(-15deg) rotate(-6deg);
  transform: skew(-15deg) rotate(-6deg); 
}

ul.gallery li:after {
  left: auto;
  right: 11px;
  -webkit-transform: skew(15deg) rotate(6deg);
  -moz-transform: skew(15deg) rotate(6deg);
  -ms-transform: skew(15deg) rotate(6deg);
  -o-transform: skew(15deg) rotate(6deg);
  transform: skew(15deg) rotate(6deg); 
}

a.gallery_links img {
  border:none;
}

a.gallery_links {
  position: relative;
  text-decoration: none;
}
 
a.gallery_links:after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 0%;
  top;
  left: 0;
  background: #111;
  padding: 5px 15px;
  color: white;
  font-family: 'Open Sans', sans-serif;
  text-shadow: 0px 0px 1px #000;
  white-space: nowrap;
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  -moz-transition   : all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  width:85;
}
  
a.gallery_links:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  -webkit-transition: all 0.4s ease;
  -moz-transition   : all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  opacity: 0;
  left: 30%;
  bottom: 90%;
}

a.gallery_links:hover:after {
  bottom: 100%;
}
  
a.gallery_links:hover:before {
  bottom: 70%;
}

a.gallery_links:hover:after, a.gallery_links:hover:before {
  opacity: 1;
}



鼠标 图片 阴影 html5

jquery选项卡切换,版块鼠标跟随边框变色特效

jquery tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等特效

jQuery实现右侧qq在线客服特效,鼠标划过即可显示、隐藏

jquery鼠标悬停图片高亮,从左边滑动出标题信息显示效果

Css3鼠标悬停图片高亮特效

jquery鼠标经过向上滑动标题,可以左右切换图片位置!

jQuery仿QQ空间鼠标感应上下滚动预览图片特效

JS鼠标滑过文字标签改变标签显示内容

jQuery鼠标悬停导航底部边框线条伸缩动画效果

jQuery鼠标悬停内容动画切换效果

jquery实现鼠标移动到图片上显示大图广告特效

jQuery Scrollify鼠标滚轮控制页面滚动特效插件

jquery鼠标滑过标签选项卡切换特效

jQuery鼠标经过小图显示大图,鼠标更随特效

css3鼠标滑过栏目图片滑动切换动画特效

jquery 水平手风琴鼠标滑过标题图片滑动切换特效

jquery qq表情插件,鼠标点击qq表情图片插入文本框表单

jQuery鼠标悬停在图片上显示说明按钮的HoverEx插件

jquery hover网页左侧鼠标悬停列表改变菜单样式特效

jquery仿win8风格的图片九宫格布局,鼠标悬停图片文字切换特效

jquery图片相册特效,切换上下页,还带对话框提醒特效

jqzoom仿京东商品详细页产品图片放大镜特效

jquery实现图片相册淡入淡出特效插件

jquery实现全屏图片左右滚动预览焦点图特效

js、html5实现极速3D立体式图片相册切换效果

jquery鼠标悬停图片高亮,从左边滑动出标题信息显示效果

jQuery+CSS3 实现动画图片相册,大图全屏展示,前后翻页特效代码

Css3鼠标悬停图片高亮特效

jquery鼠标经过向上滑动标题,可以左右切换图片位置!

query自适应图片高度并带播放提示的相册特效

jquery实现网页右下角弹出并且支持tab标签选项卡的图片广告代码

JS仿腾讯娱乐图片频道满屏左右切换焦点图特效

jQuery仿QQ空间鼠标感应上下滚动预览图片特效

jQuery多张图片相册上下切换,放大预览等特效

jquery实现鼠标移动到图片上显示大图广告特效

JS带图片标题自动播放的幻灯片特效

jQuery动态加载图片相册,弹窗大图特效

jquery实现led广告牌旋转图片切换特效

jquery实现会滚动的新闻列表和图片滚动特效

jquery.slider多种过渡效果的图片轮播幻灯片特效

友荐云推荐