? 雨林寒舍 | 动画

押宝抢庄牛牛

  • 展开微博窗口
  • QQ:52619941
  • 微信:cnmemory
  • 展开分类目录
  • 还没有账号?

Memory

CSS3+JS+PHP制作实时时钟

闲下来的时候就爱捣鼓些小玩意,顺便来一首经典的老歌,随意感受一下^_^,回归正题,今天给大家带来的是一款由CSS3实现的实时时钟(DEMO的链接在文本的末尾),主要的思路是利用css3的transform和animation来实现一个会走的钟摆,那么,为什么会利用到PHP呢?因为要通过animation制作一个指针转动的动画,但是在animation动画中,指针的起始点要根据实际的时间来控制,我们就需要PHP的帮助,通过下面的代码计算出时针,分针,秒针的初始位置:

date_default_timezone_set('Asia/Shanghai');
$sec = date('s');
$min = date('i')+$sec/60;
$hour = date('H')+$min/60;
$hour_deg = floor($hour/12*360);
$min_deg = floor($min/60*360);
$sec_deg = floor($sec/60*360);

CSS3制作3D跳动的小球

今天在网上看到一个国外写的CSS3 3D Bouncing Ball(3D反弹球),很有意思,并且实现起来也不难,于是忍不住自己也试写一遍。

大家可以先看看DEMO,http://nmgzyqh.com/im050/memory/demo/css3-bouncing-ball.html

好玩的东西当然要大家一起分享,所以接下来我就简单讲解一下如何实现跳动的效果

<div class="wrap">
 <div class="ball">
 <div></div>
 </div>
 <div class="ballshadow"></div>
</div>

押宝抢庄牛牛首先讲解一下结构,wrap是用来控制小球跳动的区域,ball就是小球啦,ballshadow是用来制作小球的投影,因为小球的运动和投影部分的运动(动画)效果是分开的,所以小球和投影部分要两个div来组成,而wrap设置的高度即为小球运动的高度,此时我们就可以通过top属性来很好的控制小球的位置变化。

小球运动区域CSS

.wrap {