纯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 相关文章推荐
详解Sticky Footer 绝对底部的两种套路
Nov 03 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 HTML / CSS
HTML5语音识别标签写法附图
Nov 18 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 HTML / CSS
canvas实现烟花的示例代码
Jan 16 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 HTML / CSS
纯html+css实现奥运五环的示例代码
Aug 02 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 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学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
javascript 文档的编码问题解决
2009/03/01 Javascript
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
土木工程师岗位职责
2013/11/24 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
个人典型事迹材料
2014/12/30 职场文书
评职称个人总结
2015/03/05 职场文书