.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; } }
更新时间:2020-09-03 09:31:03
自己弄的svg+vue天气动画卡片。本来想用于后台的,但觉得有点多余,哈哈,最近没时间去弄,还想添加下雨效果什么的!