使用CSS3帧动画打造与众不同的响应式提交按钮


在现代的网页设计中,用户体验是一个热门的话题。特别是在移动手机的应用中,一个好的用户体验可以吸引住更多的用户。如果在页面中使用CSS animations制作一些特别的动画效果,可...
在现代的网页设计中,用户体验是一个热门的话题。特别是在移动手机的应用中,一个好的用户体验可以吸引住更多的用户。如果在页面中使用CSS animations制作一些特别的动画效果,可以起到画龙点睛的作用,使用户体验度大大的提高。

查看演示 下载插件


在现代的网页设计中,用户体验是一个热门的话题。特别是在移动手机的应用中,一个好的用户体验可以吸引住更多的用户。如果在页面中使用CSS3 animations制作一些特别的动画效果,可以起到画龙点睛的作用,使用户体验度大大的提高。

在移动手机设备上制作动画效果受到屏幕空间的影响,有时候可能效果不会很好。某些动画可能会超出屏幕的可显示范围。这时怎么办呢?我们不能只照顾桌面大屏幕设备而不管移动小屏幕设置。这时,我们可以使用响应式设计原理,在大屏幕设备上显示一种动画效果,而在小屏幕设备上显示另一种动画效果。

通过动画与用户沟通

我们可以只制作一些复杂的动画效果,而不是简单的颜色过渡和元素尺寸变化动画。我们可以用有趣的动画作为一种工具来与用户交流。当用户浏览你的页面时,会对这些动画发生兴趣,这也许会促使用户多浏览几个页面。

移动优先的动画设计

当我们创建一个网站的时候,要以移动优先为宗旨。制作动画效果也是如此。创建响应式的动画效果将能使用户在各种规格的设备浏览器中得到不同的用户体验。每一种尺寸的屏幕都有它的局限性,我们响应式设计的目的就是要克服这些局限性。

制作响应式的提交按钮动画

这个例子是一个非常有意思的提交按钮动画效果。在移动手机设备上,提交按钮的动画发生在提交按钮的边界只内。而在桌面设备上,提交按钮的动画会超出按钮的边界。下面是这个动画效果的一个草图。

整个动画效果要表达三个不同的提交事件阶段:按钮未点击、表单提交和提交完成。通过这些动画我们可以向用户清楚的表达当前提交事件处于什么阶段。不同尺寸屏幕中发生的动画完全不同,但是要表达的信息是相同的。

在我们的demo中,当屏幕的尺寸大于800像素的时候,是一种动画效果,当屏幕尺寸小于800像素的时候是另一种动画效果。你可以通过缩放浏览器来查看这两种动画效果。

移动手机的提交动画

在移动手机上,提交按钮的动画效果是水面上升到按钮一半的位置,然后潜艇开始往前行驶。潜艇开到按钮的右侧时,会出现提示文本“send”。

这些动画都是通过不同的@keyframes动画来实现:

  1. @keyframes submerge {
  2.   to {
  3.     transform: translateY(-50px);
  4.   }
  5. }
  6.   
  7. @keyframes drive {
  8.   to {
  9.     transform: translateX(140px);
  10.   }
  11. }
  12.   
  13. @keyframes sent {
  14.   to {
  15.     opacity: 1;
  16.   }
  17. }        
复制代码
上面的@keyframes代码首先使水面上升,然后是潜艇往前开动,最后是提示文本透明度由0变为1。

移动手机的局限性

移动手机设备的局限性在于它的屏幕空间比较小。另外,当用户用手指点击提交按钮的时候,动画的开始部分就有可能被手指遮挡住。因此,设置动画正确的动画时间和动画延时是非常重要的。
在我们的这个demo中,这个动画没有使用多余的空间,而且完整的表达了整个提交事件的过程。这对于用户体验是一件非常好的事情。

桌面设备的提交动画

在桌面设备的屏幕上,提交按钮的动画将是潜艇从提交按钮的左边跃起,然后在跌落到提交按钮的右侧,中间还带有水花飞溅的动画。这些动画将在4秒钟时间内完成。让我们来看看@keyframes的设置。

更多 按钮 相关资讯

使用CSS3设计漂亮的动画效果3D大按钮

使用CSS3设计漂亮的动画效果3D大按钮

本文将介绍如何使用最简单的CSS3代码来生成一个拥有点击效果的3D按钮 HTML代码 首先定义一个3D按钮的HTML,如下: <a href="#null">极客标签</a>复制代码 CSS代码

20种炫酷CSS3按钮样式和鼠标滑过特效

20种炫酷CSS3按钮样式和鼠标滑过特效

这是一款集合20组不同CSS3按钮样式和按钮鼠标滑过特效的插件。这20组css3按钮每一组都有3种示例,每一个示例都使用CSS3制作炫酷的鼠标滑过动画。这些按钮适用于各种场合,相信

10款重量级CSS3的全新特效 实现绚丽前端动画效果

10款重量级CSS3的全新特效 实现绚丽前端动画效果

大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面

8款超酷而实用的CSS3按钮动画

8款超酷而实用的CSS3按钮动画

1、CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter、facebook、you**等大型社交网站。每一个分享按钮都有个大社交网站的Logo图

纯CSS3实现的顶部社会化分享按钮

纯CSS3实现的顶部社会化分享按钮

今天要分享一款纯CSS3实现的社会化分享按钮,它放置在网页的顶部,你可以选择将它固定在网页顶部,这样对用户分享内容就十分方便。这些社会化分享按钮的图标文件来自goog

10款重量级CSS3的全新特效

10款重量级CSS3的全新特效

大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页

纯CSS3实现圆角按钮

纯CSS3实现圆角按钮

     目前CSS3的应用已经越来越普及了,它最常见的一个圆角功能非常的不错,可以省略掉不少图片从而直接用代码实现按钮的渐变、描边、阴影等效果。本实例就是一款直接用CSS

CSS3 Admin Menu

CSS3 Admin Menu

这一个个人信息面板导航效果,整个效果展示的是个人相关信息的菜单项,以及搜索功能。在这个案例中使用的CSS3属性相对较多,有transition做的过渡动画效果、有transform做的3D旋

如何建立一个样式新颖的CSS3搜索框

如何建立一个样式新颖的CSS3搜索框

搜索框大概是web开发中最常用的UI元素之一,我想基本没有必要去介绍如何使用它。无论是网站还是web应用,都会为了增强用户体验而添加它,那么你是不是也想过设计一个别致

用CSS3打造一组闪亮的半透明按钮效果

用CSS3打造一组闪亮的半透明按钮效果

分享一组闪亮的半透明 CSS3 按钮效果。CSS3 为网页设计引入了众多强大的新功能,让设计和开发人员能够轻松的创作出精美的界面效果。 这些闪亮的按钮使用了两个 DIV 实现,一个

更多 css3动画 相关资讯

使用CSS3设计漂亮的动画效果3D大按钮

使用CSS3设计漂亮的动画效果3D大按钮

本文将介绍如何使用最简单的CSS3代码来生成一个拥有点击效果的3D按钮 HTML代码 首先定义一个3D按钮的HTML,如下: <a href="#null">极客标签</a>复制代码 CSS代码

8款超酷实用的CSS3 Tab菜单集合

8款超酷实用的CSS3 Tab菜单集合

在网页应用中,有一种既方便用户浏览又节省空间的应用就是Tab菜单了,今天我们精选了一些基于CSS3的Tab菜单,效果很酷,而且比较实用。 1、CSS3华丽的Tab菜单 带小图标动画

视频教程:CSS3动画属性实用技巧教程

视频教程:CSS3动画属性实用技巧教程

目前CSS3动画已经越来越流行,在一些网页专题的产品介绍页面,手机APP首屏展示页面,又或者只是一个按钮简单变形,都可以使用CSS3来实现,虽然动画简单,但却让静态枯燥无味的页面增加

9种CSS3炫酷图片预览展示动画特效

9种CSS3炫酷图片预览展示动画特效

这是一组共9款CSS3炫酷图片预览展示动画特效插件。该效果开始时图片堆叠在一起,当鼠标滑过图片时,图片会以9种不同的方式展开,有扇形、平面展开等等非常酷的效果。 在线演示

20种炫酷CSS3按钮样式和鼠标滑过特效

20种炫酷CSS3按钮样式和鼠标滑过特效

这是一款集合20组不同CSS3按钮样式和按钮鼠标滑过特效的插件。这20组css3按钮每一组都有3种示例,每一个示例都使用CSS3制作炫酷的鼠标滑过动画。这些按钮适用于各种场合,相信

