SVG背景+ CSS - 这怎么能这样动画？

-1

所以我在Carrd.co上看到了这个疯狂的好效果，我不明白这是如何进行动画制作的。SVG背景+ CSS - 这怎么能这样动画？

.pizza { 
 
    display: -moz-flex; 
 
    display: -webkit-flex; 
 
    display: -ms-flex; 
 
    display: flex; 
 
    -moz-flex-direction: column; 
 
    -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    -moz-align-items: center; 
 
    -webkit-align-items: center; 
 
    -ms-align-items: center; 
 
    align-items: center; 
 
    -moz-justify-content: space-between; 
 
    -webkit-justify-content: space-between; 
 
    -ms-justify-content: space-between; 
 
    justify-content: space-between; 
 
    min-height: 100vh; 
 
    padding: 2em 0; 
 
    text-align: center; 
 
    background-image: url("https://carrd.co/assets/images/bg.svg"),linear-gradient(45deg, #6E436C 25%, #2A4584 75%); 
 
    background-size: cover, cover; 
 
    background-position: top, center; 
 
    background-repeat: no-repeat, no-repeat; 
 
    cursor: default; 
 
}

<div class="pizza"> 
 
    
 
</div>

如果有人可以解释这对我来说将是很好。什么让svg动画？

来源

2016-04-27 J. Doe

在我看来，最好的学习方法是打开web开发工具，开始打开和关闭属性，看看会发生什么。尝试改变一些值等等。至少我发现这是帮助我理解css属性的最好方法。 – Bojan

在SVG中循环css关键帧动画，使每个多边形都淡入淡出。像这样：

@keyframes foo { 
    0% { opacity: 1; } 
    20% { opacity: 0.25; } 
    40% { opacity: 1.0; } 
    60% { opacity: 0.55; } 
    80% { opacity: 0.25; } 
    100% { opacity: 1; } 
} 

polygon.a1 { animation: foo ease 10s infinite; } 
polygon.f1 { fill: rgba(255,255,255,0.0125); } 
polygon.d1 { animation-delay: 0.5s; }

来源

2016-04-27 21:26:37

哦，我明白了，动画是在.svg文件中！我认为CSS使它淡入淡出。好吧，谢谢你把我叫醒了先生。 –

SVG背景+ CSS - 这怎么能这样动画？

回答

相关问题