|
position： absolute;
display： block;
width： 100%;
height： 100%;
top： 0;
left： 0;
line-height： 3;
opacity： 0.4;
text-align： right;
pointer-events： none;
}
温度显示效果是半透明的，我们为它的opacity添加一个过渡：
.rb-temp {
display： block;
font-size： 2em;
opacity： 0.5;
transition： all 0.3s ease-in-out;
}
当悬浮在一个列表项上，我们简单增加：
.rb-grid li:hover .rb-temp {
opacity： 1;
}
现 在，让我们看一看重要的重叠部分。最后的视图，我们是想要一个全屏范围的重叠效果，所以我们将把它的宽度和高度设置到100%。我 们不希望它是相对于任何东西，而是希望它在顶部，所以要给它固定了位置。因为这将让它出现在所有东西的顶部，会有重叠，很多重叠！这时需要在初始时设置 z-index为-1。这将把它们统统放在内容页面的后面。设置opacity为0会使他们不可见：
.rb-overlay {
opacity： 0;
position： fixed;
top： 0;
left： 0;
width： 100%;
height： 100%;
transition： all 0.4s ease;
z-index： -1;
pointer-events： none;
cursor： default;
}
这就是初始状态的叠加。一旦我们点击列表项，将为clip属性设置正确的rect（）值，动态扩展。
让我们看看其余的样式。
每个叠加层有点接近“按钮”，将被定位在右上角：
.rb-close {
position： absolute;
top： 0.4em;
right： 0.4em;
width： 2em;
height： 2em;
text-indent： -9000px;
cursor： pointer;
z-index： 1000;
}
.rb-close:before {
content： ‘x’;
font-weight： 100;
position： absolute;
top： 0;
left： 0;
width： 100%;
height： 100%;
font-size： 3em;
line-height： 0.6;
text-align： center;
text-indent： 0px;
}
列的包装有rb－week类（虽然我们也包括当前天气列在内）。需要将它设置为100%的宽度和高度以便我们可以准确的定义它的孩子的高度和宽度：
.rb-week {
width： 100%;
height： 100%;
}
“列”会有一个10%的宽度（除了第一个有30%的宽度），他们将浮动在左边：
.rb-week > div {
width： 10%;
height： 100%;
float： left;
position： relative;
padding： 3% 0;
}
.rb-week > div:first-child {
width： 30%;
}
总共有八个列，10% 乘以7结果是70%，加上我们有30%的左边第一列。
每个span有一个30%的高度和间距：
.rb-week span {
padding： 5% 0;
font-size： 2em;
font-weight： 100;
display： block;
margin： auto 0;
height： 30%;
width： 100%;
line-height： 0.8;
}
城市名的span有一个特殊的风格，更小的字体权重：
.rb-week span.rb-city {
font-weight： 700;
padding： 1% 10%;
font-size： 1em;
line-height： 1.2;
}
图标将有一个增加的字体大小，我们需要重置字体权重，因为我们已经改变了它的规则：
.rb-week ［class^=“icon-”］：before {
font-size： 2.5em;
font-weight： normal;
}
图标在“当前天气列”几乎是透明的：
.rb-week > div:first-child ［class^=“icon-”］ {
opacity： 0.1;
}
现在，让我们来为每个列表项定义不同的背景颜色。
我们有11个列表项：
/* Colors */
/* Grid */
.rb-grid li:nth-child（1） { background： #3399CC; }
.rb-grid li:nth-child（2） { background： #33CCCC; }
.rb-grid li:nth-child（3） { background： #996699; }
.rb-grid li:nth-child（4） { background： #C24747; }
.rb-grid li:nth-child（5） { background： #e2674a; }
.rb-grid li:nth-child（6） { background： #FFCC66; }
.rb-grid li:nth-child（7） { background： #99CC99; }
.rb-grid li:nth-child（8） { background： #669999; }
.rb-grid li:nth-child（9） { background： #CC6699; }
.rb-grid li:nth-child（10） { background： #339966; }
.rb-grid li:nth-child（11） { background： #666699; }
每个覆盖层我们有八个列：
/* Overlay Columns */
.rb-grid li:nth-child（1） .rb-week > div:nth-child（1） { background： #3399CC; }
.rb-grid li:nth-child（1） .rb-week > div:nth-child（2） { background： #2D87B4; }
（编辑：佛山站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
