CSS3动画变形Animations
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3动画功能Animations</title>
</head>
<style> #animations{
width:200px ;
height:200px ;
background-color: #3598DC;
}
@-webkit-keyframes mycolor{
0%{
background-color: #dc3646; /*加载百分之0%,变色,加宽,旋转20度*/
width:230px ;
-webkit-transform:rotate(20deg);
}
20%{
background-color: #70dc27; /*加载百分之20%,变色,加宽,旋转60度*/
width:250px ;
-webkit-transform:rotate(60deg); }
50%{
background-color: #a628dc; /*加载百分之50%,变色,加宽,旋转20度,移动30px,30px,*/
width:260px ;
-webkit-transform:rotate(20deg);
-webkit-transform:translate(30PX,30PX);
}
80%{
background-color: #dcc419;
width:280px ;
-webkit-transform:rotate(0deg);
-webkit-transform:translate(50PX,50PX);
}
100%{
background-color: #dc3646;
width:300px ;
-webkit-transform:rotate(180deg);
}
}
#animations:hover{
-webkit-animation-name: mycolor; /*关键帧名字*/
-webkit-animation-duration: 5s; /*变换延续时间*/
-webkit-animation-timing-function: linear; /*变换的速率变化*/
-webkit-animation-iteration-count: 2;
} </style>
<body>
<div id="animations"></div> <!--<div id="rotat">rotate旋转</div>-->
<!--<div id="scale">scale缩放</div>-->
<!--<div id="skew">skew 倾斜</div>-->
<!--<div id="translate">translate移动</div>-->
<!--<p>旋转,倾斜 缩放 移动 transform</p>-->
</body> </html>
CSS3动画功能Animations
CSS3动画变形Animations的更多相关文章
- css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。
transitions(过渡) 被应用于元素指定的属性变化时,该属性经过一段时间逐渐的过渡到最终想要的值. 主要包括四个属性: 执行变换的属性:transition-property 变换延续的时间: ...
- CSS3动画变形transition
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- css3中变形与动画(三)
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- css3动画由浅入深总结
阅读目录 一:过渡动画---Transitions 二:Animations功能 三:translate(tx,ty) 四:scale(x,y) 五:rotate(x): 5.1:skew(x,y): ...
- CSS3 动画基础
该文为译文转载,原文地址:http://tech.163.com/mobile/10/0106/09/5SB96QSM00112K88.html 译文:你需要知道的CSS3 动画技术 原文:Wha ...
- 如何使用js捕获css3动画
如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...
- CSS3动画几个平时没注意的属性
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...
- JavaScript - 基于CSS3动画的实现
在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...
随机推荐
- thinksns解析1
1.数据库 这儿是关于数据库的封装,还是挺厉害的,最终select中完成sql语句的封装,最后由query来完成底层api 2.初始化过程 sns也是通过框架完成显示调用,一开始通过i ...
- Android中WebView的JavaScript代码和本地代码交互的三种方式
一.Android中WebView的漏洞分析最近在开发过程中遇到一个问题,就是WebView使用的时候,还是需要解决之前系统(4.2之前)导致的一个漏洞,虽然现在这个系统版本用户很少了,但是也不能忽视 ...
- 使用PHP对文件进行压缩解压(zip)
使用虚拟主机进行文件上传时最常用的工具莫过于FTP了,但是使用FTP有一个弊端就是文件太多时上传或下载速度比较慢,如果上传时将文件打包,上传后在 空间解压缩,同样下载前将文件打包压缩以压缩包的形式下载 ...
- JavaScript学习心得(二)
一选择DOCTYPE DOCTYPE是一种标准通用标记语言的文档类型声明,目的是告诉标准通用标记语言解析器使用什么样的文档类型定义(DTD)来解析文档. 网页从DOCTYPE开始,即<!DOCT ...
- SQL的四种语言和数据库范式
1. SQL的四种语言 DDL(Data Definition Language)数据库定义语言 CREATE ALTER DROP TRUNCATE COMMENT RENAME DML(Data ...
- Python3.4使用MySql
如何在Django1.6结合Python3.4版本中使用MySql django默认的mysql连接是Mysqldb,悲催的是此版本只支持到python2.7,oracle官方的mysql-conne ...
- imacros实现Excel数据自动录入到网页中
一.工具选择 最近接到一个项目,需要将excel数据逐条录入.保存到网页中.经过搜集资料,能实现功能的大概有以下几种方式,按键精灵.autoit.imacros.python+selenium. 按键 ...
- iOS出现 Undefined symbols for architecture armv7 std::basic_string<char, std::char_traits<char>
Undefined symbols for architecture i386: “_OBJC_CLASS_$_XXX”, referenced from: objc-class-ref in XXX ...
- prototype.js 源码解读(02)
如果你想研究一些比较大型的js框架的源码的话,本人建议你从其最初的版本开始研读,因为最初的版本东西少,易于研究,而后的版本基本都是在其基础上不断扩充罢了,所以,接下来我不准备完全解读prototype ...
- Girls' research
hdu3294:http://acm.hdu.edu.cn/showproblem.php?pid=3294 题意:就是给你一个串,然后求一个最长的回文串,输出起点及串,但是这里在之前要转化一下. 题 ...