谷歌网站上css3有趣的特效

今天在谷歌网站上看到一个有趣的css3特效,就扒了下来。效果如图:

源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<style>
@-webkit-keyframes animPos {
    0% {
        -webkit-transform: rotate(90deg) translate(-98%0);
    }
    100% {
        -webkit-transform: rotate(90deg) translate(98%0);
    }
}
@-webkit-keyframes animZOrder {
    0% {
        z-index100;
    }
    100% {
        z-index1;
    }
}
.outer {
    height100px;
    positionabsolute;
    width100px;
    left100px;
    top100px;
}
.running .outer {
    -webkit-animation: animZOrder 3520ms linear infinite;
}
.inner {
    -webkit-transform: rotate(90deg) translate(-98%0);
    border-radius: 50%;
    height100%;
    positionabsolute;
    width100%;
}
.running .inner {
    -webkit-animation: animPos 880ms cubic-bezier(0.4450.050.550.95) infinite alternate;
}
</style>
<div class="main running">
    <div class="outer" style="transform: rotate(45deg); animation-delay: 2640ms;">
        <div class="inner" style="background: linear-gradient(315deg, rgb(0, 85, 221), rgb(0, 119, 255), rgb(0, 119, 255));"></div>
    </div>
    <div class="outer" style="transform: rotate(135deg); animation-delay: 1760ms;">
        <div class="inner" style="background: linear-gradient(225deg, rgb(221, 0, 0), rgb(238, 51, 51), rgb(255, 119, 85));"></div>
    </div>
    <div class="outer" style="transform: rotate(225deg); animation-delay: 0ms;">
        <div class="inner" style="background: linear-gradient(90deg, rgb(0, 119, 68), rgb(0, 153, 68), rgb(85, 187, 85));"></div>
    </div>
    <div class="outer" style="transform: rotate(315deg); animation-delay: 880ms;">
        <div class="inner" style="background: linear-gradient(0deg, rgb(255, 170, 51), rgb(255, 204, 0), rgb(255, 221, 102));"></div>
    </div>
</div>
虚拟主机
《你不知道的JavaScript(中卷)》PDF
《Javascript语言精粹》PDF
《编写高质量JavaScript代码的68个有效方法》PDF
《HTML5从入门到精通》PDF
广告也精彩