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 ...
随机推荐
- God 1.1.1 多线程之内存可见性
共享变量在线程间的可见性 synchronize实现可见性 volatile实现可见性 指令重排序 as-if-serial语义 volatile使用注意事项 synchronized和volatil ...
- JavaScript创建对象的方法
显示在浏览器中的控制台中. <script type="text/javascript"> //这个工厂方法返回一个新的"范围对象" functio ...
- mysql数据库左联的使用（一张数据库表关联到另外一张数据库表）
左联的数据库表,然后显示的在页面显示的jsp里面改一下代理种类ID的name,这样在页面上显示的不是id了,而是变成你修改了以后相对于的name了
- Luogu 1559 运动员最佳匹配问题（带权二分图最大匹配）
Luogu 1559 运动员最佳匹配问题(带权二分图最大匹配) Description 羽毛球队有男女运动员各n人.给定2 个n×n矩阵P和Q.P[i][j]是男运动员i和女运动员j配对组成混合双打的 ...
- MongoDB入门解析【学习记录】
刚开始学习mongodb,对笔记做了一个整理.是基于nodejs来学习的. 1.mongodb介绍 mongodb 是C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添 ...
- c#通用配置文件读写类（xml,ini,json）
.NET下编写程序的时候经常会使用到配置文件.配置文件格式通常有xml.ini.json等几种,操作不同类型配置文件需要使用不同的方法,操作较为麻烦.特别是针对同时应用不同格式配置文件的时候,很容易引 ...
- 20170713_js闭包/匿名函数/作用域
js:闭包 var getNum; function getCounter() { var n = 1; var inner = function () {return n++; } console. ...
- 中国(北方)大学生程序设计训练赛(第一周) （D E）
比赛链接 D题是个二分,每次check复杂度为O(n),类似于xdu_1068,只是一个是求积,一个是求商 #include<bits/stdc++.h> using namespace ...
- RxSwift 实战操作【注册登录】
前言 看了前面的文章,相信很多同学还不知道RxSwift该怎么使用,这篇文件将带领大家一起写一个 注册登录(ps:本例子采用MVVM)的例子进行实战.本篇文章是基于RxSwift3.0写的,采用的是C ...
- Java内存区域与对象创建过程
一.java内存区域 Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域.这些区域都有各自的用途,以及创建和销毁的时间,有的区域随着虚拟机进程的启动而存在,有的区域则 ...