Question

我来自this网站。当用户点击Log in时，页面上的徽标就会开始制作动画。如何实现此类动画。我正在寻找有用的链接。我试过了谷歌搜索没有任何成功，因为我不知道它叫什么？

Answer 1

是的，这应该非常简单。假设这两个是兄弟姐妹，你甚至可以用CSS做到这一点。

CSS APPROACH

#site-logo {
   background-image: url(path/to/non-animated-image);
}
.login-button {
  /* Login default CSS here */
}
.login-button:active ~ #site-logo {
   background-image: url(path/to/animated-image.gif);
}

然后在.login-button:active ~ .site-logo块中使用动画gif。

否则，您可以使用jQuery或类似的东西

jQuery方法

.login-button.on('click', function(){
   $('#site-logo').css('background-image', 'url(path/to/animated-image.gif)');
});

Answer 2

您发布的链接使用CSS3动画/过渡和画布。并且它根据我的口味使用了太多的fluf来实现对该徽标的这种简单效果。这不是很有效，正如Josh Burgess指出的那样，你可以用.gif图像轻松做同样的事情。但是，我只是想强调一下你在这个标志中发生的一些事情。（它使用画布，这可能只包含一个gif图像，但徽标不仅仅是那个）。

我将从你看到的圆圈的基础开始，那些不是图像。您可以使用.gif图像来实现类似的效果。但在这种情况下，它是徽标静态部分的所有CSS和HTML。

圆圈的一个例子

CSS：

.myCircles li, .myCircles li:after {
    position: absolute;
    top: 25px;
    left: 25px;
    list-style: none;/* hide the list style */
    text-indent: -9001em;/* hide the text content */
    width: 50px;
    height: 50px;
    border-radius: 100% 100% 100% 100%;
    border-top: 5px solid #000;
    border-right: 5px solid #000;
    border-bottom: 5px solid #000;
    border-left: 5px solid transparent;
    transform: rotate(45deg);
    /* The transition effect */
    transition: all 2s;
    -moz-transition: all 2s; /* Firefox 4 */
    -webkit-transition: all 2s; /* Safari and Chrome */
    -o-transition: all 2s; /* Opera */
}
.myCircles li:after {
    content: ''; /* important to add this, without a content propperty set :before / :after psuedo elements will not show */
    left: 25px;
}
.myCircles li:hover {
    transform: rotate(190deg);
    opacity: 0.5;
}

HTML：

<ul class="myCircles">
    <li id="circle"> circle </li>
</ul>

在网站上，使用：before和：选择器后创建多个圆圈。如上例所示。单击网站上的按钮后动画开始时，它将在包含该动画的画布中淡入淡出。为了示范;你可以添加一个简单的：悬停以查看这种淡化效果。（在这个例子中淡出而不是淡入。）

您可以在某些其他事件上使用这些过渡和动画，而不仅仅是：hover（或：focus：active等），但您需要JS这样做。例如onclick或load事件。

HTML / JS（jQuery）：

<button id="test">login</button>

<script>
    $(document).ready(function(){
        $('#test').click(function() {
            $('#circle').css( 'left', '100px' );
            $('#circle').css( 'opacity', '0.5' );
        });

    });
</script>

这些是您在徽标中看到的效果的基础知识。但是，我不建议在那之间使用画布的麻烦。但是当使用画布时，您在渲染的内容中拥有更多自由，因此对于复杂的动画，画布可以派上用场。使用画布时，您应该准备手动创建大量动画，或者搜索库以充分利用画布元素的真正力量。

关于动画的链接以及您想要了解的更多有关的效果：（因为这是我在SO上的第一篇文章，似乎我只能为你提供2个链接，我建议你研究css变换和关键帧动画语法以及CSS技巧，以了解更多关于动画的可能性）< / p>

CSS转换，转换，动画：

CSS Transformations

画布：

Canvas animations

网页中的动画徽标

2 个答案:

圆圈的一个例子

CSS：

HTML：

HTML / JS（jQuery）：

CSS转换，转换，动画：

画布：