cp from : https://www.cnblogs.com/chrxc/p/5123375.html

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;
}

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

[web前端] css3 transition属性实现3d动画效果的更多相关文章

  1. css3 transition属性实现3d动画效果

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

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

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

  3. 初识css3 3d动画效果

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

  4. css3 transition属性

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

  5. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

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

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

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

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

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

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

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

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

随机推荐

  1. Flink--将表转换为DataStream或DataSet

    A Table可以转换成a DataStream或DataSet.通过这种方式,可以在Table API或SQL查询的结果上运行自定义的DataStream或DataSet程序 将表转换为DataSt ...

  2. cropper.js图片裁剪

    最近做电子名片的项目,可是个人照片展示上出现了 用户上传的图片尺寸严重失调,所以要求进行图片裁剪,再此我对图片裁剪进行调研 还不太成熟 以后再改 这个实现的原理是 前台获取到 坐标 图片的尺寸 原图文 ...

  3. Codeforces Round #487 (Div. 2) 跌分有感

    又掉分了 这次的笑话多了. 首先,由于CF昨天的比赛太早了,忘记了有个ER,比赛开始半个小时才发现. 于是只能今天了. 嗯哈. 今天这场也算挺早的. 嗯嗯,首先打开A题. 草草看了一遍题意,以为不是自 ...

  4. 数据库构架设计中的Shared Everthting、Shared Nothing、和Shared Disk

    Shared Everthting:一般是针对单个主机,完全透明共享CPU/MEMORY/IO,并行处理能力是最差的,典型的代表SQLServer Shared Disk:各个处理单元使用自己的私有 ...

  5. .net core跨平台的文件路径

    windows下路径为:"xxxx\\yyyy" linux路径下为:"xxxx/yyyy" 用Path.Combine("xxxx",&q ...

  6. 设计模式之单例模式及应用demo

    单例模式是创建型模式之一. 单例模式顾名思义是单例的,也就是只有一个实例化对象,这都来源于它的私有化构造函数. 单例模式特点: 1.单例类只能有一个实例. 2.单例类必须自己创建自己的唯一实例. 3. ...

  7. 错误 在类中找不到main方法请将main方法定义为 public static void main String args否则JavaFX应用程序类必须扩展javafx-ap

    最近在使用eclipse编写java程序时遇到这样一个问题: 错误在类中找不到main方法,请将main方法定义为 public static void main(String[] args)否则 J ...

  8. rock-paper-scissors

    rock-paper-scissors维护三个前缀和,然后注意顺序,最后做差来确定可行的答案,因为答案比较小,可以考虑这种暴力做法,像这种方案数可以++的题真的不多,如果想不出来特别优秀的想法,不妨简 ...

  9. MyEclipse、Eclipse使用配置及部分问题

    简单总结一下myeclipse首次使用的配置,eclipse类似.总结的不是很全面,如有新的看法,欢迎下方留言. 最优设置 1.myeclipse激活 myeclipse.eclipse程序及激活工具 ...

  10. c++ <vector>学习

    https://www.cnblogs.com/mr-wid/archive/2013/01/22/2871105.html 具体参考上面博客,很详细,也是看他的.今天c++学习200%,项目开发0% ...