制作纯CSS Dock

Question

制作纯CSS Dock

Sup*_*tar 6 html html5 dock cross-browser css3

在使用CSS 3之后,我有了一个疯狂的想法,用它制作一个OS X风格的底座(一个带有元素的DIV容器,使用CSS:hover子类,在鼠标悬停时增加大小).但是,实现它时我遇到了一些奇怪的效果.到目前为止,这是我尝试过的:

码

<html>
<head>
<style>
body{
    margin:0;
}
.dockHolder{
    width:100%;
    position:absolute;
    text-align:center;
    display:block;
    bottom:0;
}
.dock{
    margin-left:auto;
    margin-right:auto;
    bottom:0;
    text-align:center;
}
.dockItem{
    height:50%;
    display:inline-block;
    position:relative;
    bottom:0;
    vertical-align:bottom;
    text-align:center;

    transition-property:width, height;
    -o-transition-property:width, height;
    -moz-transition-property:width, height;
    -webkit-transition-property:width, height;
    transition-duration:.25s;
    -o-transition-duration:.25s;
    -moz-transition-duration:.25s;
    -webkit-transition-duration:.25s;
    transition-timing-function:linear;
    -o-transition-timing-function:linear;
    -moz-transition-timing-function:linear;
    -webkit-transition-timing-function:linear;
}
.dockItem:hover{
    height:100%;
    width:auto;
}
</style>
</head>
<body>
<div class="dockHolder" style="height:64px;max-height:64px;border:1px solid black;">
    <div class="dock" style="background-color:lightgray;">
        <center>
            <div class="dockItem" style="background-color:magenta;"><img height="100%" src="pony.png" /></div>
            <div class="dockItem" style="background-color:magenta;"><img height="100%" src="bhs256.png" /></div>
        </center>
    </div>
</div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我的测试页面是 ~~http://s.supuhstar.operaunite.com/s/content/testAnims.htm~~(如果你想看看我到目前为止所拥有的东西,那么他会死于Opera Unite).

缺少功能

意外的影响包括:

无力的地方dock元素在底部dockHolder元素
dockItem 元素不与其子图像一起在宽度方向上扩展
dockItem和dock元素不会内部中心dockHolder与CSS容器(试过margin:auto;,box-pack:center;,box-align:center;等); 只有<center>HTML标签有效
在Opera和Firefox中(我放弃了IE),dockItems非常广泛

不存在的预期效果包括:

dockItems保持在dock元素内直到调整大小,此时它们与dockHolder元素的大小成比例增加,但dock元素保持相同的大小
所述dock元件是不断仅足够宽以包含所有的dockItem内它s和从未更宽不大于所有的组合宽度较短dockItemS和他们的利润.

题

有没有人有解决方案来解决意想不到的影响并实现缺席的预期效果？

最终实施

以下是我最终解决方案的代码:

<!DOCTYPE html><html>
<head>
<style type='text/css'>
body{
    margin:0;
}
.dockHolder {
    position: fixed;
    text-align: center;
    bottom: 0; 
    left: 0;
    right: 0;
    height: 128px;
    line-height: 128px;
}

.dock {
    background:#CCCCCC;
    background:
        -o-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
    background:
        -moz-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
    background:
        -webkit-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
    border: 1px solid gray;
    max-width:100%;
    vertical-align: bottom;
    line-height: 1em;
    padding: 0 8px;
    border-radius: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.dockItem {
    display: inline;
    height: 50%;
    vertical-align: bottom;

    transition-property:width, height;
    -o-transition-property:width, height;
    -ms-transition-property:width, height;
    -moz-transition-property:width, height;
    -webkit-transition-property:width, height;
    transition-duration:.25s;
    -o-transition-duration:.25s;
    -ms-transition-duration:.25s;
    -moz-transition-duration:.25s;
    -webkit-transition-duration:.25s;
    transition-timing-function:ease-in-out;
    -o-transition-timing-function:ease-in-out;
    -ms-transition-timing-function:ease-in-out;
    -moz-transition-timing-function:ease-in-out;
    -webkit-transition-timing-function:ease-in-out;
}
.dockItem:hover {
    height: 100%;
}
.dockItem:active {
    vertical-align:top;
    height:95%
}
</style>
</head>
<body>
    <div class="dockHolder" style="height:128px;line-height:128px;">
        <span class="dock">
            <img class="dockItem" src="pony.png"/>
            <img class="dockItem" src="bhs256.png"/>
            <img class="dockItem" src="mcgrass.png"/>
        </span>
    </div>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

工作示例(可能会过时): ~~http://admin.s.supuhstar.operaunite.com/s/content/testDock.html~~ (死于Opera Unite)

Answer 1

Šim*_*das 6

这个怎么样？

HTML:

<div class="dockbg"></div>
<div class="dock">
    <img src="foo.png">
    <img src="bar.png">
</div>

Run Code Online (Sandbox Code Playgroud)

CSS:

.dockbg {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35px;
    background: #bbb;
}

.dock {
    position: fixed;
    text-align: center;
    bottom: 5px;
    left: 0;
    right: 0;
    height: 100px;
    line-height: 100px;
}

.dock img {
    display: inline-block;
    vertical-align: bottom;
    height: 50%;
    padding: 0 5px;
    /* + your animation properties */
}


.dock img:hover {
    height: 100%;
}

Run Code Online (Sandbox Code Playgroud)

现场演示: http ://jsfiddle.net/simevidas/QM7M7/3/show/

归档时间：	14 年，1 月前
查看次数：	12223 次
最近记录：	10 年，6 月前