css3中的animation属性动画效果代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css3的animation功能</title>

    <style>

        div{

            background:#ff0000;

            color:white;

            width:200px;

            position:absolute;

            top:200px;

            left:200px;

        }

        @-webkit-keyframes myTest {

            /*开始帧*/

            0%{

                background:#ff0000;

                transform: rotate(0deg);

            }

            25%{

                background:#0000ff;

                transform:rotate(30deg);

            }

            50%{

                background:#fff000;

                transform:rotate(0deg);

            }

            75%{

                background:#000000;

                transform:rotate(-30deg);

            }

            100%{

                /*结束帧*/

                background:#00ff00;

                transform:rotate(0deg);

            }

        }

        div:hover{

            -webkit-animation:myTest 5s linear;

        }

    </style>

</head>

<body>

<div>this is a test text</div>

</body>

</html>

css3中的transition属性动画效果:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>transition属性</title>

    <style>

        /*transition 属性是一个简写属性，用于设置四个过渡属性：*/

        /*transition-property:规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）*/

        /*transition-duration:规定完成过渡效果需要多少秒或毫秒(请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。)*/

        /*transition-timing-function:规定速度效果的速度曲线(linear:匀速)*/

        /*transition-delay:定义过渡效果何时开始(延迟时间，默认0s)*/

        div{

            background:#fff000;

            width:200px;

            transition: background 3s linear,color 1s linear,width 2s linear,transform 2s linear;

        }

        div:hover{

            background:#ff0000;

            color:#fff;

            width:600px;

            transform: rotate(360deg);

        }

    </style>

</head>

<body>

<div>this is a test text</div>

</body>

</html>

css3中的动画效果的更多相关文章

  1. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  2. CSS3中的动画效果-------Day72

    还记得么,在前面也曾实现过"仅仅用css让div动起来",还记得当时是怎么实现的么,是的,transition,针对的也比較局限,仅仅有旋转角度啊,长宽啊之类的,所以说,与其说是动 ...

  3. css3中的动画功能

    直接用我的一段代码演示下css3中实现动画效果的事例,让一个div自动旋转起来 代码如下: <!doctype html> <html lang="en"> ...

  4. css3实现的3中loading动画效果

    一.css3中animation动画各种属性详解: animation Value:     [<animation-name> || <animation-duration> ...

  5. CSS3中的动画功能（一）

    css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...

  6. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  7. 25个CSS3 渐变和动画效果教程

    随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...

  8. CSS3中的动画

    CSS3中的动画包括两种: Transition(过渡) Animation(动画) 这两种方法都可以让元素动起来,功能类似,但是稍有区别: Transition只定义某一个元素的开始状态和结束状态 ...

  9. 最简化模型——css3分阶段动画效果(经过实测)

    body {    background: #dcdcdc;    -webkit-animation: colorin 5s; /* chrome调用属性 */    animation: colo ...

随机推荐

  1. com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Table 'portal.hibernate_sequence' doesn't exist, 谈谈主键自增的方式

    最近几天几天做项目用到了Spring Data JPA,确实是个好东西,省了很多力气.但是由于刚开始用,也遇到不少头疼的问题,如下,调用JpaRepository接口的save方法保存一个对象到数据库 ...

  2. Go语言学习笔记（三）数组 & 切片 & map

    加 Golang学习 QQ群共同学习进步成家立业工作 ^-^ 群号:96933959 数组 Arrays 数组是同一种数据类型的固定长度的序列. 数组是值类型,因此改变副本的值,不会改变本身的值: 当 ...

  3. 介绍一个全局最优化的方法：随机游走算法(Random Walk)

    1. 关于全局最优化求解   全局最优化是一个非常复杂的问题,目前还没有一个通用的办法可以对任意复杂函数求解全局最优值.上一篇文章讲解了一个求解局部极小值的方法--梯度下降法.这种方法对于求解精度不高 ...

  4. docker~docker-machine的介绍

    回到目录 国外的hub.ducker.com速度确实有些慢,还好,有咱们的阿里云,今天和大家聊聊通过添加docker-machine来改变docker的hub服务器,最终来加速咱们下载镜像的速度! 工 ...

  5. Android - 多语言自动适配

    Android为多语言适配提供了很大的方便.开发者不需要在代码中进行修改.只需要配置xml文件. res --> values 其中存放有xml文件.一般这些都是英文的字符串.我们可以存放其他语 ...

  6. synchronized优化

    重量级锁 synchronized关键字 前文解释了synchronized的实现和运用,了解monitor的作用,但是由于monitor监视器锁的操作是基于操作系统的底层Mutex Lock实现的, ...

  7. （转）XML中必须进行转义的字符

    场景:在工作中接触到很多xml文件,为了更好的操作这些文件,所有很有必要熟知xml文件的相关语义. 1 引入 编写XML代码经常遗漏的常识: XML实体中不允许出现"&", ...

  8. （转）MyBatis在插入的数据有空值时，可能为空的字段都要设置jdbcType

    1 引言 前面的所有语句中你所见到的都是简单参数的例子,实际上参数是 MyBatis 非常强大的元素,对于简单的做法, 90% 的情况参数都很少,比如: <select id="sel ...

  9. echarts添加点击事件

    由于工作需要,需要用echarts 进行展示图表,却又个新的需求,要点击展示的地方,同时下面出现table展示内容 如图所示: 一开始找了好多博客,发现都不好用,大部分都是用到了 var ecConf ...

  10. IIS7.5应用程序池集成模式和经典模式的区别介绍

    IIS7.5应用程序池集成模式和经典模式的区别介绍 作者:  字体:[增加 减小] 类型:转载 时间:2012-08-07   由于最近公司服务器上需要将iis的应用程序池全部都升级到4.0的框架,当 ...