CSS 實現按鈕及線呼吸燈效果

1. [代碼]style    
view sourceprint?
01
<style>
02
            body{
03
                font-family:'Segoe UI Light','Segoe UI',Arial,'微軟雅黑',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;
21
                -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;     /*人的普通呼吸時間是3秒每次，深呼吸時間是6秒每次*/
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. [代碼]body     
1
<div class="breath" title="呼吸線">line</div>
2
<div class="breath size2" title="呼吸按鈕">按鈕</div>
個性鼠標圖標
本片段來源：http://www.huiyi8.com/shubiao/gexing/