css3中的动画效果
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中的动画效果的更多相关文章
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- CSS3中的动画效果-------Day72
还记得么,在前面也曾实现过"仅仅用css让div动起来",还记得当时是怎么实现的么,是的,transition,针对的也比較局限,仅仅有旋转角度啊,长宽啊之类的,所以说,与其说是动 ...
- css3中的动画功能
直接用我的一段代码演示下css3中实现动画效果的事例,让一个div自动旋转起来 代码如下: <!doctype html> <html lang="en"> ...
- css3实现的3中loading动画效果
一.css3中animation动画各种属性详解: animation Value: [<animation-name> || <animation-duration> ...
- CSS3中的动画功能（一）
css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
- 25个CSS3 渐变和动画效果教程
随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...
- CSS3中的动画
CSS3中的动画包括两种: Transition(过渡) Animation(动画) 这两种方法都可以让元素动起来,功能类似,但是稍有区别: Transition只定义某一个元素的开始状态和结束状态 ...
- 最简化模型——css3分阶段动画效果(经过实测)
body { background: #dcdcdc; -webkit-animation: colorin 5s; /* chrome调用属性 */ animation: colo ...
随机推荐
- dbgrid数据显示和数据源不同
dbgrid数据显示和数据源不同,在ODBC配置时如下设置,去掉勾
- ubuntu16.04安装不上有道词典的解决办法
转自:http://www.linuxdiyf.com/linux/21143.html ubuntu16.04安装不上有道词典,提示: le@hu-pc:~/下载$ sudo dpkg -i you ...
- MyBatis 详解（一对一，一对多，多对多）
1.什么是MyBatis? MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且 ...
- Storm源码阅读之SpoutOutputCollector
不得不说storm是一个特别棒的实时计算框架.为了对后文理解的方便,先说几个storm中的术语: Topology:拓扑图或者拓扑结构.在storm中它通过消息分组的分式连接Spout和Bolt节点定 ...
- tensorflow官方文档中的sub 和mul中的函数已经在API中改名了
在照着tensorflow 官方文档和极客学院中tensorflow中文文档学习tensorflow时,遇到下面的两个问题: 1)AttributeError: module 'tensorflow' ...
- ORACLE - 管理表空间和数据文件
ORACLE表空间是一个逻辑分区,一个数据文件只能属于一个表空间,一个表空间可以拥有多个数据文件. 一般情况下,如果一个实例分配给多个应用使用,需要创建不同的表空间,每个用户使用自己的表空间. 一.表 ...
- 蓝桥杯比赛java 练习《立方变自身》
立方变自身 观察下面的现象,某个数字的立方,按位累加仍然等于自身.1^3 = 1 8^3 = 512 5+1+2=817^3 = 4913 4+9+1+3=17... 请你计算包括1,8, ...
- 感知器算法--python实现
写在前面: 参考: 1 <统计学习方法>第二章感知机[感知机的概念.误分类的判断] http://pan.baidu.com/s/1hrTscza 2 点到面的距离 3 梯度 ...
- python教程6-3：排序
(a).输入一串数字.并从大到小排列. (b).跟a一样,不过要用字典序从大到小排列. python35 PaiXu_6_3.py PaiXu_6_3.py #coding=utf-8 import ...
- 奇怪的道路[JXOI2012]
题目描述 小宇从历史书上了解到一个古老的文明.这个文明在各个方面高度发达,交通方面也不例外.考古学家已经知道,这个文明在全盛时期有n座城市,编号为1..n.m条道路连接在这些城市之间,每条道路将两个城 ...