天气预报 - CSS 样式练习

简爱代码>CSS2015-1-17 8:4270644

让和自己慢慢地熟悉一下 CSS 的基本属性，还是那老东西来练手吧
我是挺相信自己是写不出什么好看的 CSS样式的 [害羞/]

效果如图：

动画采用 CSS，代码不含任何 JS (才开始尝试)

代码如下：
当然不包含获取天气部分

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>天气预报 - CSS 样式</title>
  <style>
  body{width:100%}

  .weather-card{position:relative;overflow:hidden;padding:0;margin:0 auto;box-shadow:0 0 10px rgba(0,0,0,0.8) inset;width:350px;height:250px;background-color:rgba(255,255,255,0.6);background-image:url(http://gouji.org/weather/350/101020100.jpg);background-repeat:no-repeat;background-size:cover;border-radius:20px}
  .weather-card:hover{box-shadow:0 0 10px rgba(0,0,0,0.8)}
  .weather-info{position:absolute;bottom:0;width:350px;height:80px;overflow:hidden;padding:0;margin:0;background-color:rgba(0,0,0,.4);border-radius:0 0 20px 20px;color:#fff;font-family:"Microsoft JhengHei","Microsoft Yahei","微软雅黑","华文细黑";font-size:14px;font-weight:600;line-height:22px;border-radius:0 0 20px 20px;-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out}
  .weather-card:hover .weather-info{height:250px;background-color:rgba(0,0,0,.6);border-radius:20px}
  .weather-card .w-today{margin-top:20px;text-align:center}
  .weather-card .w-city{font-size:22px}
  .weather-card .w-weather{font-size:26px;font-weight:700;color:#08d}
  .weather-card .w-temp{font-size:20px}
  .weather-card .w-wind{font-size:16px}
  .weather-card .w-tips{margin-left:10px;position:relative;top:25px;font-size:14px}
  .weather-card .w-tips b{font-size:16px;color:#08d;font-weight:700}
  .weather-card .w-tips::after{content:' GouJi.org';color:#f33}
  </style>
</head>
<body>
  <br>
  <div class="weather-card">
    <div class="weather-info">
      <p class="w-today">
        <span class="w-city">上海</span>
        <span class="w-weather">多云</span>
        <span class="w-temp">4℃</span><br>
        <span class="w-wind">微风</span>
      </p>
      <p class="w-tips">
        周五 01月16日 <b>多云</b> 微风 4℃<br>
        周六 <b>多云</b> 东北风微风 7 ~ 3℃<br>
        周日 <b>多云转晴</b> 南风微风 10 ~ 3℃<br>
        周一 <b>晴转多云</b> 东北风微风 11 ~ 6℃<br>
        更新时间: 2015-01-16 &nbsp;
      </p>
    </div>
  </div>
</body>
</html>

最后福利来了
如果想让天气数据每天更新 So easy 有如下代码就可以微博客添加天气预报:

<div id="weather"></div>
<script src="http://gouji.org/api/weather/tq-2.js" type="text/javascript"></script>
<script type="text/javascript">getWeather();</script>

什么放在侧边栏太大？
可以为
<div id="weather"></div>
添加class="w-240"或class="w-260"
即可改变宽度为240或260

想获取指定城市天气预报？
也可以修改 getWeather();为getWeather('嘉定');即可获取嘉定天气预报
使用期间也不必担心总是获取天气数据拖慢网站加载速度，因为天气数据是存储在本地的更新间隔为 1小时一小时之内是不会再去远程获取天气信息的

本文出自简爱博客，转载时请注明出处及相应链接。

CSS 动画

«Pjax.js

QQ 登录插件 - EMLOG»