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

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


分享到:
评论

相关推荐

    web页面切换动画

    通过以上方法,我们可以创建出各种各样的Web页面切换动画,提升网站的整体视觉效果和用户交互体验。无论是在网页导航、模态对话框的打开关闭,还是在页面部分的动态更新中,都可以看到这些技术的广泛应用。实践过程...

    启动页面显示动画

    在这个特定的场景中,"启动页面显示动画"指的是在启动页面上实现一种动态效果,以提升用户体验,吸引用户的注意力。这种动画效果通常是通过加载HTML内容并在WebView中展示来实现的。 WebView是iOS中的一个组件,它...

    Web页面中实现进度条

    实现Web页面中的进度条,通常涉及到HTML、CSS和JavaScript这三种技术的结合。下面我们将详细探讨如何使用这些技术来创建一个功能齐全且美观的进度条。 首先,我们需要使用HTML来构建进度条的基本结构。HTML5引入了...

    web前端JavaScript实现魔方动画

    魔方是一种复杂的三维拼图玩具,而将其转化为动画效果则需要利用JavaScript的动态特性以及CSS动画来实现图片的移动和旋转。以下是你需要了解的关键知识点: 1. **HTML结构**:首先,你需要创建一个HTML页面来承载...

    7个异常精美的Web前端动画效果的实现(一)

    在本文中,我们将深入探讨七个精美的Web前端动画效果,这些效果可以显著提升用户体验和网站的视觉吸引力。作为Web开发的重要组成部分,前端动画不仅能够使用户界面更具动态性,还能帮助引导用户注意力,提高交互性。...

    纯js实现页面返回顶部的动画(超简单)

    此外,这种简单的动画实现方式适用于基本的页面操作,对于用户体验要求更高的现代Web应用来说,可能需要更加细腻和多样化的动画效果,这时候可能需要借助于CSS3的动画(@keyframes)、transform属性来实现更复杂的...

    web端炫酷的30个前端动态加载页_2020炫酷的页面_web加载画面_eachxsz_web开发_页面炫酷打开_

    动态加载页面,又称为加载动画或进度指示器,是在内容完全加载之前展示的一种临时界面。这些设计通常包含动态图形、动画或者进度条,能够告知用户系统正在处理请求,同时也能缓解用户对加载时间过长的焦虑感。2020年...

    H5多种加载效果loading,H5页面加载中动画

    H5加载效果,也称为“loading”或“预加载”,是指在页面内容完全加载之前显示的一种视觉反馈。它通常包含一个动效,让用户知道页面正在加载,从而减少用户因等待而产生的不耐烦感。这些动效可以是简单的百分比...

    web页面设计报告

    在“Web页面设计报告”中,我们可以深入探讨Web开发的基础知识,特别是针对初学者和希望进一步了解网页设计的IT专业人士。这份报告包含了实践性的课程内容,涵盖了基础的HTML(超文本标记语言)和CSS(层叠样式表)...

    Web上的动画堆栈视图类似于iOS中的视图

    在Web开发领域,动画堆栈视图是一种常见且强大的设计元素,它允许用户在多个视图之间进行平滑过渡,这种交互方式与iOS应用中的视图控制器导航有异曲同工之妙。在这个场景中,我们看到的"react-gesture-stack-master...

    html5+css3 animation制作各种页面过渡切换动画效果

    在制作页面过渡切换效果时,我们通常会使用CSS3的`transition`属性作为辅助,它处理元素从一种样式到另一种样式的平滑过渡。当结合`@keyframes`规则,我们可以创建自定义动画。`@keyframes`允许开发者定义动画在不同...

    Silverlight 页面跳转动画简单示例

    在本文中,我们将深入探讨Silverlight中的页面跳转动画,这是一种增强用户体验的高效技术。Silverlight,由微软开发,是一款跨平台的插件,用于在Web浏览器中创建丰富的交互式媒体和应用程序。它提供了强大的图形...

    html5实现的页面滚动图片动画加载特效源码.zip

    HTML5是一种先进的网页标记语言,它为Web开发者提供了丰富的功能和强大的工具,使得网页制作更加动态、交互且高效。在本资源"html5实现的页面滚动图片动画加载特效源码.zip"中,我们可以深入探讨HTML5如何实现页面...

    Web前端学习小Demo,404页面小动画

    在Web开发领域,404页面是用户访问不存在的URL时看到的一种常见错误页面。这个"Web前端学习小Demo,404页面小动画"是一个很好的实践案例,它结合了HTML和CSS3技术来创建一个既有趣又具有交互性的404错误页面。下面将...

    精彩编程与编程技巧-Web动画图像分解在VB动画设计中的应用...

    以下是一段VB代码示例,展示了如何在VB中实现Web动画图像分解的功能: ```vb Private Sub Form_Load() Rotateflag = 1 ' 初始化显示标志 Currenteyes = 0 ' 当前显示的图像索引 End Sub Private Sub Tmrtimer_...

    页面跳转动画

    "翻转"动画则给用户带来一种3D视觉感受,使得页面仿佛在空间中翻转。在iOS中,可以使用`CATransition`结合`transform`属性,设置旋转和平移来实现翻转效果。Android同样可以利用`ObjectAnimator`与`Matrix`来完成...

    web前端实现189电信网站

    Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。在189电信网站中,Ajax可以用于: 1. 实时通信:例如,用户查询话费余额、套餐剩余流量等,数据实时...

    js实现动画效果的弹出窗口

    本实例中的"js实现动画效果的弹出窗口"是一种利用JavaScript、Prototype库以及动画技术来构建的动态对话框功能。它能够以左右上下扩张的动画效果打开一个IFrame,展示用户指定的页面,并在页面切换时保持流畅的动画...

    web页面所有特效类

    10. WebP格式:这是一种现代的图片格式,提供更好的压缩效率和透明度支持,且支持动画,可以显著提升网页性能。 通过学习和实践这些技术,开发者可以创建出引人入胜、交互性丰富的Web页面,提升用户的浏览体验。这...

    web页面加载等待页面

    在网页设计中,"web页面加载等待页面"是一种优化用户体验的重要技术。当用户访问一个网页时,如果页面内容较多或者需要加载的数据复杂,可能会导致页面加载时间较长,这时加载等待页面就能发挥其作用,它会在实际...

Global site tag (gtag.js) - Google Analytics