0

我是通过这个网站来的。当用户点击时Log in，页面上的徽标开始动画。如何实现这样的动画。我正在寻找有用的链接。我尝试谷歌搜索但没有成功，因为我不确定它是什么叫？

4

2 回答 2

3

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

CSS 方法

#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)');
});
于 2013-03-11T19:32:53.463 回答
2

您发布的链接使用 CSS3 动画/过渡和画布。而且它使用了太多的绒毛来实现对那个标志的如此简单的效果。这不是很有效，正如 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 和 :after 选择器创建的。如上例所示。单击网站上的按钮后动画开始时，它将淡入包含该动画的画布中。为了演示；您可以添加一个简单的 :hover 来查看这种褪色效果。（在此示例中淡出而不是淡入。）

您可以在某些其他事件上使用这些过渡和动画，而不仅仅是 :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 技巧以了解有关动画可能性的更多信息）

CSS 变换、过渡、动画：

CSS 转换

帆布：

画布动画

于 2013-03-11T22:17:36.220 回答