css浅紫色,紫色- CSS烟雾效果

css

@import url(https://fonts.googleapis.com/css?family=Lato:400,300);

body {

background: #332B33;

}

.h {

text-align: center;

background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/overlay.png");

width: 500px;

height: 500px;

overflow: hidden;

position: absolute;

border: 4px solid white;

left: 0;

right: 0;

margin: auto;

top: 50%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

}

.h h1, .h h2 {

position: absolute;

z-index: 3;

text-transform: uppercase;

text-shadow: 0px 10px rgba(0, 0, 0, 0.15);

left: 0;

right: 0;

margin: auto;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

font-family: lato;

font-weight: 300;

color: white;

}

.h h1 {

letter-spacing: 28px;

font-size: 14px;

top: 50%;

}

.h h2 {

letter-spacing: 10px;

font-size: 10px;

top: 60%;

}

.h .c {

border: 2px solid rgba(255, 255, 255, 0.1);

border-radius: 400px;

position: absolute;

margin: auto;

}

.h .c:nth-of-type(1) {

box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);

width: 6px;

height: 1px;

right: 10px;

bottom: 10px;

-webkit-filter: blur(8.33333px);

-webkit-filter: blur(8.33333px);

-moz-filter: blur(8.33333px);

-o-filter: blur(8.33333px);

-ms-filter: blur(8.33333px);

filter: url(#blur);

-webkit-transform-origin: 4px 2px;

transform-origin: 4px 2px;

-webkit-animation: spin 3s 0.1s linear infinite;

animation: spin 3s 0.1s linear infinite;

background: rgba(93, 34, 205, 0.9875);

}

.h .c:nth-of-type(2) {

box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);

width: 12px;

height: 2px;

right: 20px;

bottom: 20px;

-webkit-filter: blur(8.66667px);

-webkit-filter: blur(8.66667px);

-moz-filter: blur(8.66667px);

-o-filter: blur(8.66667px);

-ms-filter: blur(8.66667px);

filter: url(#blur);

-webkit-transform-origin: 8px 4px;

transform-origin: 8px 4px;

-webkit-animation: spin 3s 0.2s linear infinite;

animation: spin 3s 0.2s linear infinite;

background: rgba(96, 35, 205, 0.975);

}

.h .c:nth-of-type(3) {

box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);

width: 18px;

height: 3px;

right: 30px;

bottom: 30px;

-webkit-filter: blur(9px);

-webkit-filter: blur(9px);

-moz-filter: blur(9px);

-o-filter: blur(9px);

-ms-filter: blur(9px);

filter: url(#blur);

-webkit-transform-origin: 12px 6px;

transform-origin: 12px 6px;

-webkit-animation: spin 3s 0.3s linear infinite;

animation: spin 3s 0.3s linear infinite;

background: rgba(99, 36, 205, 0.9625);

}

.h .c:nth-of-type(4) {

box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);

width: 24px;

height: 4px;

right: 40px;

bottom: 40px;

-webkit-filter: blur(9.33333px);

-webkit-filter: blur(9.33333px);

-moz-filter: blur(9.33333px);

-o-filter: blur(9.33333px);

-ms-filter: blur(9.33333px);

filter: url(#blur);

-webkit-transform-origin: 16px 8px;

transform-origin: 16px 8px;

-webkit-animation: spin 3s 0.4s linear infinite;

animation: spin 3s 0.4s linear infinite;

background: rgba(102, 37, 205, 0.95);

}

.h .c:nth-of-type(5) {

box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);

width: 30px;

height: 5px;

right: 50px;

bottom: 50px;

-webkit-filter: blur(9.66667px);

-webkit-filter: blur(9.66667px);

-moz-filter: blur(9.66667px);

-o-filter: blur(9.66667px);

-ms-filter: blur(9.66667px);

filter: url(#blur);

-webkit-transform-origin: 20px 10px;

transform-origin: 20px 10px;

-webkit-animation: spin 3s 0.5s linear infinite;

animation: spin 3s 0.5s linear infinite;

background: rgba(105, 38, 205, 0.9375);

}

.h .c:nth-of-type(6) {

box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);

width: 36px;

height: 6px;

right: 60px;

bottom: 60px;

-webkit-filter: blur(10px);

-webkit-filter: blur(10px);

-moz-filter: blur(10px);

-o-filter: blur(10px);

-ms-filter: blur(10px);

filter: url(#blur);

-webkit-transform-origin: 24px 12px;

transform-origin: 24px 12px;

-webkit-animation: spin 3s 0.6s linear infinite;

animation: spin 3s 0.6s linear infinite;

background: rgba(108, 39, 205, 0.925);

}

.h .c:nth-of-type(7) {

box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);

width: 42px;

height: 7px;

right: 70px;

bottom: 70px;

-webkit-filter: blur(10.33333px);

-webkit-filter: blur(10.33333px);

-moz-filter: blur(10.33333px);

-o-filter: blur(10.33333px);

-ms-filter: blur(10.33333px);

filter: url(#blur);

-webkit-transform-origin: 28px 14px;

transform-origin: 28px 14px;

-webkit-animation: spin 3s 0.7s linear infinite;

animation: spin 3s 0.7s linear infinite;

background: rgba(111, 40, 205, 0.9125);

}

.h .c:nth-of-type(8) {

box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);

width: 48px;

height: 8px;

right: 80px;

bottom: 80px;

-webkit-filter: blur(10.66667px);

-webkit-filter: blur(10.66667px);

-moz-filter: blur(10.66667px);

-o-filter: blur(10.66667px);

-ms-filter: blur(10.66667px);

filter: url(#blur);

-webkit-transform-origin: 32px 16px;

transform-origin: 32px 16px;

-webkit-animation: spin 3s 0.8s linear infinite;

animation: spin 3s 0.8s linear infinite;

background: rgba(114, 41, 205, 0.9);

}

.h .c:nth-of-type(9) {

box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);

width: 54px;

height: 9px;

right: 90px;

bottom: 90px;

-webkit-filter: blur(11px);

-webkit-filter: blur(11px);

-moz-filter: blur(11px);

-o-filter: blur(11px);

-ms-filter: blur(11px);

filter: url(#blur);

-webkit-transform-origin: 36px 18px;

transform-origin: 36px 18px;

-webkit-animation: spin 3s 0.9s linear infinite;

animation: spin 3s 0.9s linear infinite;

background: rgba(117, 42, 205, 0.8875);

}

.h .c:nth-of-type(10) {

box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);

width: 60px;

height: 10px;

right: 100px;

bottom: 100px;

-webkit-filter: blur(11.33333px);

-webkit-filter: blur(11.33333px);

-moz-filter: blur(11.33333px);

-o-filter: blur(11.33333px);

-ms-filter: blur(11.33333px);

filter: url(#blur);

-webkit-transform-origin: 40px 20px;

transform-origin: 40px 20px;

-webkit-animation: spin 3s 1s linear infinite;

animation: spin 3s 1s linear infinite;

background: rgba(120, 43, 205, 0.875);

}

.h .c:nth-of-type(11) {

box-shadow: 3px 0px rgba(255, 255, 255, 0), 6px -5px rgba(10, 0, 0, 0);

width: 66px;

height: 11px;

right: 110px;

bottom: 110px;

-webkit-filter: blur(11.66667px);

-webkit-filter: blur(11.66667px);

-moz-filter: blur(11.66667px);

-o-filter: blur(11.66667px);

-ms-filter: b