transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少,现在我给大家介绍并实际实现下该属性。

    transition字面意思是变迁、变换、过度的意思,所以transition属性也离不开这个大致意思,其中该属性中的重要属性是:  

        transition-property:指定过度的元素; 如:transition-property:background,就是指background属性参与这个过度。

        transition-duration:指定这个过度持续时间;

        transition-delsy:延迟过度时间;

        transition-timing-function:指定时间过度类型; 如:ease\linear\ease-in\ease-out\ease-in-out\    其中:ease是越来越慢,linear是匀速        运动,ease-in是先慢后快,ease-out是先快后慢,ease-in-out是先慢后快再慢

        transition:all 0.3 ease;  其中all是指全部属性参与,0.3是过度时间,ease是过度类型;

    现在应该对这个属性有了个基本的了解,其实知道了上述属性,我们就可以动手做一些页面上的动画效果

.divt{
text-align: center;
padding-top: 150px;
margin-top: 30px;
margin-bottom: 30px;
}
.divimg{
text-align: center;
}
.imgts{
width: 175px;
height:175px;
background-color: white;
border: 2px solid blue;
margin-top: 50px;
margin-left: 50px;
text-align: center;
display: block;
transform:rotate(10deg);
transition:all 0.5s ease-in;
box-shadow: 2px 2px 4px #9932CC;
padding: 5px;
margin: auto;
}
.imgts:hover{
transform:rotate(0deg) scale(1.05);
box-shadow: 15px 15px 21px blue;
}
.divimg1{
width: 200px;
height: 40px;
background-color: pink;
transition-property: background-color;
transition-duration: 0.01s;
transition-timing-function: ease;
}
.divimg1:hover{
background-color: yellowgreen;
}

  

    上述代码实现了鼠标悬停图片旋转和鼠标悬停改变颜色的功能,这个是不是很好用。

  注:box-shadow是盒阴影属性,transform:rotate()属性在http://www.cnblogs.com/chrxc/p/5121347.html提过

        

css3 transition属性实现3d动画效果的更多相关文章

  1. [web前端] css3 transition属性实现3d动画效果

    cp from : https://www.cnblogs.com/chrxc/p/5123375.html transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动 ...

  2. 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果

    摘要: 通过backface-visibility:hidden;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... ...

  3. 初识css3 3d动画效果

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

  4. css3 transition属性

    最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...

  5. css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)

    源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...

  6. 实用CSS3的transform实现多种动画效果

    查看效果:http://keleyi.com/a/bjad/b6x9q8gs.htm 以下是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. ...

  7. html5+css3第一屏滚屏动画效果

    详细内容请点击 在线预览立即下载 html5+css3第一屏滚屏动画效果. 转载自:http://tympanus.net/codrops/2014/05/22/inspiration-for-art ...

  8. 推荐9款使用CSS3实现的超酷动画效果

    大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...

  9. css3 transition属性变化与animation动画的相似性以及不同点

    下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transiti ...

随机推荐

  1. n个月后兔子的个数问题(for循环)

  2. 多行文字溢出[...]的实现(text-overflow: ellipsis)

    声明:此文章为转载(点击查看原文),如有侵权24小时内删除.联系QQ:1522025433. 对于单行文字, 很简单.(详见css3产考手册 进入) css: .oneLine { width: 20 ...

  3. 集合Arraylist的方法的使用和打印

    package chapter090; import java.util.ArrayList;import java.util.List; public class TestList01 { publ ...

  4. ERP产品销售发货判断库存功能(四十二)

    产品数量的前端(键盘抬起的事件): <td> <input type="text" name="proCount" onkeyup=" ...

  5. Timber(对Log类封装的一个工具)

    Timber(对Log类封装的一个工具) https://blog.csdn.net/hzl9966/article/details/51314137 https://www.jianshu.com/ ...

  6. 解决在Pycharm中无法显示代码提示的问题

    #coding: utf-8from cx_Oracle.CURSOR import *import cx_Oracle conn= cx_Oracle.connect('XX', 'XX', '12 ...

  7. 最小生成树<lct>

    题解: lct动态维护最小生成树 每次加边时若这两个之间不连通,那么直接连接 如果这两个点联通,那么就找到这条边上的最大值 如果这个大于当前边,就替换掉 但是需要注意的是lct只能维护点,不能维护边 ...

  8. URAL - 1427-SMS

    题目大意:给你长度为n的字符串(n<=1e6),让你对它进行划分,如果一段里面只有字母和 空格可以包含m(m<=1e5)个,如果有其他字符只能包含n个,问你最少需要分成几段. 思路:划分d ...

  9. Storm通信机制(了解)

    Worker间的通信:经常需要通过网络跨节点进行,Storm使用ZeroMQ或Netty(0.9以后默认使用)作为进程间通信的消息框架. Worker进程内部通信:不同worker的thread通信使 ...

  10. metasploit常用服务扫描和利用模块

    metasploit常用服务扫描和利用模块 SMB扫描 smb枚举auxiliary/scanner/smb/smb_enumusers 扫描命名管道auxiliary/scanner/smb/pip ...