html+CSS3实现iOS7扁平化weather图标

新建html文档。

书写hmtl代码。

初始化css代码。

书写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); }

代码整体结构

查看效果