【用 CSS3 做一个流星雨动画】的更多相关文章

用 CSS3 做一个流星雨动画

昨天 UI 提交过来一个登录页的设计稿,要求背景有一个流星雨动画,做完之后觉得挺有趣,分享一下~ 一.流星动画 首先创建一个 div 作为画布 <div id="stars"> <div class="star" style="top: 0px;left: 500px;"></div> </div> html, body { width: 100%; height: 100%; margin:; o…

用css3做一个求婚小动画

概述 本案例主要是运用到了css3的animation.keyframes.transform等属性,熟悉了,就可以做更多的其他动画效果,这几个属性功能非常强大. 详细 代码下载:http://www.demodashi.com/demo/10335.html 首先,我们先来看看效果图哟. 一.准备工作 1.需要了解animation.keyframes.transform属性: animation:是一个简写属性,用于设置六个动画属性 animation-name 规定需要绑定到选择器的 ke…

用js+css3做一个小球投篮的动画（easing）

<!DOCTYPE html> <html> <head> <script src="jquery-1.11.3.min.js"></script> </head> <body> <style> @keyframes mycolor{ 10%{ background:green; } 20%{ background:red; } 50%{ background:blue; } 80%{ ba…

使用纯CSS3实现一个日食动画

日食现象是月亮挡在了地球和太阳之间,也就是月亮遮挡住了太阳. 所以要构造日食,我们须要2个对象:一个代表月亮,一个代表太阳. <div class="eclipse sun"></div> <div class="eclipse moon"></div> 我们把整个日食过程分解为3个阶段:1. 缓慢移入 2. 短暂停留 3. 缓慢移出. 在此期间.会产生3个彼此关联的动画. 首先是月亮的位置移动,我们通过改变月亮的X坐…

用css3做一个正方体

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../css/public.css"/> <style type="text/css">…

做一个APP

前言 有点零乱,但是我想写下来慢慢整理,搭建一个好点的工程-模式MVC, 会包括一些第三方库,动画库,第三方库管理关联,自定义常用控件的管理和关联 1.预编译文件的创建 在build setting 搜索Prefix Header将里面的空白路径改为 $(SRCROOT)/xxxxxxxx(你的工程名字)/PrefixHeader.pch 其中PrefixHeader是你自己创建的pch文件 文件里一般会添加两个框架: #ifndef Carloans_PrefixHeader_pch #def…

用CSS3的transform来做一个立方体

有一次上数据结构课老师布置了一个用队列的思想通过js和Html来做一个“跳舞配对”的网页,当时那个跳舞的部分用了css3里面transform的相关属性做了个个让图片无限翻转的效果,可能正是由于这个效果,让我想到了--可以不可以通过transform来弄个3D的立方体呢?后来慢慢的去做,遇到好多问题,下面把这次小尝试记录下,等到日后有灵感再去弄... 代码如下: <!DOCTYPE html> <html lang="en"> <head> <…

用js，css3 做的一个球

用css3属性很容易做一个立方体,但是要做一个球体,会相对复杂些 原理是:球可以看做是由无数个圆圈构成,然后就可以用圆圈来做球, 下面的例子是我做的一个小球,由72个圆圈组成.如果把每个圆圈的背景颜色设置同一颜色,效果更佳 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <styl…

手把手带你做一个超炫酷loading成功动画view Android自定义view

写在前面: 本篇可能是手把手自定义view系列最后一篇了,实际上我也是一周前才开始真正接触自定义view,通过这一周的练习,基本上已经熟练自定义view,能够应对一般的view需要,那么就以本篇来结尾告一段落,搞完毕设的开题报告后去学习新的内容. 有人对我说类似的效果网上已经有了呀,直接拿来就可以用,为什么还要写.我个人的观点是:第三方控件多数不能完全满足UI的要求,如果需要修改,那么必须理解他的实现,所以很有必要自己去写一款出来,成为程序的创造者,而不单单是使用者.所以,写一写已经实现的效果,…

[Material Design] 教你做一个Material风格、动画的button(MaterialButton)

原创作品,转载请注明出处:http://blog.csdn.net/qiujuer/article/details/39831451 前段时间Android L 公布了,相信看过公布会了解过的朋友都为当中的 "Material Design" 感到由衷的惊艳吧!至少我是的. 在惊艳之余感到由衷的遗憾,由于其必须在 "Android L" 上才干使用.MD.郁闷啊. 之后便自己想弄一个点击动画试试,此念头一发不可收拾:干脆一不做二不休,就重写了一个 "Mat…