CSS Implementation button and line breathing light effect

1. [Code]style
View Sourceprint?
01
<style>
02
body{
03
Font-family: ' Segoe UI Light ', ' Segoe UI ', Arial, ' Microsoft Jas Black ', Sans-serif;
04
font-size:20px;
05
Color: #333333;
06

07
}
08
. Breath {
09
margin:100px Auto;
10
Text-indent:-999em;
11
height:4px;
12
line-height:4px;
13
width:50px;
14
Overflow:hidden;
15

16
Background: #99dd33;
17
Color: #fff;
18
opacity:0.1;
19

20
-webkit-box-shadow:0 0 5px #99dd33;
21st
-moz-box-shadow:0 0 5px #99dd33;
22
-ms-box-shadow:0 0 5px #99dd33;
23
-o-box-shadow:0 0 5px #99dd33;
24
box-shadow:0 0 5px #99dd33;
25
-webkit-border-radius:2px;
26
-moz-border-radius:2px;
27
-ms-border-radius:2px;
28
-o-border-radius:2px;
29
border-radius:2px;
30

31
-webkit-animation-name:breath;
32
-webkit-animation-duration:6s; * * person's normal breathing time is 3 seconds each time, the deep breath time is 6 seconds each time * *
33
-webkit-animation-timing-function:ease-in-out;
34
-webkit-animation-iteration-count:infinite;
35
}
36

37
@-webkit-keyframes ' Breath ' {
38
from {
39
opacity:0.1;
40
}
41
50% {
42
Opacity:1;
43
}
44
to {
45
opacity:0.1;
46
}
47
}
48

49
@-webkit-keyframes ' Breath2 ' {
50
from {
51
opacity:0.5;
52
}
53
50% {
54
Opacity:1;
55
}
56
to {
57
opacity:0.5;
58
}
59
}
60

61
. size2{
62

63
width:100px;
64
height:30px;
65
line-height:25px;
66
text-indent:0;
67
Backgroundrange;
68
Text-align:center;
69
text-shadow:1px 1px 3px #333;
70

71
-webkit-box-shadow:0 0 5px Orange;
72
-moz-box-shadow:0 0 5px Orange;
73
-ms-box-shadow:0 0 5px Orange;
74
-o-box-shadow:0 0 5px Orange;
75
box-shadow:0 0 5px Orange;
76

77
-webkit-animation-name:breath2;
78
}
79
</style>
2. [Code]body
1
<div class= "Breath" title= "Breathing Line" >line</div>
2
<div class= "Breath size2" title= "Breathing Buttons" > Buttons </div>
Personality Mouse icon
Source of this fragment: http://www.huiyi8.com/shubiao/gexing/