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. 分享一次Oracle数据导入导出经历

    最近工作上有一个任务要修改一个比较老的项目,分公司这边没有这个项目数据库相关的备份,所以需要从正式环境上面导出数据库备份出来在本地进行部署安装,之前在其它项目的时候也弄过这个数据库的部署和安装,也写了 ...

  2. java使用dom4j对XML进行CURD操作

    要使用dom4j必须导入两个jar包: dom4j-1.6.1.jar jaxen-1.1-beta-6.jar 使用dom4j新建一个XML文件: /** * 利用dom4j完成新增一个xml文件 ...

  3. 狙杀ES6之开光篇

    前言 最近有很多小伙伴在后台留言说,闰土哥,是时候来一波干货了!(机智的你们似乎已经猜到我接下来要说什么了,哈哈-).没错,今天闰土为大家带来了久违的干货文章,而且是一个系列的哦!(文章系列较长,请自 ...

  4. docker~使用阿里加速器安centos

    回到目录 上一篇说了hub.docker.com里拉个镜像太,而阿里云为我们做了不少本国镜像,这样下载的速度就很惊人了,下面看一下在centos7下配置阿里云加速器的方法 打开服务配置文件 vi /e ...

  5. 在Linux下安装Oracle12c

    其实,对于oracle数据库和oracle实例的安装,借用图形化安装还是比较容易的,只是有个别地方需要特别注意外,其余的默认安装即可: 1.安装前的准备: 启动SSH工具: 先启动倒数第三个(想用图像 ...

  6. CloseHandle 函数--关闭一个句柄

    CloseHandle函数 来源:https://msdn.microsoft.com/en-us/library/windows/desktop/ms724211(v=vs.85).aspx 作用 ...

  7. 史上最易懂——ReactNative分组列表SectionList使用详情及示例详解

    React Native系列 <逻辑性最强的React Native环境搭建与调试> <ReactNative开发工具有这一篇足矣> <解决React Native un ...

  8. VMware workstation批量创建虚拟机和自动化安装操作系统（二）

    一. 简述 在上一篇<VMware workstation批量创建虚拟机和自动化安装操作系统(一)>中,主要介绍了VMware workstation自定义创建虚拟机的过程,和一些其他的有 ...

  9. margin用的时候常见问题

    margin1.     在同一个方向布局        同时设置左右margin的时候间距是两者之和        同时设置上下margin的时候间距是较大的那个,大者为尊2.    拖拽父级    ...

  10. 小程序server-3-搭建WebSocket 服务

    小程序server-3-搭建WebSocket 服务: 1.安装 Node 模块 使用 ws 模块来在服务器上支持 WebSocket 协议,下面使用 NPM 来安装: cd /var/www/wxp ...