html中div流光边框,CSS3 迷你的圆形流光边界

CSS

语言：

CSSSCSS

确定

* {

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

-o-user-select: none;

user-select: none;

-webkit-box-sizing: border-box;

-khtml-box-sizing: border-box;

-moz-box-sizing: border-box;

-ms-box-sizing: border-box;

box-sizing: border-box;

padding: 0;

margin: 0;

outline: none;

list-style: none; }

.throbbers_page {

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-moz-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-moz-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

width: 100%;

height: 100%;

position: fixed; }

.throbbers_page .thobbers_container {

display: block;

position: relative;

width: 550px;

height: 450px;

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-moz-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-moz-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

background: #f0f4f5; }

.throbbers_page .thobbers_container ul.throbber_containers {

display: block;

position: relative;

width: 300px; }

.throbbers_page .thobbers_container ul.throbber_containers > li {

width: 100%;

height: 70px;

display: block;

position: relative;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

margin: 20px 0 20px 0; }

.throbbers_page .thobbers_container ul.throbber_containers > li.throbbers_dark_bg {

background: #363b4a; }

.throbbers_page .thobbers_container ul.throbber_containers > li.throbbers_green_bg {

background: #50b87f; }

.throbbers_page .thobbers_container ul.throbber_containers > li > ul.throbbers_list {

display: block;

position: relative;

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: stretch;

-webkit-align-items: stretch;

-moz-box-align: stretch;

-ms-flex-align: stretch;

align-items: stretch;

-webkit-box-pack: center;

-webkit-justify-content: center;

-moz-box-pack: center;

-ms-flex-pack: center;

justify-content: space-between;

width: 80%;

height: 80%;

margin: 0 auto; }

.throbbers_page .thobbers_container ul.throbber_containers > li > ul.throbbers_list > li {

width: 45px;

height: 70px;

display: block;

position: relative; }

.throbbers_page .throbber {

width: 100%;

height: 100%;

display: -webkit-box;

display: -webkit-flex;

display: -moz-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-moz-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-moz-box-pack: center;

-ms-flex-pack: center;

justify-content: center; }

.throbbers_page .throbber:after {

display: block;

position: relative;

width: 20px;

height: 20px;

-webkit-animation: rotate 0.6s linear infinite;

-moz-animation: rotate 0.6s linear infinite;

-ms-animation: rotate 0.6s linear infinite;

-o-animation: rotate 0.6s linear infinite;

animation: rotate 0.6s linear infinite;

-webkit-border-radius: 100%;

-moz-border-radius: 100%;

border-radius: 100%;

border-top: 1px solid #545a6a;

border-bottom: 1px solid #d4d4db;

border-left: 1px solid #545a6a;

border-right: 1px solid #d4d4db;

content: '';

opacity: 0.5; }

.throbbers_page .throbber.throbber_large:after {

width: 40px;

height: 40px; }

.throbbers_page .throbber.throbber_medium:after {

width: 30px;

height: 30px; }

.throbbers_page .throbber.throbber_small:after {

width: 10px;

height: 10px; }

.throbbers_page .throbber.throbber_green:after {

opacity: 1;

border-top: 1px solid #42a26e;

border-bottom: 1px solid #fff;

border-left: 1px solid #42a26e;

border-right: 1px solid #fff; }

@keyframes rotate {

0% {

transform: rotateZ(-360deg);

-webkit-transform: rotateZ(-360deg);

-moz-transform: rotateZ(-360deg);

-o-transform: rotateZ(-360deg); }

100% {

transform: rotateZ(0deg);

-webkit-transform: rotateZ(0deg);

-moz-transform: rotateZ(0deg);

-o-transform: rotateZ(0deg); } }

@-webkit-keyframes rotate {

0% {

transform: rotateZ(-360deg);

-webkit-transform: rotateZ(-360deg);

-moz-transform: rotateZ(-360deg);

-o-transform: rotateZ(-360deg); }

100% {

transform: rotateZ(0deg);

-webkit-transform: rotateZ(0deg);

-moz-transform: rotateZ(0deg);

-o-transform: rotateZ(0deg); } }

@-moz-keyframes rotate {

0% {

transform: rotateZ(-360deg);

-webkit-transform: rotateZ(-360deg);

-moz-transform: rotateZ(-360deg);

-o-transform: rotateZ(-360deg); }

100% {

transform: rotateZ(0deg);

-webkit-transform: rotateZ(0deg);

-moz-transform: rotateZ(0deg);

-o-transform: rotateZ(0deg); } }

@-o-keyframes rotate {

0% {

transform: rotateZ(-360deg);

-webkit-transform: rotateZ(-360deg);

-moz-transform: rotateZ(-360deg);

-o-transform: rotateZ(-360deg); }

100% {

transform: rotateZ(0deg);

-webkit-transform: rotateZ(0deg);

-moz-transform: rotateZ(0deg);

-o-transform: rotateZ(0deg); } }