纯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 相关文章推荐
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 HTML / CSS
css sprite简单实例
May 23 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
如何查看浏览器对html5的支持情况
Dec 15 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 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以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
php把session写入数据库示例
2014/02/26 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
node.js中的console用法总结
2014/12/15 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
layui表格实现代码
2017/05/20 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
python修改注册表终止360进程实例
2014/10/13 Python
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
python中的协程深入理解
2019/06/10 Python
Python实现自动装机功能案例分析
2020/10/22 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
私有程序集与共享程序集有什么区别
2013/04/05 面试题
出国导师推荐信
2014/01/16 职场文书
法人代表委托书
2014/04/04 职场文书
让生命充满爱观后感
2015/06/08 职场文书
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers