呼吸灯

来源：互联网发布：计算机绘图软件编辑：程序博客网时间：2024/04/25 19:47
.breathe {    border: 1px solid rgba(245, 206, 72, .8);    box-shadow: 0 1px 40px rgba(245, 206, 72, .3);    -webkit-animation: breathe ease-in-out 1s infinite alternate;    -moz-animation: breathe ease-in-out 1s infinite alternate;    -o-animation: breathe ease-in-out 1s infinite alternate;    animation: breathe ease-in-out 1s infinite alternate;    -ms-animation: breathe ease-in-out 1s infinite alternate;}@keyframes breathe {    0% {        opacity: .8;        border: 1px solid rgba(245, 206, 72, .5);        transform: scale(.8);        -webkit-transform: scale(.8);        -ms-transform: scale(.8);        -moz-transform: scale(.8);        -o-transform: scale(.8);        box-shadow: 0px 0px 30px rgba(245, 206, 72, .3);    }    100% {        opacity: 1;        transform: scale(1);        border: 1px solid rgba(245, 206, 72, .8);        border: 1px solid rgba(245, 206, 72, 1);        box-shadow: 0 1px 30px rgba(245, 206, 72, 1);        -webkit-transform: scale(1);        -ms-transform: scale(1);        -moz-transform: scale(1);        -o-transform: scale(1);    }}@-ms-keyframes breathe {    0% {        opacity: .8;        border: 1px solid rgba(245, 206, 72, .5);        -ms-transform: scale(.8);        box-shadow: 0px 0px 30px rgba(245, 206, 72, .3);    }    100% {        opacity: 1;        border: 1px solid rgba(245, 206, 72, .8);        border: 1px solid rgba(245, 206, 72, 1);        box-shadow: 0 1px 30px rgba(245, 206, 72, 1);        -ms-transform: scale(1);    }}@-o-keyframes breathe {    0% {        opacity: .8;        border: 1px solid rgba(245, 206, 72, .5);        -o-transform: scale(.8);        box-shadow: 0px 0px 30px rgba(245, 206, 72, .3);    }    100% {        opacity: 1;        border: 1px solid rgba(245, 206, 72, .8);        border: 1px solid rgba(245, 206, 72, 1);        box-shadow: 0 1px 30px rgba(245, 206, 72, 1);        -o-transform: scale(1);    }}@-moz-keyframes breathe {    0% {        opacity: .8;        border: 1px solid rgba(245, 206, 72, .5);        -moz-transform: scale(.8);        box-shadow: 0px 0px 30px rgba(245, 206, 72, .3);    }    100% {        opacity: 1;        border: 1px solid rgba(245, 206, 72, .8);        border: 1px solid rgba(245, 206, 72, 1);        box-shadow: 0 1px 30px rgba(245, 206, 72, 1);        -moz-transform: scale(1);    }}@-webkit-keyframes breathe {    0% {        opacity: .8;        border: 1px solid rgba(245, 206, 72, .5);        -webkit-transform: scale(.8);        box-shadow: 0px 0px 30px rgba(245, 206, 72, .3);    }    100% {        opacity: 1;        -webkit-transform: scale(1);        border: 1px solid rgba(245, 206, 72, .8);        border: 1px solid rgba(245, 206, 72, 1);        box-shadow: 0 1px 30px rgba(245, 206, 72, 1);    }}
阅读全文
0 0