【前端网页特效】纯css3+html实现鼠标悬浮滑动效果

效果图：

空闲下写的，给刚学网页css+html的新入门者的一个小案例，代码很简单~ 大佬略过

html布局：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>图文列表</title>
</head><body><div class="box"><div class="head"><span>热门新品</span><a href="#">更多></a></div><ul><li><div class="deatil"><h2>华为手表</h2><a href="#">开始进入</a></div><img src="img/img (2).jpg" width="210px" height="140px" alt=""/></li><li><div class="deatil"><h2>华为手表</h2><a href="#">点击进入</a></div><img src="img/img (1).jpg" width="210px"  height="140px" alt=""/></li><li><div class="deatil"><h2>华为手机</h2><a href="#">点击进入</a></div><img src="img/img (3).jpg" width="210px"  height="140px" alt=""/></li><li><div class="deatil"><h2>华为荣耀</h2><a href="#">点击进入</a></div><img src="img/img (5).jpg" width="210px"  height="140px" alt=""/></li><li><div class="deatil"><h2>华为Pro30</h2><a href="#">点击进入</a></div><img src="img/img (6).jpg" width="210px"  height="140px" alt=""/></li><li><div class="deatil"><h2>华为mate</h2><a href="#">点击进入</a></div><img src="img/img (8).jpg" width="210px"  height="140px" alt=""/></li><li><div class="deatil"><h2>华为精品</h2><a href="#">点击进入</a></div><img src="img/img (4).jpg" width="210px"   height="140px" alt=""/></li><li><div class="deatil"><h2>华为nova3</h2><a href="#">点击进入</a></div><img src="img/img (7).jpg" width="210px"  height="140px" alt=""/></li></ul>  </div>
</body>
</html>

css样式：

*{margin:0;padding:0;
}
body{font-family:"微软雅黑";background-color:#ddd;
}
.box{width:1024px;height:400px;background:#fff;margin:30px auto;padding:20px;
}
.box .head span{font-size:18px;color:#333;
}
.box .head{margin-bottom:20px;
}
.box .head a{text-decoration:none;float:right;font-size:15px;color:#CD0707;
}
.box .head a:hover{color:#F00;
}
.box ul li{width:210px;height:140px;list-style:none;position:relative;float:left;margin-left:30px;margin-bottom:30px;overflow:hidden;
}
.box ul li .deatil{width:210px;height:140px;background:rgba(0,0,0,0.7);position:absolute;top:-240px;-webkit-transition:all 0.3s ease; <!--适应ie，谷歌，苹果浏览器内核-->-o-transition:all 0.3s ease;      <!--适应Opera浏览器内核-->-moz-transition:all 0.3s ease;    <!--火狐浏览器-->-ms-transition:all 0.3s ease;     <!--微软-->
}.box ul li .deatil h2{font-size:18px;color:#fff;margin-bottom:20px;text-align:center;padding-top:30px;}.box ul li .deatil a{font-size:15px;display:block;color:#fff;background-color:#F00;text-decoration:none;width:100px;height:40px;text-align:center;line-height:40px;margin:0 auto;
}
.box ul li:hover .deatil{top:0;
}

【前端网页特效】纯css3+html实现鼠标悬浮滑动效果相关推荐

css3探测光圈_CSS3按钮鼠标悬浮光圈效果
1 .HTML相关知识点 HTML(超文本标记语言)是网页的核心.首先你要学会,不要害怕,HTML很容易学习的,刚开始多记多练,但是到最后还是要自己深入专研,简单的入门是很快,但学好HTML是成为We ...
html 鼠标图标做成动画效果,纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 实现的代码. html代码: 复制代码代码如下: css3代 ...
纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览源码下载实现的代码. html代码: < ...
天空飘彩带的css3代码_纯CSS3实现飘逸洒脱带有飞行效果的三级下拉菜单
本文实例讲述了纯CSS3实现飘逸洒脱带有飞行效果的三级下拉菜单.分享给大家供大家参考.具体如下: 这是一款纯CSS3实现的飘逸洒脱的飞行菜单,三级下拉菜单,多级菜单,可支持三级,会飞行的子菜单,因为使 ...
【转载】纯CSS3实现飘逸洒脱带有飞行效果的三级下拉菜单
本文实例讲述了纯CSS3实现飘逸洒脱带有飞行效果的三级下拉菜单.分享给大家供大家参考.具体如下: 这是一款纯CSS3实现的飘逸洒脱的飞行菜单,三级下拉菜单,多级菜单,可支持三级,会飞行的子菜单,因为使 ...
html5鼠标经过图片透明,html5 css3透明时钟鼠标悬浮图片放大
特效描述:html5 css3 透明时钟鼠标悬浮图片放大,html5 css3时钟及鼠标悬浮图片扩大特效,适合于初学者,而且是个不错的展示效果代码结构 1. 引入CSS 2. HTML代码 va ...
纯CSS3 制作交通信号灯红绿灯动画效果
纯CSS3 制作交通信号灯红绿灯动画效果 HTML: <div class="light"><div class="red"></ ...
css3鼠标悬浮放大效果
<!doctype html> <html><head><meta charset="utf-8"><title>css ...
html中鼠标移动有下拉图片,JQuery自适应全屏图片滚动鼠标上下滑动效果代码
特效描述:JQuery 自适应全屏图片滚动鼠标上下滑动效果.JQuery:全屏随鼠标滑动而滚动代码结构 1. 引入JS 2. HTML代码 $(function(){ $('body,html' ...

【前端网页特效】纯css3+html实现鼠标悬浮滑动效果

【前端网页特效】纯css3+html实现鼠标悬浮滑动效果相关推荐

最新文章

热门文章