Question

没有正确的search term我找不到你对ios设备的影响。

是否有一个库，教程，一个小提琴实际上在设备解锁时对图标进行过渡效果，特别是仅使用css3或一点点javascript或至少注释掉该效果的名称。< / p>

如果你无法想象我在说什么，请观看ios7 introduction in youtube

Answer 1

投掷效果时，您必须更改每个孩子的位置。我用jQuery和CSS3制作了它。这是小提琴：http://jsfiddle.net/uJRA8/2/


...

...

#container .box:nth-child(8) {
    top: 170px;
    left: 85px;
}
#container .box:nth-child(9) {
    top: 170px;
    left: 170px;
}

#container.fly .box:nth-child(1) {
    top: -75px;
    left: -75px;
}

...

...

Answer 2

如果您希望使用css来实现效果，我认为您正在寻找的搜索词将是转换和/或转换...

以下是 Simplified Example 如何使用转换，转换和一些javascript组合来获取您的目标：

CSS

.wrap {
    overflow: hidden;
    width: 255px;
    height: 255px;
    margin: auto;
    border: 1px solid blue;
}
.container {
    width: 255px;
    height: 255px;
    margin: auto;
    -webkit-transition: all 1.5s ease;
    transition: all 1.5s ease;
}
.box {
    display: inline-block;
    width: 72px;
    height: 72px;
    background-color: lightblue;
    margin: 5px;
    -webkit-transition: all 1.5s ease;
    transition: all 1.5s ease;
}
.fly .box {
    margin:50px;
    height:100px;
    width:100px;
    -webkit-transform: translateX(-175px) translateY(-500px);
    transform: translateX(-175px) translateY(-500px);
    opacity: 0;
}
.fly .container {
    width:610px;
    -webkit-transition: all 1.5s ease;
    transition: all 1.5s ease;
}

JS

$('button').on('click', function () {
    $('.wrap').toggleClass('fly');
});

HTML

<button>Toggle fly</button>
<div class="wrap">
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

解锁时ios图标过渡效果

2 个答案: