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 ...
随机推荐
- xhr.readyState就绪状态
0:初始化,XMLHttpRequest对象还没有完成初始化 1:载入,XMLHttpRequest对象开始发送请求 2:载入完成,XMLHttpRequest对象的请求发送完成 3:解析,XMLHt ...
- Tomcat服务器无法启动socket监听端口
最近生成一个新的web服务器,在启动后无法启动socket监听,检查程序本身无问题, 找原因,只是发布时搞错.处理如下: 1.在Eclipse平台 删除原来的web server; 2.新建serve ...
- Oracle锁表处理操作笔记
--查看锁表进程SQL语句1: SELECT sess.sid, sess.serial#, lo.oracle_username, lo.os_user_name, ao.object_name, ...
- mybatis代理类Demo
前言 简单实现通过代理接口来实现对数据的查询demo,也是对mybatis的一个熟练.首先是编写接口代理. public interface IBookMapper { List<BookMod ...
- Aspose.words 书签定位
1. 简介 Aspose.words 可以在不使用 Microsoft.Word 的情况下生成.修改.转换.打印文档.不依赖office组件,这一点给我们提供了极大的便利性,可以简单的引入 DLL(D ...
- 一个爬取Bing每日壁纸的python脚本
1. 背景 Bing搜索每天的背景图片有些比较适合做桌面,但是有的提供下载有的不提供下载.每天去点击下载又不太方便,所以第一次学习了一下python爬虫怎么写,写的很简单. 2. 相关技术 2.1 P ...
- （转）mq经验总结-转
场景:学习mq相关的知识,发现这是一篇总结性很强的文章,转过来学习学习! 1 mq经验总结 首先了解什么是mq?mq的作用是什么? mq是通讯中间件.他的作用是省去开发人员开发通讯工具的时间,节省开发 ...
- (转)java提高篇(二)-----理解java的三大特性之继承
在<Think in java>中有这样一句话:复用代码是Java众多引人注目的功能之一.但要想成为极具革命性的语言,仅仅能够复制代码并对加以改变是不够的,它还必须能够做更多的事情.在这句 ...
- 【firefox】关闭firefox缓存
在Firefox中关闭缓存 看看这里 在地址栏输入:about:config 然后在过滤器中输入:browser.cache.disk.enable 解释:When a page is loaded, ...
- IT人不要一直做技术
我现在是自己做,但我此前有多年在从事软件开发工作,当回过头来想一想自己,觉得特别想对那些初学JAVA/DOT.NET技术的朋友说点心里话,希望你们能从我们的体会中,多少受点启发(也许我说的不好,你不赞 ...