Question

我正在创建自己的网站（基于Joomla，但目前正在为模板做HTML / CSS部分，所以我不能在Joomla堆栈交换中询问，我想在这里会问）。

This是我在Wix上的旧网站：

如果你看右下方，你会发现4个社交链接（Facebook，G +等）。

Wix让我在'＆＃34; arc-in＆＃34;中很好地为它们制作动画。时尚（当你第一次加载/重新加载页面时它会显示一次）。现在我尝试使用CSS重新创建相同的东西，但无法找到任何参考如何在CSS中完成这样的弧形动画？

我宁愿在CSS中为元素设置动画，但我愿意在JavaScript中这样做，如果它在CSS中做得太多了。我在JavaScript中有点绿，所以请详细解释一下如何实现这一点。

非常感谢所有的帮助。

Answer 1

在阅读了你的问题后，我决定用css3动画（我喜欢动画），并做了一些你一直在问的东西。不要假装我的代码完全符合您的需要，但您可以随意使用并获得所需的信息。

<head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>

<body>
        <div class="social-icons">
                <i class="fa fa-google-plus-square fa-5x"></i>
                <i class="fa fa-twitter-square fa-5x"></i>
                <i class="fa fa-facebook-square fa-5x"></i>
                <i class="fa fa-youtube-square fa-5x"></i>
        </div>
</body>

.social-icons {
        display: inline-block;
        position: absolute;
        top: 40%;
        left: 35%;
        opacity: .2;
        transform: perspective(500px) rotateY(180deg) translateZ(300px);
}

.social-icons:hover {
        transform-origin: center;
        animation: rotation 3s ease forwards;
}

@keyframes rotation {
        from {
                opacity: .2;
                transform: perspective(1500px) rotateY(180deg) translateZ(700px);
        }
        to {
                opacity: 1;
                transform: perspective(1500px) rotateY(0deg) translateZ(0px);
        }
}

pen本身为。{。}} 希望你会喜欢它。

如何在网站上制作弧形动画 - CSS还是JavaScript？

1 个答案: