html
|
1
2
3
4
5
6
7
8
9
|
<div class="icon-warnCom"> <icon class="icon-warns"><i class="dot"></i><i class="pulse"></i></icon> </div> <div class="icon-warnCom1"> <icon class="icon-warns"><i class="dot"></i><i class="pulse"></i></icon> </div> <div class="icon-warnCom2"> <icon class="icon-warns"><i class="dot"></i><i class="pulse"></i></icon> </div> |
css
|
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
body { width: 100%; height: 100%; background-color: black; } @keyframes warn { 0% { transform: scale(0); opacity: 0.0; } 25% { transform: scale(0); opacity: 0.1; } 50% { transform: scale(0.1); opacity: 0.3; } 75% { transform: scale(0.2); opacity: 0.5; } 100% { transform: scale(0.3); opacity: 0.0; } } .icon-warnCom { position: absolute; width: 12px; height: 12px; background-color: #ffd803; border-radius: 100%; top: 100px; left: 100px; } .icon-warns { position: relative; width: 100%; height: 100%; display: block; } /* 保持大小不变的小圆圈 */ .dot { position: absolute; left: -44px; top: -44px; width: 60px; height: 60px; -webkit-border-radius: 100; -moz-border-radius: 100; border: 20px solid #f6c100; border-radius: 100%; z-index: 2; opacity: 0; -webkit-animation: warn 2.5s ease-out; -moz-animation: warn 2.5s ease-out; animation: warn 2.5s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* 产生动画（向外扩散变大）的圆圈 */ .pulse { position: absolute; left: -44px; top: -44px; width: 60px; height: 60px; border: 20px solid #f6c100; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; z-index: 1; opacity: 1; -webkit-animation: warn 1.5s ease-out; -moz-animation: warn 1.5s ease-out; animation: warn 1.5s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } .icon-warnCom1 { position: absolute; width: 12px; height: 12px; background-color: #ffd803; border-radius: 100%; top: 50px; left: 50px; } .icon-warnCom2 { position: absolute; width: 12px; height: 12px; background-color: #ffd803; border-radius: 100%; top: 100px; left: 50px; } |
