Question

我正在使用来自http://cssload.net/的css3微调器我想通过更改#floatingBarsG上的高度和宽度来了解如何使用px em或％来扩大或缩小它。如果我将尺寸设置为高10px并且宽度增加10px，则图标会变形。有什么建议吗？

这是一个有用的js小提琴示例http://jsfiddle.net/PWLzb/8/

这是html

<div id="floatingBarsG" style="">
    <div id="rotateG_01" class="blockG"></div>
    <div id="rotateG_02" class="blockG"></div>
    <div id="rotateG_03" class="blockG"></div>
    <div id="rotateG_04" class="blockG"></div>
    <div id="rotateG_05" class="blockG"></div>
    <div id="rotateG_06" class="blockG"></div>
    <div id="rotateG_07" class="blockG"></div>
    <div id="rotateG_08" class="blockG"></div>
</div>

和css

#floatingBarsG {
    position:relative;
    width:62px;
    height:77px
}
.blockG {
    position:absolute;
    background-color:#FFFFFF;
    width:10px;
    height:24px;
    -webkit-border-radius:8px 8px 0 0;
    -webkit-transform:scale(0.4);
    -webkit-animation-name:fadeG;
    -webkit-animation-duration:0.5599999999999999s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    border-radius:8px 8px 0 0;
    transform:scale(0.4);
    animation-name:fadeG;
    animation-duration:0.5599999999999999s;
    animation-iteration-count:infinite;
    animation-direction:linear;
}
#rotateG_01 {
    left:0;
    top:28px;
    -webkit-animation-delay:0.20999999999999996s;
    -webkit-transform:rotate(-90deg);
    animation-delay:0.20999999999999996s;
    transform:rotate(-90deg);
}
#rotateG_02 {
    left:8px;
    top:10px;
    -webkit-animation-delay:0.27999999999999997s;
    -webkit-transform:rotate(-45deg);
    animation-delay:0.27999999999999997s;
    transform:rotate(-45deg);
}
#rotateG_03 {
    left:26px;
    top:3px;
    -webkit-animation-delay:0.35s;
    -webkit-transform:rotate(0deg);
    animation-delay:0.35s;
    transform:rotate(0deg);
}
#rotateG_04 {
    right:8px;
    top:10px;
    -webkit-animation-delay:0.41999999999999993s;
    -webkit-transform:rotate(45deg);
    animation-delay:0.41999999999999993s;
    transform:rotate(45deg);
}
#rotateG_05 {
    right:0;
    top:28px;
    -webkit-animation-delay:0.48999999999999994s;
    -webkit-transform:rotate(90deg);
    animation-delay:0.48999999999999994s;
    transform:rotate(90deg);
}
#rotateG_06 {
    right:8px;
    bottom:7px;
    -webkit-animation-delay:0.5599999999999999s;
    -webkit-transform:rotate(135deg);
    animation-delay:0.5599999999999999s;
    transform:rotate(135deg);
}
#rotateG_07 {
    bottom:0;
    left:26px;
    -webkit-animation-delay:0.63s;
    -webkit-transform:rotate(180deg);
    animation-delay:0.63s;
    transform:rotate(180deg);
}
#rotateG_08 {
    left:8px;
    bottom:7px;
    -webkit-animation-delay:0.7s;
    -webkit-transform:rotate(-135deg);
    animation-delay:0.7s;
    transform:rotate(-135deg);
}
@-webkit-keyframes fadeG {
    0% {
        background-color:#000000
    }
    100% {
        background-color:#FFFFFF
    }
}
@keyframes fadeG {
    0% {
        background-color:#000000
    }
    100% {
        background-color:#FFFFFF
    }
}

Answer 1

这可以通过CSS规模转换轻松完成 very ：

#floatingBarsG {
    -webkit-transform:scale(2);
    -webkit-transform-origin:top left;
    -moz-transform:scale(2);
    -moz-transform-origin:top left;
    -ms-transform:scale(2);
    -ms-transform-origin:top left;
    -o-transform:scale(2);
    -o-transform-origin:top left;
    transform:scale(2);
    transform-origin:top left;
}

Demo

调整css微调器的大小

1 个答案: