这是一款基于html5 svg和snap.svg的超酷天气预报卡片设计效果。该天气预报卡片可以以选项卡的方式来切换不同的天气，每种天气都以svg动画的方式来进行展示。
使用方法
在页面中引入jquery、tweenmax.min.js、snap.svg-min.js和main.js文件，以及样式文件style.css。
<link rel="stylesheet" href="css/style.css"> <script src="path/to/jquery.min.js" type="text/javascript"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/tweenmax.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js'></script> <script src="js/main.js"></script>
html结构
该天气预报卡片的html结构如下：
<div class="background"> <div class="container"> <svg id="back"> <radialgradient id="svgid_1_" cx="0" cy="0" r="320.8304" gradientunits="userspaceonuse"> <stop offset="0" style="stop-color:#ffde17;stop-opacity:0.7"/> <stop offset="1" style="stop-color:#fff200;stop-opacity:0"/> </radialgradient> <path id="sunburst" style="fill:url(#svgid_1_);" d="m0,319.7c-18.6,0-37.3-1.6-55.5-4.8l-7.8,41.4c5.1,0.9,10.6,0.9,15.7,0l56,314.8c37.6,318,18.8,319. 7,0,319.7z m-160.8,276.6c-32.5-18.8-61.3-42.9-85.5-71.6l-34,26.2c3.4,4.1,7.4,7.4,12,10.1l-160.8,276.6z m161.3,276.4l22.1,36.2 c4.5-2.6,8.6-6,12-10.1l212.6,178.5c222.5,233.4,193.8,257.6,161.3,276.4z m-302.5,108.3c-315.4,73-321.9,36-322-1.8l277.6-0.5 c0,5.3,0.9,10.4,2.7,15.2l-302.5,108.3z m302.6,107.8l41.8,12.8c1.7-4.7,2.6-9.7,2.6-14.9c0-0.3,0-0.6,0-1h322l0-1.3l0,1.9 c322,35.4,315.5,72.5,302.6,107.8z m-41.8-17.5l-261-94.5c12.8-35.4,31.6-68,55.8-96.9l-34.1-30.8c-37.5-26.8-40.1-22.3-41.8-17.5z m41.7-17.7c-1.8-4.8-4.4-9.3-7.8-13.3l212-179.2c24.3,28.8,43.3,61.3,56.3,96.6l41.7-17.7z m-22.2-40.8l-139.6-240 c32.7-19,68.1-32,105.2-38.6l-8-46.1c-13-45.2-17.8-43.4-22.2-40.8z m22-40.9c-4.4-2.6-9.2-4.3-14.2-5.1l47.1-273.6 c37.2,6.4,72.7,19.2,105.4,38l22-40.9z"/> </svg> <nav> <ul> <li><a id="button-snow" class="active"><i class="wi wi-snow"></i></a></li> <li><a id="button-wind"><i class="wi wi-strong-wind"></i></a></li> <li><a id="button-rain"><i class="wi wi-rain"></i></a></li> <li><a id="button-thunder"><i class="wi wi-lightning"></i></a></li> <li><a id="button-sun"><i class="wi wi-day-sunny"></i></a></li> </ul> </nav> <div id="card" class="weather"> <svg id="inner"> <defs> <path id="leaf" d="m41.9,56.3l0.1-2.5c0,0,4.6-1.2,5.6-2.2c1-1,3.6-13,12-15.6c9.7-3.1,19.9-2,26.1-2.1c2.7,0-10,23.9-20.5,25 c-7.5,0.8-17.2-5.1-17.2-5.1l41.9,56.3z"/> </defs> <circle id="sun" style="fill: #f7ed47" cx="0" cy="0" r="50"/> <g id="layer3"></g> <g id="cloud3" class="cloud"></g> <g id="layer2"></g> <g id="cloud2" class="cloud"></g> <g id="layer1"></g> <g id="cloud1" class="cloud"></g> </svg> <div class="details"> <div class="temp">20<span>c</span></div> <div class="right"> <div id="date">monday 22 august</div> <div id="summary"></div> </div> </div> </div> <svg id="outer"></svg> </div> </div>
具体效果请查看demo中的演示。
以上就是html5天气预报卡片设计效果的内容。