返回顶部

收藏

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

发表评论