天气预报动态效果-html代码-BFW代码库

代码语言：html
所属分类：动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/weather-icons.min.css">
<style>
@import "https://fonts.googleapis.com/css?family=Lato:300";

html, body, .background {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
}

html {
  background: #fff;
}

body {
  background: #eee;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 200, 0.2)), to(rgba(0, 0, 200, 0)));
  background: linear-gradient(0deg, rgba(0, 0, 200, 0.2), rgba(0, 0, 200, 0));
}

.background {
  background: #eee;
  background: linear-gradient(120deg, rgba(50, 150, 100, 0.2), rgba(0, 0, 100, 0));
}

.container {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  position: relative;
  background: #eee;
  background: linear-gradient(240deg, rgba(150, 50, 50, 0.3), rgba(0, 0, 200, 0));
}

nav ul {
  margin: 20px 20px 0 20px;
  list-style-type: none;
  padding: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
}
nav li a {
  display: block;
  width: 50px;
  text-align: center;
  color: #aaa;
  cursor: pointer;
}
nav li a:hover {
  color: #444;
}
nav li a.active {
  color: #4444ff;
}

#card {
  box-shadow: 9px 7px 40px -6px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  width: 300px;
  padding: 0;
  height: 400px;
  min-height: 300px;
  margin: 20px;
  border-radius: 5px;
  position: relative;
}
#card .details {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 16px 20px;
  color: #888;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-transition: color 2s ease;
  transition: color 2s ease;
}
.thunder #card .details {
  color: #ddd;
}
#card .details .right {
  text-align: right;
}
#card .details #date {
  margin: 4px 0;
}
#card .details #summary {
  font-weight: 600;
  font-size: 22px;
}
#card .details .temp {
  font-size: 60px;
  line-height: 60px;
}
#card .details .temp span {
  font-size: 18px;
  line-height: 30px;
  vertical-align: top;
  margin-left: 5px;
}

.weather {
  background-color: #DAE3FD;
  -webkit-transition: background-color 2s ease;
  transition: background-color 2s ease;
}
.thunder .weather {
  background-color: #9FA4AD;
}
.rain .weather {
  background-color: #D8D8D8;
}
.sun .weather {
  background-color: #ccccff;
}
.weather #inner {
  background-color: white;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
}
.weather .cloud {
  -webkit-transition: fill 2s ease;
  transition: fill 2s ease;
}
.weather #cloud1 {
  fill: #efefef;
}
.thunder .weather #cloud1 {
  fill: #9FA4AD;
}
.weather #cloud2 {
  fill: #E6E6E6;
}
.thunder .weather #cloud2 {
  fill: #8B8E98;
}
.weather #cloud3 {
  fill: #D5D5D5;
}
.thunder .weather #cloud3 {
  fill: #7B7988;
}

#outer, #back {
  position: fixed;
  pointer-events: none;
}
</style>

</head>
<body translate="no">
<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>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script src='http://repo.bfw.wiki/bfwrepo/js/TweenMax.min.js'></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/snap.svg-min.js"></script>
<script src='https://codepen.io/ste-vg/pen/zBVakw.js'></script>
<script>
// 📝 Fetch all DOM nodes in jQuery and Snap SVG

var container = $('.container');
var card = $('#card');
var innerSVG = Snap('#inner');
var outerSVG = Snap('#outer');
var backSVG = Snap('#back');
var summary = $('#summary');
var date = $('#date');
var weatherContainer1 = Snap.select('#layer1');
var weatherContainer2 = Snap.select('#layer2');
var weatherContainer3 = Snap.select('#layer3');
var innerRainHolder1 = weatherContainer1.group();
var innerRainHolder2 = weatherContainer2.group();
var innerRainHolder3 = weatherContainer3.group();
var innerLeafHolder = weatherContainer1.group();
var innerSnowHolder = weatherContainer1.group();
var innerLightningHolder = weatherContainer1.group();
var leafMask = outerSVG.rect();
var leaf = Snap.select('#leaf');
var sun = Snap.select('#sun');
var sunburst = Snap.select('#sunburst');
var outerSplashHolder = outerSVG.group();
var outerLeafHolder = outerSVG.group();
var outerSnowHolder = outerSVG.group();

var lightningTimeout;

// Set mask for leaf holder 

outerLeafHolder.attr({
  'clip-path': leafMask });


// create sizes object, we update this later

var sizes = {
  container: { width: 0, height: 0 },
  card: { width: 0, height: 0 } };


// grab cloud groups

var clouds = [
{ group: Snap.select('#cloud1') },
{ group: Snap.select('#cloud2') },
{ group: Snap.select('#cloud3') }];


// set weather types ☁️ 🌬 🌧 ⛈ ☀️

var weather = [
{ type: 'snow', name: 'Snow' },
{ type: 'wind', name: 'Windy' },
{ type: 'rain', name: 'Rain' },
{ type: 'thunder', name: 'Storms' },
{ type: 'sun', name: 'Sunny' }];


// 🛠 app settings
// in an object so the values can be animated in tweenmax

var settings = {
  windSpeed: 2,
  rainCount: 0,
  leafCount: 0,
  snowCount: 0,
  cloudHeight: 100,
  cloudSpace: 30,
  cloudArch: 50,
  renewCheck: 10,
  splashBounce: 80 };


var tickCount = 0;
var rain = [];
var leafs = [];
var snow = [];

// ⚙ initialize app

init();

// 👁 watch for window resize

$(window).resize(onResize);

// 🏃 start animations

requestAnimationFrame(tick);

function init()
{
  onResize();

  // 🖱 bind weather menu buttons

  for (var i = 0; i < weather.length; i++)
  {
    var w = weather[i];
    var b = $('#button-' + w.type);
    w.button = b;
    b.bind('click', w, changeWeather);
  }

  // ☁️ draw clouds

  for (var i = 0; i < clouds.length; i++)
  {
    clouds[i].offset = Math.random() * sizes.card.width;
    drawCloud(clouds[i], i);
  }

  // ☀️ set initial weather

  TweenMax.set(sunburst.node, { opacity: 0 });
  changeWeather(weather[0]);
}

function onResize()
{
  // 📏 grab window and card sizes 

  sizes.container.width = container.width();
  sizes.container.height = container.height();
  sizes.card.width = card.width();
  sizes.card.height = card.height();
  sizes.card.offset = card.offset();

  // 📐 update svg sizes

  innerSVG.attr({
    width: sizes.card.width,
    height: sizes.card.height });


  outerSVG.attr({
    width: sizes.container.width,
    height: sizes.container.height });


  backSVG.attr({
    width: sizes.container.width,
    height: sizes.container.height });


  TweenMax.set(sunburst.node, { transformOrigin: "50% 50%", x: sizes.container.width / 2, y: sizes.card.height / 2 + sizes.card.offset.top });
  TweenMax.fromTo(sunburst.node, 20, { rotation: 0 }, { rotation: 360, repeat: -1, ease: Power0.easeInOut });
  // 🍃 The leaf mask is for the leafs that float out of the
  // container, it is full window height and starts on the left
  // inline with the card

  leafMask.attr({ x: sizes.card.offset.left, y: 0, width: sizes.container.width - sizes.card.offset.left, height: sizes.container.height });
}

function drawCloud(cloud, i)
{
  /* 
  
  ☁️ We want to create a shape thats loopable but that can also
  be animated in and out. So we use Snap SVG to draw a shape
  with 4 sections. The 2 ends and 2 arches the same width as
  the card. So the final shape is about 4 x the width of the
  card.
  
  */

  var space = settings.cloudSpace * i;
  var height = space + settings.cloudHeight;
  var arch = height + settings.cloudArch + Math.random() * settings.cloudArch;
  var width = sizes.card.width;

  var points = [];
  points.push('M' + [-width, 0].join(','));
  points.push([width, 0].join(','));
  points.push('Q' + [width * 2, height / 2].join(','));
  points.push([width, height].join(','));
  points.push('Q' + [width * 0.5, arch].join(','));
  poin.........完整代码请登录后点击上方下载按钮下载查看