多语言展示
当前在线:1090今日阅读:167今日分享:16

如何用html,css3写呼吸灯效果?

如何用html写呼吸灯效果?
工具/原料
1

电脑

2

代码工具

方法/步骤
1

1.添加css样式a.demo { -webkit-animation-name: breathingLight; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite;}a.demo {display:block;line-height: 30px;width: 80px;text-align: center;margin: 100px auto;background: #80CB1B;font-size: 16px;padding: 8px 19px 9px;-moz-box-shadow: 0 0 5px #343434;-webkit-box-shadow: 0 0 5px #fff;box-shadow: 0 0 5px #343434;color: #fff;font-weight: bold;padding: 5px 10px;text-decoration: none;text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);}@-webkit-keyframes 'breathingLight' {from {background-color: #80CB1B;-webkit-box-shadow:0 0 5px #ccc;} 50% {background-color: #B7F20F;-webkit-box-shadow: 0 0 10px #398B08;} to {background-color: #80CB1B;-webkit-box-shadow:0 0 5px #ccc;}}

2

2.添加htnl代码Button

3

3.完整代码Button

推荐信息