纯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中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
详解css3 mask遮罩实现一些特效
Oct 24 HTML / CSS
css3 给背景设置渐变色的方法
Sep 12 HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
会走动的图形html5时钟示例
Apr 27 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
基于CSS3画一个iPhone
Apr 21 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 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
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
详解Python的Django框架中的templates设置
2015/05/11 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
python多线程并发实例及其优化
2019/06/27 Python
opencv python图像梯度实例详解
2020/02/04 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
环境工程求职简历的自我评价范文
2013/10/24 职场文书
献爱心倡议书
2014/04/14 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
采购部长岗位职责
2014/06/13 职场文书
商务经理岗位职责
2014/08/03 职场文书
2015年春节标语口号
2014/12/09 职场文书
小学生成绩单评语
2014/12/31 职场文书
博物馆观后感
2015/06/05 职场文书
高中生军训感言
2015/08/01 职场文书