css3画天气图标

1、新建html文档。

3、初始化css代码。<style>svg { float: left; shape-rendering: geometric-precision; }@media only screen and (min-width: 480px) {svg { width: 50%; }}@media only screen and (min-width: 600px) {svg { width: 50%; }}@media only screen and (min-width: 768px) {svg { width: 33.333%; }}@media only screen and (min-width: 992px) {svg { width: 25%; }}@media only screen and (max-height: 319px) {svg { height: 29%; }}@media only screen and (min-height: 320px) {svg { height: 22%; }}@media only screen and (min-height: 768px) {svg { height: 30%; }}@media only screen and (min-height: 1000px) {svg { height: 30%; }}@media only screen and (min-height: 1400px) {svg { height: 22%; }}.climacon_component-stroke { fill: white; stroke-width: 0px; stroke: white; }.climacon_component-fill { fill: #aedef4; stroke-width: 0px; stroke: white; }*, *:after, *:before { box-sizing: border-box; }html, body { width: 100%; height: 100%; }body { background: #6bc2ea; font-family: Lato, sans-serif; color: white; font-size: 100%; line-height: 1; }</style>

5、代码整体结构。