html+CSS3实现iOS7扁平化weather图标
1、新建html文档。
2、书写hmtl代码。
<div class="wrapper">
<div class="icon weather">
<span class="cloud"></span>
</div>
</div>
3、初始化css代码。
<style>
html, body { width : 100%; height : 100%; margin : 0; padding : 0; }
.wrapper { position : relative; width : 420px; margin : 0 auto; padding : 0; font-size : 0; }
.icon { position : relative; display : inline-block; width : 100px; height : 100px; margin : 20px; border-radius : 18px; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; box-sizing : border-box; }
</style>
4、书写css代码。
.weather { box-shadow : 0 0 0 1px rgba(31, 118, 237, 0.3) inset; background : -webkit-linear-gradient(top, #1f76ed 0%, #70edfe 100%); background : -moz-linear-gradient(top, #1f76ed 0%, #70edfe 100%); background : -ms-linear-gradient(top, #1f76ed 0%, #70edfe 100%); background : -o-linear-gradient(top, #1f76ed 0%, #70edfe 100%); background : linear-gradient(top, #1f76ed 0%, #70edfe 100%); }
.weather:before { position : absolute; content : ''; width : 38px; height : 38px; top : 20px; left : 14px; z-index : 1; border-radius : 19px; box-shadow : 0 0 0 1px rgba(253, 239, 84, 0.5) inset; background : -webkit-linear-gradient(top, #ffc700 0%, #fdef54 100%); background : -moz-linear-gradient(top, #ffc700 0%, #fdef54 100%); background : -ms-linear-gradient(top, #ffc700 0%, #fdef54 100%); background : -o-linear-gradient(top, #ffc700 0%, #fdef54 100%); background : linear-gradient(top, #ffc700 0%, #fdef54 100%); }
.weather .cloud { position : absolute; width : 36px; height : 36px; top : 32px; left : 32px; z-index : 2; border-radius : 18px; background : rgba(255, 255, 255, 0.8); }
.weather .cloud:before { position : absolute; content : ''; width : 22px; height : 22px; top : 14px; left : -5px; z-index : 1; border-radius : 11px; background : rgba(255, 255, 255, 0.8); }
.weather .cloud:after { position : absolute; content : ''; width : 30px; height : 30px; top : 8px; right : -9px; z-index : 2; border-radius : 15px; background : rgba(255, 255, 255, 0.8); }
5、代码整体结构
6、查看效果
