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

代码语言：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-delay: -1.0s;
}
.drop:nth-child(2) {
	-webkit-animation-delay: -1.4s;
	        animation-delay: -1.4s;
}
.drop:nth-child(3) {
	-webkit-animation-delay: -1.6s;
	        animation-delay: -1.6s;
}
.drop:nth-child(4) {
	-webkit-animation-delay: -1.2s;
	        animation-delay: -1.2s;
}
.drop:nth-child(5) {
	-webkit-animation-delay: -1.6s;
	        animation-delay: -1.6s;
}
.drop:nth-child(6) {
	-webkit-animation-delay: -2s;
	        animation-delay: -2s;
}
@-webkit-keyframes rain {
	0% {
		opacity: 1;
		-webkit-transform: translate(0, -120px);
		        transform: translate(0, -120px);
	}
	50% {
		opacity: 0.5;
		-webkit-transform: translate(0, -60);
		        transform: translate(0, -60);
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(0, -30px);
		        transform: translate(0, -30px);
	}
}
@keyframes rain {
	0% {
		opacity: 1;
		-webkit-transform: translate(0, -120px);
		        transform: translate(0, -120px);
	}
	50% {
		opacity: 0.5;
		-webkit-transform: translate(0, -60);
		        transform: translate(0, -60);
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(0, -30px);
		        transform: translate(0, -30px);
	}
}
@-webkit-keyframes thunder {
	0% {
		opacity: 1;
		-webkit-transform: translate(5px, -80px);
		        transform: translate(5px, -80px);
	}
	50% {
		opacity: 0;
		-webkit-transform: translate(0, -80px);
		        transform: translate(0, -80px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate(5px, -80px);
		        transform: translate(5px, -80px);
	}
}
@keyframes thunder {
	0% {
		opacity: 1;
		-webkit-transform: translate(5px, -80px);
		        transform: translate(5px, -80px);
	}
	50% {
		opacity: 0;
		-webkit-transform: translate(0, -80px);
		        transform: translate(0, -80px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate(5px, -80px);
		        transform: translate(5px, -80px);
	}
}
@-webkit-keyframes rise {
	0% {
		-webkit-transform: translate(0, -40px);
		        transform: translate(0, -40px);
	}
	50% {
		-webkit-transform: translate(0, -25px);
		        transform: translate(0, -25px);
	}
	100% {
		-webkit-transform: translate(0, -40px);
		        transform: translate(0, -40px);
	}
}
@keyframes rise {
	0% {
		-webkit-transform: translate(0, -40px);
		        transform: translate(0, -40px);
	}
	50% {
		-webkit-transform: translate(0, -25px);
		        transform: translate(0, -25px);
	}
	100% {
		-webkit-transform: translate(0, -40px);
		        transform: translate(0, -40px);
	}
}
</style>

</head>
<body>
    <body>
        <div class="container">
            <svg id="rain-cloud" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 672.7">
                <g id="sun-group">
                    <path id="ray" class="ray" d="M743.38,326.33l-31.5-31.5a7.58,7.58,0,1,0-10.72,10.71L732.67,337a7.57,7.57,0,0,0,10.71-10.71Z" transform="translate(-10.91 -63.23)" />
                    <path id="ray-2" data-name="ray" class="ray" d="M730.3,223.26a7.57,7.57,0,0,0,7.57,7.58h44.55a7.58,7.5.........完整代码请登录后点击上方下载按钮下载查看