`
s20001
  • 浏览: 6338 次
社区版块
存档分类
最新评论

Web页面中实现简单动画的一种方法

阅读更多
背景: 整个div 线性移动;支持整块缩小放大

在chrome 和firefox 中比较容易实现, 可以直接定义块的CSS属性:-transition, 在js代码中直接修改原始div块的位置或-transform即可。

而在IE中,该属性无效,不得不自己实现该效果。

chrome和firefox实例代码:

Html代码
<div class="g_transition" style="z-index: 5;-webkit-transform: matrix(1, 0, 0, 1, 0, 0);left: 265px;top: 0px;">

//根据需要显示的内容

</div>

CSS部分片段:
.g_transition {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

说明:当改变div 中的位置或transform时,将出现动画效果。注意:firefox 使用:-moz-前缀,如:-webkit-transform 需要改成:-moz-transform...

在IE中,可以使用时钟来修改位置和缩放比例实现。

效果参见:
http://www.giisoo.com/?v=x&t=shop&s=0&q=%E8%B4%9D%E5%B0%94%E7%9A%AE%E5%85%B7&n=30&v=1&di=-1


分享到:
评论

相关推荐

    JS、live2d,在web页面上的live2d动画萌娘

    在web页面生成一个live2d动画,Live2D是一种应用于电子游戏的绘图渲染技术,技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像,对于以动画风格为主的冒险游戏来说...

    基于JavaScript技术在Web页面实现放大镜效果

    在Web页面中,JavaScript技术的应用非常广泛,可以实现很多的动态交互效果。JavaScript 技术可以实现很多网页的特效,例如,状态栏、轮播图、tab选项卡等效果。放大镜效果是网页中非常常见的一种交互效果,用户可以...

    stickymate:Stickymate是一种工具,旨在帮助Web开发人员无需JavaScript知识即可轻松创建基于滚动的动画,只需直接在HTML标记中设置动画参数即可。

    Stickymate是一种工具,旨在帮助Web开发人员无需JavaScript知识即可轻松创建动画,只需直接在HTML标记中设置动画参数即可。 Stickymate结合了扩展的粘性定位和基于滚动的动画功能,因此它可以捕获屏幕上的元素并在...

    单页面和多页面开发及应用

    -搜索引擎优化:单页面需要单独方案,实现较为困难,不利于SEO搜索,可利用与SSR优化,多页面实现方法容易 -适用范围:单页面高要求的体验度,追求页面的流畅,多页面追求高度支持搜索引擎的应用 -开发成本:单...

    利用Web动画API和CSS动画的自定义React路由器。-JavaScript开发

    更平滑的平滑路由器一种自定义的React路由器,它利用Web动画API和CSS动画。 查看演示! 考虑到动画路线过渡而构建的功能使用Web Animat平滑器平滑路由器一个利用Web动画API和CSS动画的自定义React路由器。 查看演示...

    Web Chart 极品web报表控件收集Web+Chart

    FusionCharts - FusionCharts 是一个跨浏览器和跨平台的flash图表组件,能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面 甚至PPT调用. 几乎所有你知道的语言它都支持。 ? JFreeChart -...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    SSH 为 Struts+Spring+Hibernate的一个集成框架,是目前较流行的一种Web应用程序开源框架。其中使用Struts作为系统的整体基础架构,负责MVC的分离,在Struts框架的模型部分,控制业务跳转,利用Hibernate框架对持久...

    PearPlayer是js实现流媒体播放

    JavaScript是一种高级的、动态的、弱类型的编程语言,主要用于在Web页面上实现交互功能。它是一种脚本语言,能够直接嵌入到HTML代码中,并由浏览器解释执行。JavaScript通常被用来为网页增加动态效果、数据验证、...

    html+css+bootstrap 商城前端页面设计web端,墨镜网页设计模板 Cools.zip

    HTML,是一种制作万维网页面的标准语言,它消除了不同计算机之间信息交流的障碍; CSS,可以帮助把网页外观做得更加美观; JavaScript,是一种轻量级的解释型编程语言; jQuery,使用户能更方便地处理HTML documents...

    html+css+bootstrap实现电商-食品电商网站web模板Freshmat.zip

    HTML,是一种制作万维网页面的标准语言,它消除了不同计算机之间信息交流的障碍; CSS,可以帮助把网页外观做得更加美观; JavaScript,是一种轻量级的解释型编程语言; jQuery,使用户能更方便地处理HTML documents...

    实现页面转换视图切换动画

    实现各种页面过渡切换效果。前4种是UIView,后面都是 Core Animation。 下面8种是传说中的私有API(作者测试过,能通过审核,请放心使用)。所有效果整合到一个例子里,代码较清晰,适合新手阅读。

    在移动Web页面中使用CSS固定页脚

    一种单页应用的页面结构 面向移动端的单页应用(Single Page Web Application),从页面代码上来说,会使用较一般网页不同的结构。单页应用并不是说应用只需要一个视图,而是说可以将组成应用的多个视图集合在一个...

    网页与Web程序设计 课件 ppt 机械工业出版社 part1

    15.1.1 创建逐帧动画的几种方法 284 15.1.2 制作过程 284 15.2 形状补间动画 287 15.2.1 创建形状补间动画的方法 287 15.2.2 制作过程 287 15.3 动作补间动画 288 15.3.1 创建动作补间动画的方法 288 15.3.2...

    Web实验报告(2).doc

    Web实验报告 课题:网页设计与制作 专业:通信工程 班级: 学号: 一.实验任务: 设计制作一个《网页设计与制作》精品课程网站 二.实验要求: (1)站点目录: 要求层次分明,不能将内容都放在站点根目录下;不要...

    html5酷炫线条背景动画特效.zip

    5种酷炫的网格线条动画特效。使用three.meshline库创建的动画WebGL线。设置动画并构建这些线条创建自己的动画效果集合文字,形成一个酷炫的线条背景动画特效。

    iOS的导航栏子类,主要是为了实现类似淘宝的转场动画效果.zip

    iOS的导航栏子类,主要是为了实现类似淘宝的转场动画效果,可以实现导航栏跟随页面滑动消失(系统原生的效果是导航栏固定在上面,可以参看微信,但是在复杂场景下,在不停pop的时候由于导航栏有时候需要展示有时候不...

    web管理控制台设计,响应式html管理系统模板 cassie.zip

    HTML,是一种制作万维网页面的标准语言,它消除了不同计算机之间信息交流的障碍; CSS,可以帮助把网页外观做得更加美观; JavaScript,是一种轻量级的解释型编程语言; jQuery,使用户能更方便地处理HTML documents...

    一个旅游网站的响应式静态页面Tour4U.zip

    前端技术: ... CSS :用于设计网页外观和样式的样式表语言。 JavaScript:用于在网页上...Python:一种多用途编程语言,在Web开发中常用。 Ruby on Rails:一个基于Ruby编程语言的Web应用框架,提供了高效的开发工具。

    asp.net知识库

    .NET20 一种简单的窗口控件UI状态控制方法 翻译MSDN文章 —— 泛型FAQ:最佳实践 Visual C# 3.0 新特性概览 C# 2.0会给我们带来什么 泛型技巧系列:如何提供类型参数之间的转换 C#2.0 - Object Pool 简单实现 ...

    医疗和医院办公管理页面ui模板 Xray.zip

    HTML,是一种制作万维网页面的标准语言,它消除了不同计算机之间信息交流的障碍; CSS,可以帮助把网页外观做得更加美观; JavaScript,是一种轻量级的解释型编程语言; jQuery,使用户能更方便地处理HTML documents...

Global site tag (gtag.js) - Google Analytics