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;? ???/*人的普通呼吸時(shí)間是3秒每次，深呼吸時(shí)間是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>
個(gè)性鼠標(biāo)圖標(biāo)
本片段來源：http://www.huiyi8.com/shubiao/gexing/

轉(zhuǎn)載于:https://blog.51cto.com/ygjlv/1429904

總結(jié)

以上是生活随笔為你收集整理的CSS 实现按钮及线呼吸灯效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。