当你翻过DIV时,我正试图做一个3D鼠标悬停效果。这就是现在的样子
我想知道如何排序,左下角和右上角会有一个更清晰的阴影,倾斜的风格。我想也许在这些角落加一个三角形,但我想知道是否还有其他方法可以实现这一点。
谢谢
答案 0 :(得分:3)
如果你不介意使用伪元素,那就是::before
和::after
(虽然请注意,我记得,IE不识别双冒号声明,所以你' d真的必须使用:before
和:after
):
#box::before {
content: ' ';
position: absolute;
top: -10px;
left: -10px;
bottom: 0;
height: 100%;
background-color: #f90;
border-bottom: 10px solid white;
border-right: 10px solid black;
}
#box::after {
content: ' ';
position: absolute;
top: -10px;
left: -10px;
right: 0;
width: 100%;
border-bottom: 10px solid black;
border-right: 10px solid white;
}
答案 1 :(得分:1)
我认为尝试“blocklets”方法会很有趣,即使用div
s通过在背景和框之间分层div
来创建3D的外观,并使用-betweens从父项偏移一个像素顶部和左侧以创建深度外观。
请注意,我并不是说这是一个很好的方法,因为许多问题可能会影响性能。但是,我惊喜地发现,使用下面的代码我可以获得相对较好的性能,是的,它似乎在IE7 / 8/9以及FF10和Chrome 17中工作(原样)。
所以如果它对你有用,我很高兴听到这个,虽然我会赶紧补充它,但它真的只是一个起点/起点。我观察到一些已知问题,例如多个框导致动画有点崩溃。但它似乎可以用一个盒子工作,我想通过一些工作可以使它更好地工作,甚至可以移植到一个插件(如果有人这么想的话)。
如果您有任何问题或者您是否有任何可以/应该修复的问题,或者您认为它是愚蠢/无意义/ just turrible并且可以解释原因,请告诉我。
<强> HTML 强>
基本标记:
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<强> CSS 强>
我添加了边框,因为我觉得它看起来更好:
.shadow {
position: relative;
float: left;
}
.threed {
background: black;
position: absolute;
top: 0;
left: 0;
}
.box {
width: 298px;
height: 298px;
background: #cacaca;
position: relative;
border: 1px solid #aaa;
border-left: 1px solid #acacac;
border-top: 1px solid #acacac;
}
<强>的jQuery 强>
$(function(){
var $threed = $('<div class="threed">'),
$shadow = $('<div class="shadow">'),
offset = 0;
var init = function($jq, distance, speed){
$jq.each(function(){
var $this = $(this),
$threeds,
$shadow_clone = $shadow.clone(),
$threed_clone,
borderlw = parseInt($this.css('border-left-width')),
borderrw = parseInt($this.css('border-right-width')),
bordertw = parseInt($this.css('border-top-width')),
borderbw = parseInt($this.css('border-bottom-width')),
width = parseInt($this.innerWidth()) + borderlw + borderrw,
height = parseInt($this.innerHeight()) + bordertw + borderbw,
dimensions = {height: height, width: width};
$shadow_clone.css({
height: height + distance,
width: width + distance}
);
$this.data('distance', distance).wrap($shadow_clone);
for (var i = 0; i <= distance; i++) {
var $threed_clone = $threed.clone();
$this.before($threed_clone);
$threed_clone.css(dimensions).data('dimensions', {
left: i, top: i
});
}
$this.data('threeds', $this.siblings('.threed'));
$this.mouseenter(function(){
var offset = 0,
properties = {
left: distance,
top: distance
},
options = {
duration: speed,
step: goUp,
complete: finishThreeD
};
$(this).stop().animate(properties, options);
})
.mouseleave(function(){
var properties = {
left: 0,
top: 0
},
options = {
duration: speed,
step: goDown,
complete: finishTwoD
};
$(this).stop().animate(properties, options);
});
});
};
var goUp = function(){
var _offset = parseInt(this.style.left);
if (_offset > offset) {
offset = _offset;
$($(this).data().threeds[offset - 1])
.prevAll('.threed').each(function(){
$(this).css($(this).data().dimensions);
});
}
};
var finishThreeD = function() {
$(this).data().threeds.each(function(){
$(this).css($(this).data().dimensions);
});
};
var goDown = function (){
var _offset = parseInt(this.style.left);
if (_offset < offset) {
offset = _offset;
$($(this).data().threeds[offset - 1])
.nextAll('.threed').css({top: 0, left: 0});
if (offset === 0) {
$(this).data().threeds.css({top: 0, left: 0});
}
}
};
var finishTwoD = function (){
$(this).data().threeds.css({top: 0, left: 0});
offset = 0;
};
var inc = 1;
$('.box').each(function(){
init($(this), 10 * inc, 100 * (2.5 * inc));
inc++;
});
});