Html
    Css
    Js

    
                        
.cloud {
	width:300px;
	height:205px;
	border-radius:50%;
	position:absolute;
	top:-35vh;
	left:-25vw;
	transition:all 1s;
}
.cloud-main {
	animation:movetoleft 20s linear infinite;
	width:100%;
	height:100%;
	opacity:0;
	top:0;
	pointer-events:none;
	transform:translateX(50%);
}
.cloud-last {
	animation:movetoleft 20s linear 10s infinite;
}
#cloud-back {
	filter:url(#filter-back);
	box-shadow:300px 300px 60px -20px #fff;
}
#cloud-mid {
	filter:url(#filter-mid);
	box-shadow:300px 340px 170px -60px rgba(158,168,179,0.5);
	left:-25vw;
}
#cloud-front {
	filter:url(#filter-front);
	box-shadow:300px 370px 160px -100px rgba(0,0,0,0.3);
	left:-25vw;
}
@keyframes movetoleft {
	0% {
	}30% {
	opacity:1;
}
100% {
	transform:translateX(-100%);
	opacity:0;
}
}.rain__ {
	-webkit-animation-delay:calc(var(--d) * 1s);
	animation-delay:calc(var(--d) * 1s);
	-webkit-animation-duration:calc(var(--a) * 1s);
	animation-duration:calc(var(--a) * 1s);
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	-webkit-animation-name:;
	animation-name:;
	-webkit-animation-timing-function:linear;
	animation-timing-function:linear;
	height:30px;
	left:calc(var(--x) * 1%);
	position:absolute;
	top:calc((var(--y) + 50) * -1px);
}
.rain__ path {
	fill:#a1c6cc;
	opacity:var(--o);
	-webkit-transform:scaleY(calc(var(--s) * 1.5));
	transform:scaleY(calc(var(--s) * 1.5));
}
@-webkit-keyframes {
	90% {
	opacity:1;
}
100% {
	-webkit-transform:translateY(100vh);
	transform:translateY(100vh);
}
}@keyframes {
	90% {
	opacity:1;
}
100% {
	-webkit-transform:translateY(100vh);
	transform:translateY(100vh);
}
}@keyframes depict {
	0% {
	stroke:#fff;
	stroke-dasharray:0;
	stroke-dashoffset:0;
}
50% {
	stroke-dasharray:1200;
	stroke-dashoffset:1200;
	opacity:1;
}
100% {
	stroke-dasharray:0;
	stroke-dashoffset:0;
	opacity:1;
}
}@keyframes depict-sub {
	0% {
	stroke:#fff;
	stroke-dasharray:500;
	stroke-dashoffset:500;
}
1% {
	opacity:1;
}
20% {
	opacity:0;
}
100% {
	opacity:0;
}
}@keyframes thunder-glow {
	0% {
	opacity:0;
}
5% {
	opacity:1;
}
8% {
	opacity:0;
}
9% {
	opacity:1;
}
20% {
	opacity:0;
}
100% {
	opacity:0;
}
}.slide-fade-enter-active {
	animation:bounce-in 1s;
}
.slide-fade-leave-active {
	animation:bounce-in 1s reverse;
}
@keyframes bounce-in {
	0% {
	transform:scale(0) translateX(100%);
	opacity:0;
}
100% {
	transform:scale(1) translateX(0);
	opacity:1;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

svg+vue动态天气(含动画效果)

更新时间:2020-09-03 09:31:03

自己弄的svg+vue天气动画卡片。本来想用于后台的,但觉得有点多余,哈哈,最近没时间去弄,还想添加下雨效果什么的!

2
      苏生生0
      2020/9/3 17:34:39
      上传后,雨没效果了。云也没了
          我家的猫咪叫英俊0
          2020/11/6 18:20:46
          就很迷惑
      回复