Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

[CSS3] Giả lập hiệu ứng loading của Windows 8

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi banbaonylong, 10/3/14.

Lượt xem: 10,383

  1. banbaonylong Ko phải assmin

    Đây là một hiệu ứng loading mang phong cách windows 8.​
    [​IMG]
    Ảnh .gif minh hoạ
    Bạn chỉ cần nắm vững các thuộc tính css sau để thể hiện hiệu ứng "chuyển động":
    • animation
    • transform
    • animation-delay
    • animation-timing-function
    • origin
    • (thêm các tiền tố -moz-, -webkit-, -o-, -ms-)
    CSS
    PHP:
    .vuload {
       
    positionrelative;
       
    width90px;
       
    height:90px;
       
    displayblock;
       
    margin50px;
    }

    .
    vuload .vuitems {
       
    positionabsolute;
       
    width86px;
       
    height86px;
       
    opacity0;
       -
    moz-transformrotate(225deg);
       -
    moz-animationorbit 4.4s infinite;
       -
    webkit-transformrotate(225deg);
       -
    webkit-animationorbit 4.4s infinite;
       -
    ms-transformrotate(225deg);
       -
    ms-animationorbit 4.4s infinite;
       -
    o-transformrotate(225deg);
       -
    o-animationorbit 4.4s infinite;
       
    transformrotate(225deg);
       
    animationorbit 4.4s infinite;
    }

    .
    vuload .vuitems .comp{
       
    positionabsolute;
       
    width11px;
       
    height11px;
       
    background#000000;
       
    left:0px;
       
    top:0px;
       -
    moz-border-radius11px;
       -
    webkit-border-radius11px;
       -
    ms-border-radius11px;
       -
    o-border-radius11px;
       
    border-radius11px;
    }

    .
    vuload #vuitems_1 {
       
    -moz-animation-delay0.96s;
       -
    webkit-animation-delay0.96s;
       -
    ms-animation-delay0.96s;
       -
    o-animation-delay0.96s;
       
    animation-delay0.96s;
    }

    .
    vuload #vuitems_2 {
       
    -moz-animation-delay0.19s;
       -
    webkit-animation-delay0.19s;
       -
    ms-animation-delay0.19s;
       -
    o-animation-delay0.19s;
       
    animation-delay0.19s;
    }

    .
    vuload #vuitems_3 {
       
    -moz-animation-delay0.38s;
       -
    webkit-animation-delay0.38s;
       -
    ms-animation-delay0.38s;
       -
    o-animation-delay0.38s;
       
    animation-delay0.38s;
    }

    .
    vuload #vuitems_4 {
       
    -moz-animation-delay0.58s;
       -
    webkit-animation-delay0.58s;
       -
    ms-animation-delay0.58s;
       -
    o-animation-delay0.58s;
       
    animation-delay0.58s;
    }

    .
    vuload #vuitems_5 {
       
    -moz-animation-delay0.77s;
       -
    webkit-animation-delay0.77s;
       -
    ms-animation-delay0.77s;
       -
    o-animation-delay0.77s;
       
    animation-delay0.77s;
    }

    @-
    moz-keyframes orbit {
       
    0% {
       
    opacity1;
       
    z-index:99;
       -
    moz-transformrotate(180deg);
       -
    moz-animation-timing-function: ease-out;
       }

       
    7% {
       
    opacity1;
       -
    moz-transformrotate(300deg);
       -
    moz-animation-timing-function: linear;
       -
    moz-origin:0%;
       }

       
    30% {
       
    opacity1;
       -
    moz-transform:rotate(410deg);
       -
    moz-animation-timing-function: ease-in-out;
       -
    moz-origin:7%;
       }

       
    39% {
       
    opacity1;
       -
    moz-transformrotate(645deg);
       -
    moz-animation-timing-function: linear;
       -
    moz-origin:30%;
       }

       
    70% {
       
    opacity1;
       -
    moz-transformrotate(770deg);
       -
    moz-animation-timing-function: ease-out;
       -
    moz-origin:39%;
       }

       
    75% {
       
    opacity1;
       -
    moz-transformrotate(900deg);
       -
    moz-animation-timing-function: ease-out;
       -
    moz-origin:70%;
       }

       
    76% {
       
    opacity0;
       -
    moz-transform:rotate(900deg);
       }

       
    100% {
       
    opacity0;
       -
    moz-transformrotate(900deg);
       }
    }

    @-
    webkit-keyframes orbit {
       
    0% {
       
    opacity1;
       
    z-index:99;
       -
    webkit-transformrotate(180deg);
       -
    webkit-animation-timing-function: ease-out;
       }

       
    7% {
       
    opacity1;
       -
    webkit-transformrotate(300deg);
       -
    webkit-animation-timing-function: linear;
       -
    webkit-origin:0%;
       }

       
    30% {
       
    opacity1;
       -
    webkit-transform:rotate(410deg);
       -
    webkit-animation-timing-function: ease-in-out;
       -
    webkit-origin:7%;
       }

       
    39% {
       
    opacity1;
       -
    webkit-transformrotate(645deg);
       -
    webkit-animation-timing-function: linear;
       -
    webkit-origin:30%;
       }

       
    70% {
       
    opacity1;
       -
    webkit-transformrotate(770deg);
       -
    webkit-animation-timing-function: ease-out;
       -
    webkit-origin:39%;
       }

       
    75% {
       
    opacity1;
       -
    webkit-transformrotate(900deg);
       -
    webkit-animation-timing-function: ease-out;
       -
    webkit-origin:70%;
       }

       
    76% {
       
    opacity0;
       -
    webkit-transform:rotate(900deg);
       }

       
    100% {
       
    opacity0;
       -
    webkit-transformrotate(900deg);
       }
    }

    @-
    ms-keyframes orbit {
       
    0% {
       
    opacity1;
       
    z-index:99;
       -
    ms-transformrotate(180deg);
       -
    ms-animation-timing-function: ease-out;
       }

       
    7% {
       
    opacity1;
       -
    ms-transformrotate(300deg);
       -
    ms-animation-timing-function: linear;
       -
    ms-origin:0%;
       }

       
    30% {
       
    opacity1;
       -
    ms-transform:rotate(410deg);
       -
    ms-animation-timing-function: ease-in-out;
       -
    ms-origin:7%;
       }

       
    39% {
       
    opacity1;
       -
    ms-transformrotate(645deg);
       -
    ms-animation-timing-function: linear;
       -
    ms-origin:30%;
       }

       
    70% {
       
    opacity1;
       -
    ms-transformrotate(770deg);
       -
    ms-animation-timing-function: ease-out;
       -
    ms-origin:39%;
       }

       
    75% {
       
    opacity1;
       -
    ms-transformrotate(900deg);
       -
    ms-animation-timing-function: ease-out;
       -
    ms-origin:70%;
       }

       
    76% {
       
    opacity0;
       -
    ms-transform:rotate(900deg);
       }

       
    100% {
       
    opacity0;
       -
    ms-transformrotate(900deg);
       }
    }

    @
    keyframes orbit {
       
    0% {
       
    opacity1;
       
    z-index:99;
       
    transformrotate(180deg);
       
    animation-timing-function: ease-out;
       }

       
    7% {
       
    opacity1;
       
    transformrotate(300deg);
       
    animation-timing-function: linear;
       
    origin:0%;
       }

       
    30% {
       
    opacity1;
       
    transform:rotate(410deg);
       
    animation-timing-function: ease-in-out;
       
    origin:7%;
       }

       
    39% {
       
    opacity1;
       
    transformrotate(645deg);
       
    animation-timing-function: linear;
       
    origin:30%;
       }

       
    70% {
       
    opacity1;
       
    transformrotate(770deg);
       
    animation-timing-function: ease-out;
       
    origin:39%;
       }

       
    75% {
       
    opacity1;
       
    transformrotate(900deg);
       
    animation-timing-function: ease-out;
       
    origin:70%;
       }

       
    76% {
       
    opacity0;
       
    transform:rotate(900deg);
       }

       
    100% {
       
    opacity0;
       
    transformrotate(900deg);
       }
    }

    @-
    o-keyframes orbit {
       
    0% {
       
    opacity1;
       
    z-index:99;
       -
    o-transformrotate(180deg);
       -
    o-animation-timing-function: ease-out;
       }

       
    7% {
       
    opacity1;
       -
    o-transformrotate(300deg);
       -
    o-animation-timing-function: linear;
       -
    o-origin:0%;
       }

       
    30% {
       
    opacity1;
       -
    o-transform:rotate(410deg);
       -
    o-animation-timing-function: ease-in-out;
       -
    o-origin:7%;
       }

       
    39% {
       
    opacity1;
       -
    o-transformrotate(645deg);
       -
    o-animation-timing-function: linear;
       -
    o-origin:30%;
       }

       
    70% {
       
    opacity1;
       -
    o-transformrotate(770deg);
       -
    o-animation-timing-function: ease-out;
       -
    o-origin:39%;
       }

       
    75% {
       
    opacity1;
       -
    o-transformrotate(900deg);
       -
    o-animation-timing-function: ease-out;
       -
    o-origin:70%;
       }

       
    76% {
       
    opacity0;
       -
    o-transform:rotate(900deg);
       }

       
    100% {
       
    opacity0;
       -
    o-transformrotate(900deg);
       }
    }
    HTML
    HTML:
    <div class="vuload">
        <div class="vuitems" id="vuitems_1">
            <div class="comp">
            </div>
        </div>
        <div class="vuitems" id="vuitems_2">
            <div class="comp">
            </div>
        </div>
        <div class="vuitems" id="vuitems_3">
            <div class="comp">
            </div>
        </div>
        <div class="vuitems" id="vuitems_4">
            <div class="comp">
            </div>
        </div>
        <div class="vuitems" id="vuitems_5">
            <div class="comp">
            </div>
        </div>
    </div>
    Minh hoạ thực: http://doilafuka.com/loading/
    (link có thể ko tồn tại do mình xài host mượn)

    Video demo xem phòng khi link die:


    Bài viết có tham khảo stackoverflow để lấy số % phù hợp

    ...
    Chỉnh sửa lần cuối: 10/3/14
  2. Lose Myself

    Lose Myself Thành viên cấp 2

    Đúng là không ai quan tâm thật :))
    D Jay, Rainy Daykarthus thích bài viết này.
  3. lttung1197

    lttung1197 Thành viên cấp 2

    nhìn còn ảo quá, nếu muốn đầu tư hơn thì mình nghĩ nên xem qua 1 chút kiến thức về con lắc đơn với chuyển động rơi tự do . áp dụng vô để thông số phần trăm nó tốt hơn
  4. banbaonylong

    banbaonylong Ko phải assmin

  5. superman92

    superman92 Mới đăng kí

    cách này cũng hay, để test thử xem thế nào, thanks bác chủ thớt :)
  6. lttung1197

    lttung1197 Thành viên cấp 2

    kiến thức vật lý cấp 3 ấy
    v=v0+gt , rồi tốc độ góc, để tăng dần vận tốc của viên bi từ trên đỉnh (vận tốc nhỏ nhất) đến đáy (vận tốc lớn nhất) theo 1 gia tốc nào đó (ví dụ như tính trong nửa giây thứ nhất bi sẽ đi dc mấy phần đường tròn, từ đó chuyển sang số đo góc của bi chạy trong nửa giây đó, rồi tiếp tục cho nửa giây tiếp theo... để dc phần đi xuống, còn phần đi lên thực ra chỉ là phần đi xuống làm ngược lại), cho nó có cảm giác rơi rớt , chứ ở cái demo trong link của bạn thấy chỉ có 2 vận tốc chuyển từ chậm sang nhanh chứ ko thấy vận tốc tăng dần
  7. banbaonylong

    banbaonylong Ko phải assmin

    lttung1197 có thấy cái loading win8 chưa thế?

    mời bạn giúp chỉnh sửa chứ mình tốt nghiệp cấp 3 lâu nên mấy cái bá láp đó ko nhớ :D
    hatay1712 thích bài viết này
  8. Ngoisaotrencat

    Ngoisaotrencat Thành viên cấp 1

    code nhiều quá đọc mệt xỉu luôn
  9. lttung1197

    lttung1197 Thành viên cấp 2

    thấy cái đó miết =.=
    1 là làm theo cách mình, lục lại kiến thức 1 chút với đụng vô tính toán , 2 là mô phỏng, lấy phần trăm từ mấy cái hình loading trên mạng hay có sẵn trong máy
    mình ko giúp dc, bận thi cử =.=
  10. banbaonylong

    banbaonylong Ko phải assmin

    cưng đang đùa à? css3 tính toán j?

    biết thì chỉnh jùm, ko biết bớt chém
    hatay1712 thích bài viết này
  11. Bảo Trần

    Bảo Trần Thành viên cấp 2

    hehe.! để thử phát :-bd
  12. learn.by.hard

    learn.by.hard Thành viên cấp 2

    một hiệu ứng tưởng chừng đơn giản nhưng code không hề đơn giản :D
  13. lttung1197

    lttung1197 Thành viên cấp 2

    tính toán dựa trên các kiến thức vật lý để lấy thông số làm chuyển động mượt hơn, ko phải tính trong css
    bỏ css quá lâu rồi, có muốn giúp cũng ko giúp dc
    góp ý vậy thôi, muốn tối ưu thì làm, ko thì thôi, mình chẳng chém gì cả
  14. banbaonylong

    banbaonylong Ko phải assmin

    vấn đề là có coi tên thớt ko? CSS3 chứ tính đc cái j?
  15. caphenhiepanh

    caphenhiepanh Thành viên cấp 1

    bác @lttung119 bác học vãi , đó giờ bác làm preload bằng gì thế
  16. hatay1712

    hatay1712 Thành viên cấp 4

    Có nên cho hòn bi đó trọng lượng để tính toán vận tốc cho chính xác không nhỉ?
    :)):)):))
  17. lttung1197

    lttung1197 Thành viên cấp 2

    [​IMG]
    đây nhá banbaonylong caphenhiepanh hatay1712
    áp dụng công thức tính góc đàng hoàng
    còn nhớ phương trình dao động đầu lớp 12 : alpha=alpha0*cos(omega*t+phi) ko
    nếu thấy ổn thì reply , mình cung cấp số liệu
    ps: à mà làm trên after effect nên ko có code css đâu
    pss : hatay1712 vận tốc không phụ thuộc vào khối lượng nha bợn :)
    hatay1712 thích bài viết này
  18. hatay1712

    hatay1712 Thành viên cấp 4

    Tính vận tốc tử tế rồi sao vẫn thấy nó chạy không thật vậy, chạy giật giật trông kì lắm. Hòn bi đi đầu lên hết đỉnh rồi, sang sườn dốc bên kia rồi lại gần như đứng yên một lúc là thế nào?
  19. hatay1712

    hatay1712 Thành viên cấp 4

    Hòn bi cuois cùng thì chưa tới đỉnh đã mất đà và gần như đứng yên sau đó lại lên dốc tiếp là sao?
  20. hatay1712

    hatay1712 Thành viên cấp 4

    Nếu không bàn đến vận tốc vật lí chính xác thì bạn làm thế là rất tốt rồi, nhìn cũng thấy đẹp hơn của banbaolylong
    Chỉnh sửa lần cuối: 25/6/14

Ủng hộ diễn đàn