在html中加动画效果,html5中css3新添加的动画效果
字css3中,动画着重要说的就是:transition属性,表示过渡
(1)
如何定义一个动画:
如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;//为这个div附加一个动画 名字为myfirst
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst//规定动画的执行过程
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
注释:本例在 Internet Explorer 中无效。
如何创建一个过渡
div
{
width:100px;
height:100px;
background:yellow;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
div:hover
{
width:200px;
}
请把鼠标指针放到黄色的 div 元素上,来查看过渡效果。
注释:本例在 Internet Explorer 中无效。
注释:这个过渡效果会在开始之前等待两秒。
在html中加动画效果,html5中css3新添加的动画效果相关推荐
- 在html5代码中加个时间,HTML5中video标签“事件”详解(实时监测当前播放时间)代码...
1.html代码:video后边几个元素,可处理ios 系统的兼容性 2.Js代码: //获取视频DOM元素 var myVideo = document.getElementById("m ...
- CSS中的长度单位和HTML5中多媒体标签的使用
CSS中的长度单位和HTML5中多媒体标签的使用 第一部分.长度单位 1.基本长度单位 2.长度单位的换算 第二部分.vw.vh.vmin.vmax 1.vw.vh.vmin.vmax的含义 2.vw ...
- email html css,在Email中防御性地使用HTML5和CSS3的指南
"在Email中不能使用HTML5或CSS3". 由于它们"有限"的支持,这已成为邮件设计行业的一个普遍共识.然而,我们现在可以说它是一个完全荒唐的说法. 尽管 ...
- html5中怎么让文字旋转动画效果图,HTML5中实现的CSS 3D文字旋转动画
一个基于HTML5的网页文字3D旋转动画效果,支持中文和英文字符,浏览请注意要使用支持CSS3技术的浏览器,比如Opera.Chrome等,主要结合transition 和 animation来实现, ...
- html5 加载svg,HTML5 SVG应用(1)——loading效果
先看一下效果: 链接 代码: y="0px" width="40px" height="40px" viewBox="0 0 40 ...
- html图标动画效果,html5 svg炫酷图标变形动画特效
这是一款效果非常炫酷的html5 svg炫酷图标变形动画特效.类似的效果有:html5 svg和css3超酷图标动画特效. 使用方法 1.添加一组SVG图标到你的HTML文件中. 2.通过调用new ...
- php中的ol标签,html5中ol标签的用法详解
这篇文章主要介绍了详解HTML5中ol标签的用法,是HTML5入门学习中的基础知识,需要的朋友可以参考下 定义和用法 标签定义有序列表. HTML 4.01 与 HTML 5 之间的差异 在 HTML ...
- html5中api有什么,HTML5中的API概览
HTML5中的API概览 整理一下HTML5中的常见API. 前言 HTML5中提供了一些功能强大的API,在不考虑兼容性的情况下,比起原生js实现更加简单,比起jQuery可以少引入包,这里整理几个 ...
- 如何在html中加视频,在HTML中添加视频的代码
参数和属性 下列标 记属性和参数描述了由"发布"命令创建的 HTML 代码.在编写自己的用于显示 Flash 内容的 HTML 时,可以参考此列表.除非特别说明,否 则所有条目都同 ...
最新文章
- ubuntu 16.04 ROS + kinect v2 安装
- Webwork 学习之路【07】文件上传下载
- Windows phone 应用开发[12]-Pex 构建自动化白盒测试[下]
- CentOS6.2安装LAMP+DRUPAL网站(2)
- 直播的学习与使用-----采集
- root用户安装的软件在普通用户不生效
- Spring AOP--Aspect的CGLib方式
- php unset函数 赋值 null来销毁变量
- FPGA笔记(八)-驱动12864
- 计算机网络自顶向下 1
- SpringBoot系列之对Excel报表的校验提示
- java DTO对象与PO对象的相互转换
- 直击GITC2018 尚德机构苏万松:从消费互联网到产业互联网
- Java Swing界面设计UI(全)
- petalinux添加AD9361驱动
- word题注编号格式从仅数字顺序编号到包含章节号编号
- 关于表格分页缓存数据
- 前端upload标签使用方法
- 计算两幅图之间的旋转角
- Cannot open channel to 2 at election address zj03/192.168.8.132:3888