HTML5 weather forecast card design effect-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

HTML5 weather forecast card design effect

Jan 18, 2017 pm 02:07 PM

Brief Tutorial

This is a cool weather forecast card design effect based on HTML5 SVG and snap.svg. This weather forecast card can switch between different weather in the form of tabs, and each weather is displayed in the form of svg animation.

Instructions

Introduce jquery, TweenMax.min.js, snap.svg-min.js and main.js files, as well as the style file style.css into the page.

&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;&gt;
&lt;script src=&quot;path/to/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&#39;https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js&#39;&gt;&lt;/script&gt;
&lt;script src=&#39;https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js&#39;&gt;&lt;/script&gt;
&lt;script src=&quot;js/main.js&quot;&gt;&lt;/script&gt;

Copy after login

HTML structure

The HTML structure of the weather forecast card is as follows:

&lt;div class=&quot;background&quot;&gt;
    &lt;div class=&quot;container&quot;&gt; 
      &lt;svg id=&quot;back&quot;&gt;
        &lt;radialGradient id=&quot;SVGID_1_&quot; cx=&quot;0&quot; cy=&quot;0&quot; r=&quot;320.8304&quot; gradientUnits=&quot;userSpaceOnUse&quot;&gt;
          &lt;stop  offset=&quot;0&quot; style=&quot;stop-color:#FFDE17;stop-opacity:0.7&quot;/&gt;
          &lt;stop  offset=&quot;1&quot; style=&quot;stop-color:#FFF200;stop-opacity:0&quot;/&gt;
        &lt;/radialGradient&gt;
        &lt;path id=&quot;sunburst&quot; style=&quot;fill:url(#SVGID_1_);&quot; d=&quot;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&quot;/&gt;
      &lt;/svg&gt;
      &lt;nav&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a id=&quot;button-snow&quot; class=&quot;active&quot;&gt;&lt;i class=&quot;wi wi-snow&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id=&quot;button-wind&quot;&gt;&lt;i class=&quot;wi wi-strong-wind&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id=&quot;button-rain&quot;&gt;&lt;i class=&quot;wi wi-rain&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id=&quot;button-thunder&quot;&gt;&lt;i class=&quot;wi wi-lightning&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id=&quot;button-sun&quot;&gt;&lt;i class=&quot;wi wi-day-sunny&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;div id=&quot;card&quot; class=&quot;weather&quot;&gt;
        &lt;svg id=&quot;inner&quot;&gt;
          &lt;defs&gt;
            &lt;path id=&quot;leaf&quot; d=&quot;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&quot;/&gt;
          &lt;/defs&gt;
          &lt;circle id=&quot;sun&quot; style=&quot;fill: #F7ED47&quot; cx=&quot;0&quot; cy=&quot;0&quot; r=&quot;50&quot;/&gt;
          &lt;g id=&quot;layer3&quot;&gt;&lt;/g&gt;
          &lt;g id=&quot;cloud3&quot; class=&quot;cloud&quot;&gt;&lt;/g&gt;
          &lt;g id=&quot;layer2&quot;&gt;&lt;/g&gt;
          &lt;g id=&quot;cloud2&quot; class=&quot;cloud&quot;&gt;&lt;/g&gt;
          &lt;g id=&quot;layer1&quot;&gt;&lt;/g&gt;
          &lt;g id=&quot;cloud1&quot; class=&quot;cloud&quot;&gt;&lt;/g&gt;
        &lt;/svg&gt;
        &lt;div class=&quot;details&quot;&gt;
          &lt;div class=&quot;temp&quot;&gt;20&lt;span&gt;c&lt;/span&gt;&lt;/div&gt;
          &lt;div class=&quot;right&quot;&gt;
            &lt;div id=&quot;date&quot;&gt;Monday 22 August&lt;/div&gt;
            &lt;div id=&quot;summary&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;svg id=&quot;outer&quot;&gt;&lt;/svg&gt;
    &lt;/div&gt;
&lt;/div&gt;

Copy after login

Please check the demonstration in the demo for specific effects.

The above is the content of the design effect of HTML5 weather forecast card. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn