1

当我将鼠标悬停在它上面时，我想旋转我的 div 并且当它旋转时，我想让它变得更大，比如放大。

到目前为止，我有这个：

[html]

    div class="myMsg">
<p id="welly" style="color: #009">Welcome to Y3!<br><br><br>Thanks for stopping by!</p>
</div>

[CSS]

.myMsg {
background: white;
width: 800px;
height : 500px;
margin: 100px auto;
border: 1px solid black;
opactiy: 0.5;
-webkit-transform: rotate(360deg); /* Safari and Chrome */
-webkit-transform: scale(.1,.1) skew(45deg) translateX(-300px);
box-shadow: 0px 0px 200px grey;
}

.myMsg:hover {
    opacity: 1;
    -webkit-transform: rotate(360deg); /* Safari and Chrome */
    -webkit-transform: scale(1,.1 skew(0deg);
box-shadow: 0px 0px 200px grey;
}

所以我希望它在缩放到常规尺寸之前旋转

任何帮助表示赞赏

4

2 回答 2

3

首先，要表明它是可以做到的。

既然已经不碍事了，让我们深入了解细节并向您展示如何做到这一点。

首先，您需要使用animation动画属性并获得旋转效果。可悲的是，转换是不够的，因为在 0 和 360 之间转换意味着你不会去任何地方。因此，在悬停时将您的属性从一个设置到另一个设置。您的代码最终将如下所示：

@keyframes spin {
    from { transform: scale(.1,.1) skew(0deg) rotate(0deg); }
    to { transform: scale(1,1) skew(0deg) rotate(360deg); }
}
.myMsg:hover {
    animation: spin 1s forwards;
}

定义将要发生的@keyframes动画，并且您希望从一组属性转换为最后一个属性。然后，你设置你:hover播放那个动画。动画的相关属性是animation-name, animation-duration, 和animation-fill-mode( 表示它在完成动画时应该具有与最后一帧相同的属性。Webkit 需要前缀，因此您也需要添加这些前缀。

除此之外，我还在类上放置了一个transition: transform 1s;，.myMsg以便在鼠标移开后它会动画回来。但请注意，Webkit 似乎并不能很好地处理两者之间的交互，因此它有点不稳定且不太理想。但是，有了这样的实验特性，有时你会得到你所得到的。

一些旁注：

  • 你的 CSS 不是跨浏览器兼容的，你应该清理一下
  • 您正在定义 1 个转换属性，然后立即覆盖它。所有转换都需要放在同一个声明中。它们不能像那样结合
于 2013-08-24T03:54:16.403 回答
0

定义一个无限的 CSS 动画，其中包含用于旋转的关键帧并在悬停时切换到它。对尺寸（高度/宽度）属性使用过渡，并在 css 中悬停时更改它们。

示例：http: //jsfiddle.net/6guCd/

div {
    margin: 100px;
    width: 100px;
    height: 100px;
    background: #f00;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    transition: all 200ms ease;
}
div:hover {
    margin: 50px;
    width: 200px;
    height: 200px;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
于 2013-08-24T03:32:23.823 回答