动画——animation部分
动画部分是HTML5的新增部分，其特性是可以不借助js代码就可以单单凭借着css部分完成部分动态效果。其效果华丽，强大，炫酷无比，只要你想得到的动态效果都可以通过css3来完成。
<style>
.lizhi{
background: red;
width: 200px;
height: 200px;
border: 1px solid red;
margin-left: 0;
}
.tranition{
/*transition: all 1s linear;*/
transition-property: background,margin,border-radius;/*规定渐变的属性*/
transition-duration: 1s;/*渐变的时间*/
transition-timing-function:linear;/*匀速渐变*/
}
.lizhi:hover{background: yellow;
border-radius: 50% 50%;
margin-left: 60px;}
</style>
<body>
<div class="lizhi tranition">
</div>
</body>
以上部分就是代码，可以看出这里面并没有引入js。
动态效果全部在.tranition这个类里面
第一句：transition: all 1s linear;
这一句是简写，代表所有属性都可以调整，在1秒中执行完毕，执行速度为匀速
下面的几句：
transition-property代表属性，属性之间用逗号隔开，在这里没有声明的属性是不会有渐变效果的，例如如果将background去掉，那么当鼠标放上去的瞬间，这个div的颜色就会改变，而其他的属性则继续延迟执行。
transition-duration代表执行时间，一个完整地动画所需要的时间。
transition-timing-function代表运行时的速度，这个速度由来是根据贝塞尔函数来的，其中可选择由快到慢，由慢到块，匀速，或者自定义等等。
动画——animation部分的更多相关文章
- 动画animation的三个应用(漂浮的白云、旋转的星球、正方体合成)
× 目录 [1]漂浮的白云 [2]旋转的星球 [3]正方体合成 前面的话 前面介绍过动画animation的详细用法,本文主要介绍动画animation的三个效果 漂浮的白云 [效果演示] [简要介绍 ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- 精灵动画Animation对话框组成Idle动画的各精灵
精灵动画Animation对话框组成Idle动画的各精灵 1.3 精灵动画 场景中已经添加了精灵,现在是时候让让它动起来了.读者也许已经从精灵图集中,各精灵的命名中看出来了,这个精灵一共有两种动画状 ...
- Qt-4.6动画Animation快速入门三字决
Qt-4.6动画Animation快速入门三字决 Qt-4.6新增了Animation Framework(动画框架),让我们能够方便的写一些生动的程序.不必像以前的版本一样,所有的控件都枯燥的呆在伟 ...
- css3 动画(animation)-简单入门
css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...
- Android 动画animation 深入分析
转载请注明出处:http://blog.csdn.net/farmer_cc/article/details/18259117 Android 动画animation 深入分析 前言:本文试图通过分析 ...
- View 动画 Animation 运行原理解析
这次想来梳理一下 View 动画也就是补间动画(ScaleAnimation, AlphaAnimation, TranslationAnimation...)这些动画运行的流程解析.内容并不会去分析 ...
- CSS3动画属性：动画(animation)
一:动画(animation)的参数详解 由于上面用到了animation动画,这里详细介绍下这个animation的参数. 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗 ...
- 《The Cg Tutorial》阅读笔记——动画 Animation
这段时间阅读了英文版的NVidia官方的<The Cg Tutorial>,借此来学习基本的图形学知识和着色器编程. 在此做一个阅读笔记. 本文为大便一箩筐的原创内容,转载请注明出处,谢谢 ...
- amazeui学习笔记--css（常用组件15）--CSS动画Animation
amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...
随机推荐
- CSS，height:auto和height:100%有什么区别？
auto是随内容的高度而撑开的.100%是根据父级元素的高度来决定的.例如:<div style="height:100px;width:200px;"> <di ...
- HttpReceiveRequestEntityBody 使用应注意的地方
如果EntityBody数据很大,调用此函数是不能完全接收全部数据的,我们不能简单的判断 1: BYTE* pBuffer = new BYTE[4096]; 2: ZeroMemory(pBuffe ...
- redis数据类型：hashes
redis hash 是一个string类型的field和value的映射表. 它的添加.删除操作都是O(1)(平均),hash特别适合用于存储对象 将一个对象存储在hash类型总会占用更少的内存,并 ...
- 工作中用到的简单linux命令
1.rpm包查询.卸载.安装: rpm包查询 rpm -q 包名(不带版本号.后缀等) q----query rpm包卸载 rpm -e 包名(不带版本号.后缀等)e----erase rpm包安装 ...
- iOS中控制器的释放问题
iOS中控制器的释放问题 ARC工程是可以重写dealloc方法并被系统调用的,但不需要手动调用父类的dealloc,手写[super dealloc]方法会报错,事实上系统会自动帮你调用父类的dea ...
- 河南多校联合训练 南阳理工 1261 音痴又音痴的LT
描述 LT最近一直在无限循环薛之谦的歌,简直都中毒了!可是呢…他的歌LT还是不会唱(其实不止他的歌LT不会唱,所有人的歌LT都不会唱…因为LT是标准的音痴)可是LT又很喜欢唱歌(所以LT不仅是音痴还是 ...
- 【第三篇】学习 android 事件总线androidEventbus之发布事件，子线程中接收
发送和接收消息的方式类似其他的发送和接收消息的事件总线一样,不同的点或者应该注意的地方: 1,比如在子线程构造方法里面进行实现总线的注册操作: 2,要想子线程中接收消息的功能执行,必须启动线程. 3, ...
- 框架基础：ajax设计方案（二）---集成轮询技术
上一篇文章介绍了ajax技术核心方法,和跨域的问题(只要后台支持跨域默认post就可以),这篇文章讲解一下使用ajax实现的轮询技术,至于iframe,SSE服务器单向推送,以及webSocket ...
- ubuntu/linux 下 git 通过代理下载数据 （最简单的方式）
git国内访问较慢,走代理较快. 方法:git config --global http.proxy http://proxyuser:proxypwd@proxy.server.com:port_n ...
- eclipse新建workspace使用之前workspace的个性配置
为使新建的workspace(称作A)的配置,比如主题等等,和之前的workspace(称作B)的配置一样: . 关闭eclipse . 将A中.metadata/.plugins目录下所有文件.文件 ...