CSS动画/过渡旋转标志（步骤）

Posted 2023-03-06

【中文标题】CSS动画/过渡旋转标志（步骤）

【英文标题】：CSS Animation / Transition Rotate Logo (Steps)

【发布时间】：2018-10-25 06:33:29

【问题描述】：

我开始介绍 CSS 动画/过渡。

我寻求帮助。我想获得这个效果：

图像标志：

它将在 1 秒内旋转 180 度 它将在 2 秒内再旋转 180 度 接下来的 3 秒内将一动不动 每次鼠标悬停都会变成模糊的形状

【问题讨论】：

你试过什么？你的代码呢？

您好，我们不是来为您编写整个代码的。给我们一些示例代码。我们为您提供帮助会容易得多。

有些页面可以让您完成工作。topcoder.com...,

为什么人们会为此给出答案，这对我来说是漂亮的代码。

【参考方案1】：

您需要说出您尝试过的内容并举个例子，无论如何，这就是我想出的（在 css 中）：

@keyframes rotation 
    0%    transform: rotate(0deg);
    16%  transform: rotate(180deg); 
    50%  transform: rotate(360deg);
    100% transform: rotate(360deg);


.foo 
    filter: blur(0px);
    animation-name: rotation;
    animation-duration: 6s;

.foo:hover 
    filter blur(3px);