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 ...
随机推荐
- 流行框架(angularj基础)
- php七牛批量删除空间内的所有文件方法
相信大家都在使用七牛的免费云存储服务的同时,有清空七牛云存储镜像文件或者批量删除七牛云空间文件的需求,该怎么做?官方的工具好像并没有提供批量删除的功能,七牛云官方给出的建议是删除空间,再新建一个这样太 ...
- Java 9 揭秘（11. Java Shell）
Tips 做一个终身学习的人. 在本章节中,主要介绍以下内容: 什么是Java shell JShell工具和JShell API是什么 如何配置JShell工具 如何使用JShell工具对Java代 ...
- 字符串(String)
字符串 字符串就是用引号引起来的一段文字.字母.数字-- 例如: "这是字符串"."zheshizifuc"."6666" 使用字符串的方法 ...
- 【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...
- tensorflow elu函数应用
1.elu函数 图像: 2.tensorflow elu应用 import tensorflow as tf input=tf.constant([0,-1,2,-3],dtype=tf.float3 ...
- （转）Linux命令grep
场景:grep命令在文件搜索中经常会使用到,所以熟练掌握该命令对于日常日志搜索相当有必要! Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.g ...
- 【RequireJS】requireJS的基础知识
1. requirejs的优点 1)异步加载依赖的文件 2)管理文件加载顺序 3)管理文件加载的包路径 2. requirejs下载地点 https://github.com/jrburke/requ ...
- 用Python识别网站使用的技术
在进行爬虫之前,一般我们都会对要爬取的网站进行识别,识别我们要爬取的网站所使用到的技术,这样才能更有利于我们爬虫工作的进行.所以在此介绍以下如何用Python去识别一个网站所使用到的技术. 环境:Py ...
- Nlpir Parser智能语义分析系统文本新算法
文本挖掘或者文档挖掘是一个从非结构化文本信息中获取用户感兴趣或者有用的模式的过程文本挖掘涵盖多种技术,包括信息抽取,信息检索,自然语言处理和数据挖掘技术.它的主要用途是从原本未经使用的文本中提取出未知 ...