0

我正在寻找一种特定的效果，但我不确定它叫什么或者我应该如何搜索它。

基本上，我追求的是 3D 效果。我有一个 DIV 元素，我希望它的行为就像放在一个球上（位于它的中心下方）。

因此，当您将鼠标悬停在边缘上时，该边缘将缩小/缩小。

有没有人见过类似的东西？这完全可以实现吗？

编辑：此示例中的行为最能描述我所追求的，但 DIV 不是文本。我想我可以根据我的需要调整这个例子。

抱歉，如果我的描述过于笼统，我不知道如何描述我需要的东西。

4

1 回答 1

2

您可以为此使用 CSS 过渡。使用 css 过渡，您可以为 div 或对象设​​置动画。

看看这个很棒的教程

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions

一个例子：

JSFIDDLE

<body>
    <p>The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.</p>
    <div class="box"></div>
</body>

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -moz-transition:width 2s, height 2s, background-color 2s, -moz-transform 2s;
    -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    -o-transition:width 2s, height 2s, background-color 2s, -o-transform 2s;
    transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
    background-color: #FFCCCC;
    width:200px;
    height:200px;
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg);
}

希望是你的意思。

于 2013-04-24T09:54:14.450 回答