Question

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

基本上，我正在使用3D效果。我有一个DIV元素，我希望它表现得像放在一个球（位于它的中心下方）。

因此，当您将鼠标移过边缘时，边缘会缩小/缩小。

有没有人见过这样的东西？这是否可以实现？

编辑：行为in this example best describes what I was after，但DIV不是文本。我想我可以根据自己的需要调整这个例子。

很抱歉，如果我的描述过于笼统，我不确定如何描述我需要的内容。

Answer 1

您可以使用CSS Transition。使用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);
}

希望这就是你的意思。

JS，CSS，jQuery DIV 3D效果

1 个答案: