极客编程挑战#018:设计独一无二的页面 ”加载中“ 效果

本期挑战

请使用以下开练 LOGO 素材 为基础(三选一即可):

挑战要求:

使用你所熟悉的任意前端技术(JS,CSS3,画布,SVG动画等等),生成一个漂亮动态的 ”页面加载中“ 效果,持续5秒后,页面即导向地址:http://www.kiklink.com

设计的越有想法,越炫酷,越容易获取本期奖品哦~~~ ,下面是一个可供参考的SVG动画效果范例~~  ( 点击看GIF动画 ):

提交方式:

  • 录制代码编写过程或最终代码:点击开始
  • 跟帖发布代码预览地址(可以使用GB按钮直接嵌入留言): 演示地址
  • 【强烈提醒】加入QQ群:157757552, 获奖用户及递交快递联系方式

开练APP介绍

开练—— 专注运动俱乐部的垂直社交020平台,开练只做一个产品:开练卡。通过开练卡,你可以去各种好玩的运动俱乐部,将“三点一线”的生活升级为“四点一线”:卡丁车、攀岩、射箭、剑道、柔道、瑜伽等超多好玩的新鲜运动,一卡全玩遍!

链接地址:http://www.kiklink.com

礼品赞助

本期挑战礼品3份(“开练”移动电源 + 100元开练运动充值卡) + 20元开练运动充值卡(参与即送,只限北京地区) 由运动 O2O社交平台 开练 鼎力赞助!

北京的程序猿们,cosplay程序猿鼓励师已经过时了, 尝试一下 “开练” 独家提供的“美女运动鼓励师” 服务吧~~~

苦逼加班的程序员你们还好吗,单身dog们是不是还在幻想老板为你们招来几个长相清新、声线甜美,还能擦汗倒茶温柔倾听的鼓励师?

然而,现实不能更残酷了。

真实的程序员鼓励师——上班时柔情万种,下班后就翻脸不认人。

开练的程序员鼓励师——美貌与身材并存,下班以后还陪着你,与你一起香汗淋漓玩运动!来自舞蹈、瑜伽、剑道、弓道、搏击馆、各种健身俱乐部的超高颜值美女教练和神秘会员妹子们,就围绕在你的周围,开练帮你免费约妹子到俱乐部里玩耍。最重要的是,不用担心要从中关村跑到酒仙桥去锻炼,就在你公司楼下和你家附近,就有一大群可爱的程序员鼓励师等着你哦!

礼品赞助

100元面值充值卡 (激活/充值卡方法:下载APP,登录后即可激活)

移动电源

20元面值充值卡(参与挑战,即可获取 - 仅限北京地区朋友)

如何增加获奖机率?

  • 最快完成奖一名: 最快保存递交“合格”代码
  • 最佳讲解奖一名: 代码录制过程及讲解详细完整
  • 最佳人气奖一名: 点赞(点+)的人最多
  • 本期参与奖: 新人参加本挑战均将获取(只限北京地址程序猿~~~)

晒晒往期获奖礼物

点击这里晒晒礼物

时间: 2024-10-12 21:49:40

极客编程挑战#018:设计独一无二的页面 ”加载中“ 效果的相关文章

Android 三种方式实现自定义圆形页面加载中效果的进度条

转载:http://www.eoeandroid.com/forum.php?mod=viewthread&tid=76872 一.通过动画实现 定义res/anim/loading.xml如下: [java] view plaincopy <?xml version="1.0" encoding="UTF-8"?> <animation-list android:oneshot="false" xmlns:androi

页面加载中jquery逐渐消失效果实现

为了获得更好的用户体验,现在大多数网页都会在页面中加一个加载中效果,这里实现一个加载中逐渐消失的效果,以至于看上去不那么生硬. html: <div id="loading"><img src="images/common/loading.gif" ></div> css: /*加载中*/ #loading{     position: fixed;     top: 0;     left: 0;     width: 100%

css 实现页面加载中等待效果

<!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my pa

页面加载中的图片性能优化【转】

我的大部分性能优化工作都集中在JavaScript和CSS上,从早期的Move Scripts to the Bottom和Put Stylesheets at the Top规则.为了强调这些规则的重要性,我甚至说过,“JS和CSS是页面上最重要的部分”. 几个月后,我意识到这是错误的.图片才是页面上最重要的部分. 我关注JS和CSS的重点也是如何能够更快地下载图片.图片是用户可以直观看到的.他们并不会关注JS和CSS.确实,JS和CSS会影响图片内容 的展示,尤其是会影响图片的展示方式(比如

[jQuery编程挑战]001:实现页面元素加速动画效果

要求: 页面包含两个HTML元素:一个按钮,一个小方块 动画要求:点击按钮,小方块从页面坐标300,300,加速移动到0,0 相关知识点: jQuery动画方法animate easing参数的设置 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>实现页面元素加速动画效果</title> <styl

jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head > 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>验证加载顺序</title> 5 <s

两种页面加载等待效果的实现

第一种,当打开一个新的页面时,这个页面的加载时间可能会比较长,可以用以下js实现页面等待效果,将该js导入加载的页面即可使用 //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离(loading框的宽度为215px,高度为61px) var _Loading

【OneAPM】极客编程挑战#025:发挥想象生成漂亮炫酷的SVG动画效果

活动链接:http://www.gbtags.com/gb/share/5610.htm 本期挑战 提供如下的SVG图形,请使用任何技术生成基于如下SVG图形的动画效果,看看谁设计的动画效果最酷 ~~ <svg width="720px" height="486px"> <g id="layer1"> <path style="fill:#888888" d="m 434.02002,3

【OneAPM】极客编程挑战#023:使用HTML5画布生成渐变自由落体小球效果

本期挑战 给定如下HTML: <canvas id="gbcanvas" width="350" height="300"></canvas> 阅读如下的相关HTML5画布教程: HTML5画布实现的粒子运动效果 HTML5画布Canvas基础入门 请使用HTML5画布生成一个自由落体效果的渐变小球,效果如下(点击下图查看GIF动画) 渐变色由#dd4814开始, 由#FFFF66结束 提交方式: 录制代码编写过程或最终代