利用CSS3的伪类元素hover以及transform,transition等动画属性,可以做出一些炫酷的动画效果。下面将一些项目中使用到的示例发布出来,供大家一起学习研究。演示地址:runjs

浏览器兼容:Chrome,Safari,IE10及以上,IE9不支持渐变效果,IE8以下不支持。

transform:该属性允许我们对元素进行旋转(rotate)、缩放(scale)、移动(translate)或倾斜(skew)。

transition:过渡属性,该属性为简写属性,用于设置4个过渡属性:

  • transition-property :规定设置过渡效果的CSS属性的名称。
  • transition-duration :规定完成过渡效果需要多少秒。
  • transition-timing-function :规定速度效果的速度曲线。
  • transition-delay:定义过渡效果何时开始。

公共原则:

首先定义好悬浮前的css样式,hover out的过渡属性(transition),并且设置透明度(opacity)为0,通过:hover伪类来设置悬浮后的样式,过渡属性(transition,如果设定该属性则元素的过渡效果按照设定的值进行变化同时hover out后按照hover前定义的值变化,否则过渡效果按照hover前定义的值变化),透明度为1。

核心代码:

1.标题右下浮动显示出3D效果

位移:translate/X/Y。

悬浮前:

.cs-style-1 figcaption {
height: 100%;
width: 100%;
opacity:;
text-align: center;
backface-visibility: hidden;
transition: transform 0.3s, opacity 0.3s;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
}

悬浮后:

.cs-style-1 figure:hover figcaption {
opacity:;
transform: translate(15px, 15px);
-webkit-transform: translate(15px, 15px);
}

2.图片上浮底部显示标题

位移:translate/X/Y。

悬浮前:

.cs-style-2 figure img {
z-index:;
transition: transform 0.4s;
-webkit-transition: -webkit-transform 0.4s;
}

悬浮后:

.cs-style-2 figure:hover img {
transform: translateY(-90px);
-webkit-transform: translateY(-90px);
}

3.标题将图片向上推起

位移:translate/X/Y。推起的图片部分overflow:hidden。

悬浮前:

.cs-style-3 figure img {
transition: transform 0.4s;
-webkit-transition: -webkit-transform 0.4s;
} .cs-style-3 figure {
overflow: hidden;
}
.cs-style-3 figcaption {
height: 40px;
width: 80%;
top: auto;
bottom:;
opacity:;
transform: translateY(100%);
-webkit-transform: translateY(100%);
transition: transform 0.4s, opacity 0.1s 0.3s;
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
}

悬浮后:

.cs-style-3 figure:hover figcaption
{
opacity:;
transform:translateY(0px);
-webkit-transform:translateY(0px);
transition: transform 0.4s, opacity 0.1s;
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
}
.cs-style-3 figure:hover img {
transform: translateY(-50px);
-webkit-transform: translateY(-50px);
}

4.标题3D折入把图片向右推出

perspective属性:该属性定义3D元素距视图的距离,以像素计算。该属性允许你改变3D元素查看3D元素的视图。当元素定义perspective属性时,其子元素会获得透视效果,而不是元素本身。与perspective-origin属性一同使用,以改变3D元素的底部位置。

位移:translate/X/Y

旋转:rotate/X/Y

我们将li作为前景容器,这样我们才能实现3D效果,同时定义li内部的figure的transform-style为perspective-3d。

.cs-style-4  li {
perspective: 1700px;
perspective-origin: 0 50%;
}
.cs-style-4 figure {
transform-style: preserve-3d;
}

为了实现效果,需要为img添加一个容器div,设置overflow:hidden。隐藏图片向右移动后多出的部分。hover于图片的时候移动图片:

.cs-style-4 figure div
{
overflow:hidden;
}
.cs-style-4 figure img {
transition: transform 0.4s;
}
.cs-style-4 figure:hover img {
transform: translateX(25%);
}

设置figcaption左边为基准旋转-90°,将图片向屏幕外的方向立起来:

.cs-style-4 figcaption
{
height:250px;
width:25%;
transform-origin:0 0;
transform:rotateY(-90deg);
transition:transform 0.4s,opacity 0.1s 0.3s;
opacity:;
}
.cs-style-4 figure:hover figcaption {
opacity:;
transform:rotateY(0deg);
transition:transform 0.4s,opacity 0.1s;
}

5.标题内容缩放

缩放:scale。

悬浮前:

.cs-style-5 figure img
{
z-index:;
transition:transform 0.4s,opacity 0.1s 0.3s;
}
.cs-style-5 figure figcaption
{
height: 100%;
width: 100%;
transform:scale(0.7);
opacity:;
transition:transform 0.4s,opacity 0.1s 0.3s;
}

