利用CSS3 Animations实现简单的动画效果

      文章,网页开发   2 条评论

终于双休日放假了 所以我就粗来搞事儿了...

#手动滑鸡 因为接触时间不长 并不能保证说的都是对的 只算是个人见解 有问题还请指出

首先是兼容性问题 因为Animations是CSS3的新特性 所以兼容性并不算太好(后面你会知道的...)
主流资次该特性的浏览器有:

  1. IE 10(9及9以下不支持 果真是IE⑨啊)
  2. Chrome 23.0 +
  3. Opera 12 +
  4. Firefox 16 +
  5. Safari 5.1 +

然后有一点很有必要(对我)说的特性...不支持内联样式...对于我这种菜鸡真的是很不习惯...
也就是说不能像这样用

<div xxxxxx></div>

接下来就是正文啦
利用这个特性来做一个简单的动画
说白了就是把我头像转起来...
大概就是借个样子


首先我们需要定义一个关键帧
@keyframes 动画名称{  
from{  
    巴拉巴拉  
}  
to{  
    巴拉巴拉  
}  
} 

这样子就算定义好了一个关键帧
巴拉巴拉什么的...就是出状态和末状态的说...
这里需要让图片旋转 所以我需要用到的是

-webkit-transform:rotate(0deg);
-webkit-transform:rotate(360deg);

咳咳...请自觉代入
但是...因为某些我不知道的原因...不同的浏览器需要在keyframes前面加关键字....
所以...例如

  • Chrome和Safari需要加-webkit-
  • Firefox需要加-moz-
  • Opera需要加-o-

这是不是也可以算是兼容性不好的表现 #滑鸡
这就算定义了一个关键帧 接下来的就是让它如何动♂起♂来
因为不能使用内联样式 所以我们需要定义一个样式表 代码就是这样

<style>
#roll{  
  width:225px;  
  height: 225px;  
  background-image: url(/photo.png);
  background-repeat:no-repeat;
  background-size: cover;
  border-radius:140px;
  这里写animation和keyframes的内容
</style>  

这样的话 前期工作都做好了
通过animation关键字来定义和执行动画效果

animation:动画名称 持♂续时间 其他选项;

大概算了下...5秒钟左右转速还不错 所以代码如下

animation:roll 5s linear infinite;

其中linear属性是平滑动画 去掉之后动画执行完毕后会有停顿
而infinite是循环播放 去掉之后转一圈就会停下

依旧是我不知道的原因 animation前面也要加关键字
关键字和前面keyframes的相同

已经算大功告成了 完整代码如下

1.png

嗯...我已经说过了 打死不用Typecho的代码编辑了
如果有需要的话...自己照着打吧...

如果需要更加详细的参数和教程
自己去翻吧...

Mozilla Developers Network - CSS Animations
Google Developers - Web -Animations

其实 写英文只是想装点...



利用PHP实现倒计时

      文章,程序设计,网页开发   2 条评论

闲着无聊死了....守望屁股打了一晚上了
马上要高考了...没事弄个倒计时玩玩

设定时区
中国是GMT-8(其实时区这个东西吧...我有个关于某个不会数三的胖子的悲伤的故事)

date_default_timezone_set('Etc/GMT-8');

取服务器时间
PHP自带了time函数来取服务器时间戳

$TimeNow = time();

然后与高考日期(06-07和06-08)比较
比较的时候需要用strtotime函数将文本型的日期转换为时间戳方便比较
首先需要判断是否高考已经结束
这里用了date来格式化日期,其中Y-m-d代表年-月-日

strtotime(date('Y-m-d', $TimeNow))

细节讲完了,大致思路如下:

设定一坨变量
判断当前时间和高考结束日期
结束了->输出 未结束->判断是否正在进行高考
判断是否进行高考
是->输出 否->输出

例行的源码如下

<?php
    date_default_timezone_set('Etc/GMT-8');
    $StartDate = '2017-06-07';
    $EndDate = '2017-06-08';
    $TimeNow = time();
    $LeftTime = strtotime($StartDate) - $TimeNow;
    if($LeftTime <= 0){
        //因为之前取得是差值 所以这里是负数 用abs函数取绝对值 并且加回减掉的那一天
        $LeftTime = abs($LeftTime) + 86400;
        $string = "高考进行中 %d 天";
    }else{
        $string = "距高考还有 %d 天";
    }
    if(strtotime($EndDate) < strtotime(date('Y-m-d', $TimeNow))){
        $string = "滑鸡 高考结束惹";
    }                                   
    //intval将文本型的时间戳转换为整数型并运算获得天数       
    printf($string,intval($LeftTime / 86400));
?>

PS:再插一句 我以后打死也不用typecho的代码格式写一大段了......排版反人类




  1. 1
  2. 2
  3. 3
  4. 4
  5. 5