仿VS安裝介面小球滑動效果

2022-01-20 19:32:07 字數 1110 閱讀 8779

在visual studio 2010後續版本的安裝介面中，可以發現一組小球在滑動表示安裝程式正在進行：

於是嘗試用css實現了一下。

首先需要建立用來表示小球的html結構：

<


div 


class


="container"


>


<


div 


class


="circle c1"


>


div>


<


div 


class


="circle c2"


>


div>


<


div 


class


="circle c3"


>


div>


<


div 


class


="circle c4"


>


div>


<


div 


class


="circle c5"


>


div>


div>
用5個div分別表示5個小球，並加入樣式：

.container.circle
之後需要考慮小球的運動效果，於是給樣式circle加入緩動樣式：

.circle
另外小球有先後順序，需要使用css3中的keyframes來實現順序：

@keyframes bounce1 60%88%100%}


@keyframes bounce2 66%91%100%}


@keyframes bounce3 72%94%100%}


@keyframes bounce4 78%97%100%}


@keyframes bounce5 80%100%}


.c1.c2.c3.c4.c5
實現後的效果如下：

仿Boss直聘我的介面滑動效果

好久沒有寫部落格了，最近在找工作，我在使用boss投簡歷的時候，看到boss的我的介面蠻有意思的，就想如何去實現它，可能是職業病吧，所以就打算仿一下。先看下仿的效果。其實我們拿到這個效果的時候，看到滑動，摺疊等效果就應該想到了material design，那麼我們現在就可以基本的布局下。activ...

仿小紅書巢狀滑動效果

由於recyclerview預設實現了nestedscrollingchild2，不需要我們自己實現nestedscrollingchild。重寫recyclerview的ontouchevent方法，在action move裡面合適的時候開啟 禁止彈性滑動，具體邏輯參考前面流程圖和 注釋。在act...

仿ios中layout的滑動效果

package code.suibianchou.com.custormview2 import android.annotation.suppresslint import android.content.context import android.graphics.rect import an...