纯CSS3实现8组超炫酷鼠标滑过图片动画


Posted in HTML / CSS onMarch 16, 2016

这是一款效果超酷的纯CSS3鼠标滑过图片动画效果,它共分为8组不同的效果,它们分别在鼠标滑过图片时,以不同的方式显示遮罩层和图片标题。每一组效果又分为3种不同的鼠标滑过图片效果。

这些鼠标滑过图片时的动画效果都是使用CSS3来完成的,分别有:滑动效果,倾斜效果,翻转效果,旋转效果等等,下面是一张GIF的预览图片。

纯CSS3实现8组超炫酷鼠标滑过图片动画

在线预览    源码下载

使用方法

在页面中引入hover-effects.css文件。

CSS Code复制内容到剪贴板
  1. <link rel="stylesheet" href="css/hover-effects.css" />              

HTML结构

以其中一种鼠标滑过图片动画效果为例,它的HTML结构如下:

XML/HTML Code复制内容到剪贴板
  1. <div class="effect-1">  
  2.    <div class="image-box">  
  3.       <img src="img-2.jpg" alt="Image-3">  
  4.    </div>  
  5.    <div class="text-desc">  
  6.       <h3>Your Title</h3>  
  7.       <p>......</p>  
  8.       <a href="#" class="btn">Learn more</a>  
  9.    </div>  
  10. </div>              

CSS样式

CSS Code复制内容到剪贴板
  1. .effect-1{   
  2.   floatleft;    
  3.   width340px;    
  4.   positionrelative;    
  5.   overflowhidden;    
  6.   text-aligncenter;    
  7.   border4px solid rgba(255, 255, 255, 0.9);    
  8.   overflowvisible;   
  9. }   
  10. .effect-1 img{   
  11.   transition: 0.5s;   
  12. }   
  13. .effect-1:hover img{   
  14.   transform: scale(0.3) translateY(-110%);   
  15.   positionrelative;    
  16.   z-index: 9;   
  17. } .effect-1 .text-desc{   
  18.   transform: translateY(100%);    
  19.   opacity: 0;    
  20.   padding85px 20px 10px;    
  21.   transition: 0.5s;   
  22. } .effect-1:hover .text-desc{   
  23.   transform: translateY(0px);    
  24.   opacity: 1;   
  25. }     
  26.   

以上就是本文的全部内容,希望对大家的学习有所帮助。

原文:http://www.cnblogs.com/w2bc/p/5279180.html

HTML / CSS 相关文章推荐
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
CSS3中设置3D变形的transform-style属性详解
May 23 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
HTML5打开本地app应用的方法
Mar 31 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 #HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 #HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 #HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 #HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 #HTML / CSS
基于DOM+CSS3实现OrgChart组织结构图插件
Mar 02 #HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 #HTML / CSS
You might like
PHP新手上路(十三)
2006/10/09 PHP
PHP include_path设置技巧分享
2011/07/03 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
2015/10/22 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
Vue实现日历小插件
2019/06/26 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
化验室技术员岗位职责
2013/12/24 职场文书
白酒市场开发计划书
2014/01/09 职场文书
统计系教授推荐信
2014/02/28 职场文书
淘宝店策划方案
2014/06/07 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
安全先进班组材料
2014/12/26 职场文书
导游词300字
2015/02/13 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
校长新学期致辞
2015/07/30 职场文书
Vue的生命周期一起来看看
2022/02/24 Vue.js