悬浮后:

.cs-style-5 figure:hover img
{
transform:scale(0.3);
}
.cs-style-5 figure:hover figcaption
{
opacity:;
transform:scale(1);
transition:transform 0.4s,opacity 0.1s;
}

CSS3悬浮动画效果的更多相关文章

  1. 测试css3的动画效果在display:none的时候不耗费性能

    也许你也有这个疑惑,动画一直在播放,那它不显示出来的时候也一直在播放的话,那是否一直占用资源呢? <!doctype html> <html> <head> < ...

  2. css3 鼠标悬浮动画效果

    CSS3案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  3. css3 transform动画效果与公司框架简易动画的差异

    先看一下该网站的效果 http://2014guangzhouchezhan.dongfeng-citroen.com.cn/mobile/ 该站里面的动画效果由简易动画与css3动画2种方式混合达到 ...

  4. css3实现动画效果

    一.动画效果的常用属性 实现动画效果需要借助css3的下列属性:transform,transion,animation(具体可以参见教材) 二.动画效果实例 1)文字闪烁的动画效果 /*文字的闪烁效 ...

  5. 纯CSS3带动画效果导航菜单

    随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...

  6. CSS3新动画效果

    CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.CSS3动画的属性主要分为三类:transform.transition以及anim ...

  7. 利用 :before :after伪类实现鼠标悬浮动画效果

    1.最近在逛网站的时候,想找一下喜欢的鼠标悬浮效果,避免广告的嫌疑,直接放图了: 2.在实现的时候,如果在直接使用鼠标hover ,transform,进行过渡,不能达到想要的效果,因为同时只能触发一 ...

  8. css3的动画效果

    全新的css3加入的动画效果: [ animation-name ]:检索或设置对象所应用的动画名称 [ animation-duration ]: 检索或设置对象动画的持续时间 [ animatio ...

  9. 初识css3 3d动画效果

    (先看我博客右上角的3d盒子动画效果,目前没做兼容处理,最好最新的chrome看)无意间看到网上css3写的3d动画效果,实在炫酷,以前理解为需要js去计算去写,没想到css直接可以实现.于是开始研究 ...

随机推荐

  1. 百练4152:最佳加法表达式(dp+高精度)

    描述 给定n个1到9的数字,要求在数字之间摆放m个加号(加号两边必须有数字),使得所得到的加法表达式的值最小,并输出该值.例如,在1234中摆放1个加号,最好的摆法就是12+34,和为36 输入有不超 ...

  2. ansible roles例子

    #理解 changed_when failed_when become become_user ansible_become ansible_become_user static #检查group_v ...

  3. nyoj_528_找球号(三)_201404152050

    找球号(三) 时间限制:2000 ms  |  内存限制:3000 KB 难度:2   描述 xiaod现在正在某个球场负责网球的管理工作.为了方便管理,他把每个球都编了号,且每个编号的球的总个数都是 ...

  4. Neo4j教程 Neo4j视频教程 Neo4j 图数据库视频教程

    课程发布地址 地址: 腾讯课堂<Neo4j 图数据库视频教程> https://ke.qq.com/course/327374?tuin=442d3e14 作者 庞国明,<Neo4j ...

  5. ubuntu How do I configure proxies without GUI?

    想法:  我的想法是想是一台国内的 ubuntu 云主机可以通过另外一台在国外(新加坡)的服务器 ,来实现可以访问 google ,哈哈,比较好查资料:) 下面的做法 去修改 /etc/environ ...

  6. 3.3-ISDN

    3.3-ISDN     综合业务数字网ISDN(Integrated Services Digital Network):     ISDN主要有两种接口类型:分为BRI(2B+D=2×64+16K ...

  7. 编程算法 - 求1+2+...+n(函数继承) 代码(C++)

    求1+2+...+n(函数继承) 代码(C++) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 求1+2+...+n, 要求不能使用乘除法\for\whi ...

  8. MySQL5.6 GTID方式,配置主从

    迁移数据到从库 数据导出: mysqldump -uroot -p111111 -h127. -P3306 -q --single-transaction -R -E --triggers --def ...

  9. android Activity初次的启动的时候播放声音

    代码例如以下: private MediaPlayer mMediaPlayer; mMediaPlayer = new MediaPlayer(); mMediaPlayer = MediaPlay ...

  10. 使用Vitamio插件显示花屏

    Vitamio是一款 Android 与 iOS 平台上的全能多媒体开发框架,全面支持硬件解码与 GPU 渲染. 使用vitamio进行播放器的开发非常便捷,使用vitamio的解码,自己编写播放器界 ...