Question

所以我在Carrd.co上看到了这个疯狂的好效果，我不明白它是如何制作动画的。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如果有人可以向我解释那会很好。是什么让svg动画？

Answer 1

在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; }

SVG background + css - 这个动画怎么样？

1 个答案: