svg实现六个天气动画效果代码
代码语言：html
所属分类：动画
代码描述：svg实现六个天气动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
<style>
body {
background: #121212;
}
.stage {
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 96px;
margin-left: -300px;
margin-top: -30px;
}
svg {
width: 48px;
height: 48px;
margin: 24px 0 0 40px;
fill: #fff;
}
/* Thunder Bolt Animation */
.thunder-cloud .bolt {
animation: flash 2s infinite;
}
@keyframes flash {
0% {
transform: translateY(-25px) translateX(25px) scaleY(0.95);
opacity: 0;
}
5%, 25% {
opacity: 1;
}
15%, 20% {
opacity: 0;
}
50% {
transform: translateY(8px) translateX(-10px);
opacity: 1;
}
80% {
transform: translateY(8px) translateX(-10px);
opacity: 0;
}
100% {
transform: translateY(-25px) translateX(25px) scaleY(0.95);
opacity: 0;
}
}
/* Raindrops Animation */
.rain-cloud .raindrop-one,
.rain-cloud .raindrop-two,
.rain-cloud .raindrop-three {
opacity: 0;
animation-timing-function: cubic-bezier(1, 0, 1, 1);
}
.rain-cloud .raindrop-one {
animation: falling-drop-one 2s infinite;
}
.rain-cloud .raindrop-two {
animation: falling-drop-two 1.90s infinite;
animation-delay: 0.8s;
}
.rain-cloud .raindrop-three {
animation: falling-drop-three 1.80s infinite;
animation-delay: 0.5s;
}
@keyframes falling-drop-one {
0% {
transform: translateY(-35px);
opacity: 0;
}
10% {
transform: translateY(-15px);
opacity: 1;
}
30% {
opacity: 1;
}
60% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(-35px);
opacity: 0;
}
}
@keyframes falling-drop-two {
0% {
transform: translateY(-105px);
opacity: 0;
}
10% {
transform: translateY(-85px);
opacity: 1;
}
30% {
opacity: 1;
}
60% {
transform: translateY(5px);
opacity: 0;
}
100% {
transform: translateY(-105px);
opacity: 0;
}
}
@keyframes falling-drop-three {
0% {
transform: translateY(-105px);
opacity: 0;
}
10% {
transform: translateY(-85px);
opacity: 1;
}
30% {
opacity: 1;
}
60% {
transform: translateY(35px);
opacity: 0;
}
100% {
transform: translateY(-105px);
opacity: 0;
}
}
/* Snowflake Animations */
.snow-cloud .snowflake-one,
.snow-cloud .snowflake-two,
.snow-cloud .snowflake-three {
opacity: 0;
transform-origin: center center;
animation-timing-function: ease-in;
}
.snow-cloud .snowflake-one {
animation: falling-snow-one 4s infinite;
}
.snow-cloud .snowflake-two {
animation: falling-snow-two 3.8s infinite;
animation-delay: 2.5s;
}
.snow-cloud .snowflake-three {
animation: falling-snow-three 3.9s infinite;
animation-delay: 1.5s;
}
@keyframes falling-snow-one {
0% {
transform: translateY(-65px) rotate(0);
opacity: 0;
}
20% {
transform: translateY(-10px) translateX(30px) rotate(-30deg);
opacity: 1;
}
40% {
transform: translateY(45px) translateX(-30px) rotate(30deg);
}
50% {
opacity: 1;
}
60% {
transform: translateY(100px) translateX(30px) rotate(-30deg);
opacity: 0;
}
100% {
transform: translateY(-65px);
opacity: 0;
}
}
@keyframes falling-snow-two {
0% {
transform: translateY(-75px) rotate(0);
opacity: 0;
}
20% {
transform: translateY(-45px) translateX(40px) rotate(-30deg);
opacity: 1;
}
40% {
transform: translateY(5px) translateX(-40px) rotate(30deg);
}
50% {
opacity: 1;
}
60% {
transform: translateY(30px) translateX(20px) rotate(-30deg);
opacity: 0;
}
100% {
transform: translateY(-75px);
opacity: 0;
}
}
@keyframes falling-snow-three {
0% {
transform: translateY(-85px) rotate(0);
opacity: 0;
}
20% {
transform: translateY(-10px) translateX(-30px) rotate(30deg);
opacity: 1;
}
40% {
transform: translateY(25px) translateX(30px) rotate(-30deg);
}
50% {
opacity: 1;
}
60% {
transform: translateY(60px) translateX(-30px) rotate(30deg);
opacity: 0;
}
100% {
transform: translateY(-85px);
opacity: 0;
}
}
/* Sunny Cloud Animations */
.sun-cloud .sun-half {
animation: sun-grow 4s infinite cubic-bezier(0.2, 0.85, 0.4, 1.5);
transform-origin: bottom center;
}
.sun-cloud .ray-one {
animation: ray-show-one 4s infinite linear;
transform-origin: center right;
}
.sun-cloud .ray-two {
animation: ray-show-two 4s infinite linear;
transform-origin: bottom right;
}
.sun-cloud .ray-three {
animation: ray-show-three 4s infinite linear;
transform-origin: bottom center;
}
.sun-cloud .ray-four {
animation: ray-show-four 4s infinite linear;
transform-origin: bottom left;
}
.sun-cloud .ray-five {
animation: ray-show-five 4s infinite linear;
transform-origin: center left;
}
@keyframes sun-grow {
0%, 90%, 100% {
transform: scale(0.5);
opacity: 0;
}
15%, 80% {
transform: scale(1);
opacity: 1;
}
}
@keyframes ray-show-one {
0%, 15%, 80%, 100% {
transform: scale(0.5);
opacity: 0;
}
20%, 70% {
transform: scale(1);
opacity: 1;
}
}
@keyframes ray-show-two {
0%, 20%, 80%, 100% {
transform: scale(0.5);
opacity: 0;
}
25%, 70% {
transform: scale(1);
opacity: 1;
}
}
@keyframes ray-show-three {
0%, 25%, 80%, 100% {
transform: scale(0.5);
opacity: 0;
}
30%, 70% {
transform: scale(1);
opacity: 1;
}
}
@keyframes ray-show-four {
0%, 30%, 80%, 100% {
transform: scale(0.5);
opacity: 0;
}
35%, 70% {
transform: scale(1);
opacity: 1;
}
}
@keyframes ray-show-five {
0%, 35%, 80%, 100% {
transform: scale(0.5);
opacity: 0;
}
40%, 70% {
transform: scale(1);
opacity: 1;
}
}
@keyframes ray-show-six {
0%, 40%, 80%, 100% {
transform: scale(0.5);
opacity: 0;
}
45%, 70% {
transform: scale(1);
opacity: 1;
}
}
@keyframes ray-show-seven {
0%, 45%, 80%, 100% {
transform: scale(0.5);
opacity: 0;
}
50%, 70% {
transform: scale(1);
opacity: 1;
}
}
@keyframes ray-show-eight {
0%, 50%, 80%, 100% {
transform: scale(0.5);
opacity: 0;
}
55%, 70% {
transform: scale(1);
opacity: 1;
}
}
/* Sunshine Animation */
/* If only using this animation be sure to grab the sun-grow and ray-show-x keyframes set above */
.sunshine .sun-full {
animation: sun-grow 4s infinite cubic-bezier(0.2, 0.85, 0.4, 1.5);
transform-origin: center center;
}
.sunshine .sun-ray-one {
animation: ray-show-one 4s infinite ease-in;
transform-origin: center right;
}
.sunshine .sun-ray-two {
animation: ray-show-two 4s infinite ease-in;
transform-origin: bottom right;
}
.sunshine .sun-ray-three {
animation: ray-show-three 4s infinite ease-in;
transform-origin: bottom center;
}
.sunshine .sun-ray-four {
animation: ray-show-four 4s infinite ease-in;
transform-origin: bottom left;
}
.sunshine .sun-ray-five {
animation: ray-show-five 4s infinite ease-in;
transform-origin: center left;
}
.sunshine .sun-ray-six {
animation: ray-show-six 4s infinite ease-in;
transform-origin: top left;
}
.sunshine .sun-ray-seven {
animation: ray-show-seven 4s infinite ease-in;
transform-origin: top center;
}
.sunshine .sun-ray-eight {
animation: ray-show-eight 4s infinite ease-in;
transform-origin: top right;
}
/* Windy Cloud Animation */
.windy-cloud .cloud-wrap {
animation: bob 2s infinite cubic-bezier(0,0,.5,1.5);
}
.windy-cloud .cloud {
animation: cloud-push 4s infinite;
transform-origin: left center;
}
.windy-cloud .wind-one {
animation: wind-slide-one 4s infinite;
}
.windy-cloud .wind-two {
animation: wind-slide-two 4s infinite;
}
.windy-cloud .wind-three {
animation: wind-slide-three 4s infinite;
}
@keyframes bob {
0%, 100% {
transform: translateY(10px);
}
50% {
transform: translateY(-10px);
}
}
@keyframes cloud-push {
0%, 80%, 100% {
transform: translateX(-120px) scale(1.2);
}
10%, 60% {
transform: translateX(0) scale(1);
}
}
@keyframes wind-slide-one {
0%, 70%, 100% {
transform: scaleX(0);
opacity: 0;
}
10%, 60% {
transform: scaleX(1);
opacity: 1;
}
}
@keyframes wind-slide-two {
0%, 70%, 100% {
transform: scaleX(0);
opacity: 0;
}
10%, 60% {
transform: scaleX(1);
opacity: 1;
}
}
@keyframes wind-slide-three {
0%, 70%, 100% {
transform: scaleX(0);
opacity: 0;
}
10%, 60% {
transform: scaleX(1);
opacity: 1;
}
}
</style>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0