返回顶部

收藏

CSS 实现按钮及线呼吸灯效果

更多
<style>
            body{
                font-family:'Segoe UI Light','Segoe UI',Arial,'微软雅黑',sans-serif;
                font-size: 20px;
                color:#333333;

            }
            .breath {
                margin:100px auto;
                text-indent:-999em;
                height:4px;
                line-height: 4px;
                width: 50px;
                overflow:hidden;

                background: #99dd33;
                color: #fff;
                opacity:0.1;

                -webkit-box-shadow: 0 0 5px #99dd33;
                -moz-box-shadow: 0 0 5px #99dd33;
                -ms-box-shadow: 0 0 5px #99dd33;
                -o-box-shadow: 0 0 5px #99dd33;
                box-shadow: 0 0 5px #99dd33;
                -webkit-border-radius:2px;
                -moz-border-radius:2px;
                -ms-border-radius:2px;
                -o-border-radius:2px;
                border-radius:2px;

                -webkit-animation-name: breath;
                -webkit-animation-duration: 6s;     /*人的普通呼吸时间是3秒每次,深呼吸时间是6秒每次*/
                -webkit-animation-timing-function: ease-in-out;
                -webkit-animation-iteration-count: infinite;
            }

            @-webkit-keyframes 'breath' {
                from {
                    opacity:0.1;
                }
                50% {
                    opacity:1;
                }
                to {
                    opacity:0.1;
                }
            }

            @-webkit-keyframes 'breath2' {
                from {
                    opacity:0.5;
                }
                50% {
                    opacity:1;
                }
                to {
                    opacity:0.5;
                }
            }

            .size2{

                width:100px;
                height:30px;
                line-height:25px;
                text-indent:0;
                background:orange;
                text-align:center;
                text-shadow:1px 1px 3px #333;

                -webkit-box-shadow:0 0 5px orange;
                -moz-box-shadow: 0 0 5px orange;
                -ms-box-shadow: 0 0 5px orange;
                -o-box-shadow: 0 0 5px orange;
                box-shadow: 0 0 5px orange;

                -webkit-animation-name: breath2;
            }
        </style>

标签:css

收藏

0人收藏

支持

0

反对

0

相关聚客文章
  1. 博主 发表 2017-12-02 00:00:00 Web Animation API - 在 JavaScript 中释放 CSS keyframes
  2. Airen 发表 2018-01-09 15:37:38 CSS Grid和Flexbox解决实际的布局问题
  3. Airen 发表 2018-01-06 18:23:35 理解CSS布局和BFC
  4. 博主 发表 2017-12-20 16:32:46 CSS selector simplifier regular expression in Java
  5. xubiao.zhuang 发表 2017-12-28 15:08:19 杨浩涌:将军赶路,莫追小兔
  6. Aaron 发表 2017-12-23 16:00:00 谈谈css的加载及加载循序
  7. 设计 达人 发表 2017-12-20 13:30:28 小创意:圣诞球切换开关
  8. zak 发表 2017-12-19 02:20:44 css禁止鼠标事件
  9. Leon 发表 2017-12-19 13:28:08 通过css修改select下拉列表框的默认样式
  10. asuncool@gmail.com(y 发表 2017-12-15 03:32:59 网页加载了CSS,却不生效的奇葩问题
  11. 米豆网 - 1000seo 发表 2017-12-05 08:32:33 纯css 实现 Star Rating
  12. zee 发表 2017-01-18 03:57:48 按钮加载效果实现

发表评论