svg实现天气预报动画效果-html代码-BFW代码库

svg实现天气预报动画效果

代码语言：html

所属分类：动画

代码描述：svg实现天气预报动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

<style>

/* START - this is how a full gradient on the body works! */
html {
    height: 100%;
}
body {
	background: #5C258D;  /* fallback for old browsers */  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #4389A2, #5C258D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	height: 100%;
	margin: 0;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
/* END - this is how a full gradient on the body works! */
.container {
	width: 100%;
	max-width: 325px;
	margin: 130px auto;
}
.cloud {
	-webkit-animation: rise 6s infinite ease-out;
	        animation: rise 6s infinite ease-out;
}
.cloud,
.drop {
	fill: #fff;
}
.bolt,
.sun,
.ray {
	fill: #ffcd64;
}
#sun-group .sun,
#sun-group .ray {
	-webkit-animation: rise 6s infinite ease-out;
	        animation: rise 6s infinite ease-out;
}
.bolt {
	-webkit-animation: thunder 2s infinite ease-out;
	        animation: thunder 2s infinite ease-out;
}
.bolt.bolt1 {
	-webkit-animation-delay: -1.0s;
	        animation-delay: -1.0s;
}
.bolt.bolt2 {
	-webkit-animation-delay: -1.4s;
	        animation-delay: -1.4s;
}
.bolt.bolt3 {
	-webkit-animation-delay: -1.8s;
	        animation-delay: -1.8s;
}
.drop {
	-webkit-transform-origin: 50% 50%;
	        transform-origin: 50% 50%;
	-webkit-animation: rain 3s infinite ease-out;
	        animation: rain 3s infinite ease-out;
}
.drop:nth-child(1) {
	-webkit-animation-delay: -1.0s;
	        animation-dela.........完整代码请登录后点击上方下载按钮下载查看