10款重量级CSS3的全新特效 实现绚丽前端动画效果

10款重量级CSS3的全新特效 实现绚丽前端动画效果

大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面

7款纯CSS3实现的炫酷动画应用

7款纯CSS3实现的炫酷动画应用

HTML5确实非常强大,我们之前也分享过很多基于HTML5 Canvas的动画特效。但是你是否知道我们可以利用纯CSS制作一些很酷的动画效果?对,CSS3可以做到,下面分享的7款炫酷动

一个轻量级CSS3动画库:JX.Animate

一个轻量级CSS3动画库:JX.Animate

JX.Animate 是由腾讯前端团队 AlloyTeam 推出的一个 CSS3 动画库,通过 JX(腾讯的前端框架)插件的形式提供。 Why CSS3 众所周知在支持HTML5的浏览器中,使

css3简单几步画一个乾坤图

效果如上,鼠标移上去会有动画。 代码如下非常简单: <html> <head> <style> .outer{height:100px;width:200px;border-radius:100px 100px 0px 0px;border:s

一款非常棒的纯CSS3 3D菜单演示及制作教程

一款非常棒的纯CSS3 3D菜单演示及制作教程

这段时间比较忙,很久没在这里分享一些漂亮的HTML5和CSS3资源了,今天起的早,看到一款很不错的CSS3 3D菜单,觉得非常上眼,就将它分享给大家,顺便来分析一下实现的源码。下面

更多 动画 相关资讯

使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果

使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果

使用CSS3 backface-visibility属性我们可以制作出许多有趣的动画效果。当你翻转一个元素的时候,你看到的是什么?通常情况下,我们应该看到的是元素的背面,这是正常的情况,但是有时

纯HTML+CSS实现阿童木头像

纯HTML+CSS实现阿童木头像

他有十万马力,能上天能入地;他分辨善恶,是勇敢正义化身;1963年,他登上荧幕,在日本创下了未曾有过的高收视率……他叫阿童木,一个纯真、善良、勇 敢的机器娃娃。“阿童木之父”

视频教程:CSS3动画属性实用技巧教程

视频教程:CSS3动画属性实用技巧教程

目前CSS3动画已经越来越流行,在一些网页专题的产品介绍页面,手机APP首屏展示页面,又或者只是一个按钮简单变形,都可以使用CSS3来实现,虽然动画简单,但却让静态枯燥无味的页面增加

8款超酷而实用的CSS3按钮动画

8款超酷而实用的CSS3按钮动画

1、CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter、facebook、you**等大型社交网站。每一个分享按钮都有个大社交网站的Logo图

7款纯CSS3实现的炫酷动画应用

7款纯CSS3实现的炫酷动画应用

HTML5确实非常强大,我们之前也分享过很多基于HTML5 Canvas的动画特效。但是你是否知道我们可以利用纯CSS制作一些很酷的动画效果?对,CSS3可以做到,下面分享的7款炫酷动

一个轻量级CSS3动画库:JX.Animate

一个轻量级CSS3动画库:JX.Animate

JX.Animate 是由腾讯前端团队 AlloyTeam 推出的一个 CSS3 动画库,通过 JX(腾讯的前端框架)插件的形式提供。 Why CSS3 众所周知在支持HTML5的浏览器中,使

教你用CSS3动画实现的超炫过渡特效

教你用CSS3动画实现的超炫过渡特效

Codrops 最近分享了一些很酷的图片切换灵感。有三种不同的用例:小的图像幻灯片,大标题幻灯片以及使用透明背景的产品幻灯片。状态转换使用 CSS 动画完成,我们能够定义从

使用 CSS3 实现超炫的 Loading(加载)动画效果

使用 CSS3 实现超炫的 Loading(加载)动画效果

SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画。SpinKit 的目标不是提供一个每个浏

CSS3实现简单的动画图片说明效果

CSS3实现简单的动画图片说明效果 .container{ height:200px;width:400px; background:#000; overflow:hidden; position:relative; } .text{ background:rgba(0,

快速实现超酷动画/过渡效果的CSS3类库

快速实现超酷动画/过渡效果的CSS3类库

在今天这篇文章中,我们给大家推荐四款精心挑选的CSS3动画和过渡效果类库,可以帮助设计师多快好省的实现各种前端的动画效果,相信大家一定能够在以后的前端web项目中使用