纯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中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
Jul 09 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 HTML / CSS
flex弹性布局详解
Mar 20 HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 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
星际玩家的三大定律
2020/03/04 星际争霸
drupal 代码实现URL重写
2011/05/04 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
Python 正则表达式操作指南
2009/05/04 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
django 常用orm操作详解
2017/09/13 Python
Python多继承顺序实例分析
2018/05/26 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
人事主管岗位职责范本
2013/12/04 职场文书
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技
Elasticsearch 批量操作
2022/04/19 Python