纯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 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 HTML / CSS
CSS控制继承中的height能变为可继承吗
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循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
详解webpack2异步加载套路
2018/09/14 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
js实现点赞效果
2020/03/16 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
django rest framework之请求与响应(详解)
2017/11/06 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
舞蹈教师自荐信
2014/01/27 职场文书
施工安全标语
2014/06/07 职场文书
导游词范文
2015/02/13 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
python中subplot大小的设置步骤
2021/06/28 Python
Python采集股票数据并制作可视化柱状图
2022/04/04 Python
Golang jwt身份认证
2022/04/20 Golang
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript