2014/03/04

[WEB][CSS] 實作mac狀態工具列






先上老師教學（橫的），預覽
<html>
<head>
    <style>
        #bar{position:fixed; bottom:10px; width:100%; text-align:center}
        img{margin: 0px;
            -webkit-transition: 0.1s linear;
            -webkit-transition-property: -webkit-transform margin;}
        img:hover{
            margin: 6px;
            -webkit-transform: scale(1.5);
        }       
    </style>
</head>
<body bgcolor="#ccccff">
 
<div id="bar">
    <img src="../pics/pcman.png">
    <img src="../pics/pcman.png">
    <img src="../pics/pcman.png">
    <img src="../pics/pcman.png">
    <img src="../pics/pcman.png">
    <img src="../pics/pcman.png">
    <img src="../pics/pcman.png">
    <img src="../pics/pcman.png">
    <img src="../pics/pcman.png">
    <img src="../pics/pcman.png">
    <img src="../pics/pcman.png">
    <img src="../pics/pcman.png">
</div>
 
</body></html>

我自己實作了直的
於
標籤： ,