首页

关于

创建平滑的HTML5动画

创建平滑的HTML5动画

现代浏览器都内置了专用动画技术,Martin Görner为您展现四种最棒的实例。

创建平滑的HTML5动画

现代移动 操作系统将用户接口动画化,并已达到了电脑端交互的标准--精选流畅的动画,体现出沉浸效果以及支持直观的交互。我们都想当然的认为,可以设置一个列表, 使之带有运动特性,用手指轻轻一推,它就如同有重量和惯性一样运动起来,直到遇到边缘再反弹回来一点。但是,在网络上,我们还达不到这样的效果。

接 受事实吧,现有网上的动画经常被视作UI灾难,还在使用二十年前陈旧的<blink>标签技术。加入Flash有点帮助,不过它缺乏HTML DOM集成,都变成了不美观的800×600分辨率,并且JavaScript DOM操作还有其标志性的5帧/秒(fps)动画率--真是绝望啊!

改变

2013年,现代浏览器内置了专用动画技术,达到60 fps。是时候去忘掉过去,开始构建美妙的UI动画体验了。我将展示四个动画技术,帮助你决定,哪一个更适合你的项目。

CSS3动画--3D

让我们从最简单的声明式技术开始:CSS3。这里不需要JavaScript,存CSS,加上一点现代手段。

CSS通过两种基本属性来声明动画:过渡和动画。过渡属性通知浏览器计算两种状态(由各自CSS定义)间的中间帧。动画通过改变元素CSS触发。比如,当你以编程方式改变它的层,或启动一个:hover…

标签: html, html5, 动画效果, css3动画, css

阅读更多

创建CSS3警示框渐变动画

创建CSS3警示框渐变动画

在线演示 在线下载

现代的网页设计技术已经允许开发人员在大多数浏览器中快速实现所支持的动画,其中消息警示是非常普遍的。由于默认的JavaScript警示框往往设计不佳和过于侵入式,这导致开发人员想到找出一个更友好的用户界面解决方案。在本教程中,我会解释如何可以将CSS3警示框放在页面主体的顶部,然后, 用户可以通过点击让警示框消失,最终从DOM中删除。作为一个有趣的附加功能,我还提供了按钮,在这里你可以点击到页面顶部追加新的警示框。查看以下示例 演示,进一步了解我们的设计概念。

在线演示--下载源代码

创建CSS3警示框渐变动画

创建页面

首先我们需要命名"index.html"和"style.css"两个文件夹,我引用了由谷歌代码内容分发网络承载的最新 jQuery库。HTML相当简单,因为我们只需要创建一些虚拟文本警示框。所有的JavaScript已添加到页面底部,以减少HTTP请求。

<!doctype html>
<html…

标签: css, jquery, css3, 网页设计, 动画效果

阅读更多

CSS3实现超酷的图像动画变换特效

用CSS3实现图像动画变换

在线演示 在线演示 本地下载 

今天我们想要分享一些实验阶段的3D图像变换效果给大家,主要使用了CSS3 3D动画和jQuery

怎样起作用的?

给定一组图片,我们使用te-cover将添加第一个图片到包装器中。使用JavaScript控制过渡类,显示在te-transition包装器中的图片。这是第一个例子:

<div id="te-wrapper" class="te-wrapper">
<div class="te-images">
<img src="images/1.jpg"/>
<img src="images/2.jpg"/>
<img src="images/3.jpg"/>
<img src="images/4.jpg"/>

标签: css3, 动画效果, 动画转换, 3D, 3D动画

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.