CSS3 transition transform 动画实现天气预报显示

天气显示的动画。其中用到了css3 transition 动画基础。W3C标准规定：“css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑的以动画效果改变css的属性值。”

transition语法：
transition:[<transition-property>||<transition-duration>||
<transition-timing-function>||<transition-delay>]

transition主要包含四个属性值：执行变换的属性transition-property，变换延续的时间transition-duration，在延续的时间段内，变换的速率变化transition-timing-function，变换延迟时间transition-delay。详细用法：

变化的属性transition-property : none | all | [<元素属性名IDENT>][','<IDENT>]* ;
动画时间transition-duration : <time> [,time]*;
动画执行的方式：transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out;
动画延迟：transition-delay : <time> [,time]* ;

CSS3 transform的属性包括：旋转角度rotate() / 倾斜角度skew() / 放缩倍数scale() / 位移大小translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。

HTML代码：

	<div id="user">
	  <ul>
		<li class="weather"> 
			<a href="javascript:void()"><span>天气预报</span><br />    
				<p class="bold">今日天气(北京):</p>
				<p class="dtl"><{$wt.today.t}>  <{$wt.today.text}>  <{$wt.today.wind}>  <{$wt.today.wg}></p>
				<p class="bold">明日天气(北京):</p>
				<p class="dtl"><{$wt.next.t}>  <{$wt.next.text}>  <{$wt.next.wind}>  <{$wt.next.wg}></p>
			</a> 
		</li> 	  
		<li class="name"><font color="white">欢迎您，尊敬的<{if $smarty.const.ADMINLEVEL eq 1}>超级管理员<{elseif $smarty.const.ADMINLEVEL eq 2}>普通管理员<{elseif $smarty.const.ADMINLEVEL eq 9}>CP管理员<{/if}>：<{$smarty.const.TRUENAME}>(<{$smarty.const.USERNAME}>)</font></li>
		<li class="msg"><a href="?c=member&a=msglist" target="main-frame" id="adminmsg" >信息<{if $msgstatus > 0}>共<font color="red"><b><{$msgstatus}>条</b></font><{/if}></a></li>
		<li class="set"><a href="">设置</a></li>
		<li class="exit"><a href="?c=login&a=logout" target="_top"><{$lang.signout}></a></li>
	  </ul>
	</div>

动画部分的相关CSS代码：

<style media="all" type="text/css">
.weather{position:relative;}
.weather a{position:absolute;color:#fff;z-index:999;width:55px;right:15px;overflow:hidden;border-right:1px solid #f3f3f3;height:12px;-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;}
.weather a.hov{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(-100px,50px);-moz-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(-100px,50px)}
.weather a.zoom1{height:auto;width:200px;background-color:#2676A7;padding:5px;}
.weather a.zoom2{height:12px;width:55px;background:none;padding:0;}
.weather a p{padding:2px 0;color:#fff;}
.weather a.zoom1 span{font-weight:900;background:#fff;color:#333;border-radius:0 10px 10px 0;padding:5px 10px;display:inline-block;}
.weather a .bold{font-weight:900;font-size:10px;}
.weather a .dtl{color:#f3f3f3;font-size:8px;}
</style>

jQuery事件处理代码：

		$(".weather a").click(function(){
			$(this).removeClass().addClass("hov").addClass("zoom1").show();;
			//$(this).css({"height":"auto","width":"200px","z-index":"999","background-color":"#2676A7","padding":"5px"}).show();
			setTimeout(function(){$(".weather a").removeClass().addClass("zoom2");}, 6000);
		});

PHP数据处理代码：

    public function frame()
	{
		//$w =  get_weather();
		$cache = &cache_server();
		$w = $cache->get('mw_login_welcome');
		if(!$w)
		{
				$w =  get_weather();
				$cache->set('mw_login_welcome',$w,3600);
		}

		//$datalist = mod_pmsys::getmenudata();
		$first_menu_list = mod_nmenu::get_user_firstmenu();
		pm_tpl::assign('datalist',$first_menu_list);
		pm_tpl::assign('wt',$w);
		pm_tpl::display('index');
		exit();
	}

相关函数：
	function get_weather()
	{
		$ret = gethttp('http://m.weather.com.cn/data/101010100.html');
		$wdata = json_decode($ret,1);
		$wdata = $wdata['weatherinfo'];
		$w = array();
		$w['today'] = array('t' => $wdata['temp1'],'text' => $wdata['weather1'],'wind' => $wdata['wind1'],'wg' => $wdata['fl1']);
		$w['next'] = array('t' => $wdata['temp2'],'text' => $wdata['weather2'],'wind' => $wdata['wind2'],'wg' => $wdata['fl2']);
		return $w;
	}
	function gethttp($url)
	{
		$ctx = stream_context_create(
			array(   
        'http' => array(   
				'timeout' => 5 //设置一个超时时间，单位为秒   
				)   
			)
		);   
		$r = file_get_contents($url, 0, $ctx);
		unset($ctx);
		return $r;
	}

到此为止。主要目的记录一下这些属性的用法。