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 ...
随机推荐
- 原生封装ajax
01.声明一个全局变量 02.开始封装,判断参数 03.属性的var自定义 04.请求 01.请求行 02.请求头 03.请求发送 05.响应 01.事件监听onreadystatechange 02 ...
- centos+apache 2.x 开启gzip压缩
最近做了一个网站(PHP+Apache+MySQL),挂在百度云平台上面,基本配置是2G内存+5Mb带宽,每次打开主页都需要2-3s左右的时间,对于一个垂直搜索引擎来说,用户体验肯定会很差. 于是开始 ...
- usaco 2002 月赛 Fiber Communications 题解
Description Farmer John wants to connect his N (1 <= N <= 1,000) barns (numbered 1..N) with a ...
- HashMap源码浅析(jdk1.8)
HashMap是以key-value键值对的形式进行存储数据的,数据结构是以数组+链表或红黑树实现. 数据结构图如下: 一.关键属性 HashMap初始化和方法使用的属性. /** * 默认初始容量1 ...
- Js中的数据属性和访问器属性
Js中的数据属性和访问器属性 在javaScript中,对象的属性分为两种类型:数据属性和访问器属性. 一.数据属性 1.数据属性:它包含的是一个数据值的位置,在这可以对数据值进行读写. 2.数据属性 ...
- 前端模块化工具--webpack使用感受
话说前头 webpack前段时间有听说一下,现在已经到了3.x的版本,自己没去接触.因为之前使用gulp来作为自己的项目构建工具.现在感觉gulp使用的趋势在减少.现在这段时间去接触了webpack, ...
- 基于腾讯Centos7云服务器搭建SVN版本控制库
基于腾讯Centos7云服务器搭建SVN版本控制库 最近在和小伙伴组队参加一个关于人工智能的比赛,无奈不知道怎么处理好每个人的代码托管问题,于是找到了晚上免费svn托管服务器的服务,但是所给的免费空间 ...
- Caused by: org.apache.catalina.LifecycleException: A child container failed during start
错误提示: 严重: A child container failed during start java.util.concurrent.ExecutionException: org.apache. ...
- Objective-C 使用核心动画CAAnimation实现动画
先来看看效果吧 整个核心动画就不多做介绍了,随便一搜就能有很多很详细的解释,主要使用以下四种 CABasicAnimation //经典动画 CAKeyframeAnimation //关键帧动画 C ...
- LeetCode-Minimum Path Sum[dp]
Minimum Path Sum Given a m x n grid filled with non-negative numbers, find a path from top left to b ...