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. 移动端适配js

    第一种.参考网易的 (我现在用这个多) https://www.cnblogs.com/well-nice/p/5509589.html var deviceWidth = document.docu ...

  2. Masm615+notepad++6.8.8搭建汇编开发环境

    前言:很早以前搭过,做了笔记的.现在重新玩汇编,按照笔记撘环境,谁知道坑了自己两个小时,气的我现在打字手都在抖 准备工作: 1.Masm615汇编环境,下载地址:https://pan.baidu.c ...

  3. OpenLdap的加密md5(Java+Python,同时提供明文-->密文,md5(名文)-->密文两种方法)

    # slappasswd -h {md5} -s "secret"{MD5}Xr4ilOzQ4PCOq3aQ0qbuaQ== import base64 import hashli ...

  4. System.getenv()和System.getProperty() 的区别

    1.System.getenv() 方法是获取指定的环境变量的值.它有两种方法,一种是接收参数为任意字符串,当存在指定环境变量时即返回环境变量的值,否则返回null.另外一种是不接受参数,那么返回的是 ...

  5. 【莫比乌斯反演】HDU1695_GCD

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1695 第一道莫比乌斯反演 感觉很巧妙的就是利用了F(x)=(n/x)*(m/x) 之后的那个去重也挺不 ...

  6. Linux dnsmasq.conf

    一.配置文件:局域网内使用此dns服务时候首先会在host.dnsmasp里面找对应域名,若找不到则在resolv.dnsmasq中找 [root@operation_server dnsmasq.d ...

  7. will-change属性

    牛逼的 will-change属性 will-change属性可以提前通知浏览器我们要对元素做什么动画,这样浏览器可以提前准备合适的优化设置.这样可以避免对页面响应速度有重要影响的昂贵成本.元素可以更 ...

  8. Storm消息可靠机制

    一:介绍 1.介绍 默认情况是,Spout每获取一条数据,封装后发送给后面的组件,不再管后面是否处理完成或成功接收,不再考虑. 这种的情况是不用太精确,没有启用可靠性消息机制. 2.方面的体现 spo ...

  9. fork调用的底层实现

    fork调用的内核实现: http://www.cnblogs.com/huangwei/archive/2010/05/21/1740794.html http://blog.csdn.net/he ...

  10. CentOS root用户修改密码

    1.root用户修改密码: #passwd -------------------------------- 参考资料: 1.Centos修改root密码:http://blog.163.com/wz ...