html5天气预报卡片设计效果-html教程-PHP中文网

首页

web前端

html教程

html5天气预报卡片设计效果

黄舟

Jan 18, 2017 pm 02:07 PM

简要教程

这是一款基于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=&#39;https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js&#39;></script>
<script src=&#39;https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js&#39;></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天气预报卡片设计效果的内容，更多相关内容请关注PHP中文网（www.php.cn）！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML，CSS和JavaScript：示例和实际应用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在网页开发中的作用分别是：1.HTML用于构建网页结构；2.CSS用于美化网页外观；3.JavaScript用于实现动态交互。通过标签、样式和脚本，这三者共同构筑了现代网页的核心功能。

如何在标签上设置lang属性？为什么这很重要？May 08, 2025 am 12:03 AM

设置标签的lang属性是优化网页可访问性和SEO的关键步骤。1)在标签中设置lang属性，如。2)在多语言内容中，为不同语言部分设置lang属性，如。3)使用符合ISO639-1标准的语言代码，如"en"、"fr"、"zh"等。正确设置lang属性可以提高网页的可访问性和搜索引擎排名。

HTML属性的目的是什么？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外观和互动，使网站互动，响应式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，类，类型，类型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中创建列表？May 06, 2025 am 12:01 AM

toCreateAlistinHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulleTedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，customeizableWithTheTtheTthetTheTeTeptTributeFordTributeForderForderForderFerentNumberingSnumberingStyls。

HTML行动：网站结构的示例May 05, 2025 am 12:03 AM

HTML用于构建结构清晰的网站。1)使用标签如、、定义网站结构。2)示例展示了博客和电商网站的结构。3)避免常见错误如标签嵌套不正确。4)优化性能通过减少HTTP请求和使用语义化标签。

您如何将图像插入HTML页面？May 04, 2025 am 12:02 AM

toinsertanimageIntoanhtmlpage，usethetagwithsrcandaltattributes.1）usealttextforAcccessibilityandseo.2）instementRcsetForresponSiveImages.3）applylazyloadingWithLoadingWithLoading =“ lazy” tooptimizeperformance.4）tooptimizeperformance.4）

HTML的目的：启用Web浏览器可以显示内容May 03, 2025 am 12:03 AM

HTML的核心目的在于让浏览器理解并展示网页内容。1.HTML通过标签定义网页结构和内容，如、到、等。2.HTML5增强了多媒体支持，引入了和标签。3.HTML提供了表单元素，支持用户交互。4.优化HTML代码可提升网页性能，如减少HTTP请求和压缩HTML。

为什么HTML标签对Web开发很重要？May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）heSdefinElayout，语义和互动性。2）SemantictagsiCtagSimproveCacsibilitieAndseo.3）pose poseriblesibilityAndseoandseo.3）poser

See all articles