当前位置 博文首页 > freshlover的专栏：CSS3 transition transform 动画实现天气预报
CSS3 transform的属性包括：旋转角度rotate() / 倾斜角度skew() / 放缩倍数scale() / 位移大小translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。
<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><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> $(".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;
}到此为止。主要目的记录一下这些属性的用法。
