html--女巫
html,body{
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
}
*{
margin:0;
padding:0;
}
.css_lab{
width:100%;
height:100%;
background:#224;
}
.witch{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin:-60px;
transform:scale(3);
}
.witch:before{
content:"";
display:block;
width:600px;
height:600px;
top:50%;
left:50%;
margin-top:-241px;
margin-left:-266px;
background:radial-gradient(ellipse at center,rgba(255,255,255,1) 0%,rgba(255,255,100,1) 1%, rgba(225,225,200,1) 1%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 100%);
animation:lamp 10s ease 2s infinite;
}
@keyframes lamp{
50%{
opacity:0.2;
transform:scale(.8);
}
}
.witch div,
.witch div:before,
.witch div:after{
content:"";
display:block;
position:absolute;
}
.witch div{
width:100px;
height:100px;
top:50%;
left:20px;
margin-top:-50px;
}
.witch div:nth-child(1){
width:80px;
height:3px;
background:#224;
margin-top:-0.5px;
border-radius:3px;
transform:rotate(14deg);
}
.witch div:nth-child(1):before{
width:20px;
height:20px;
background:#224;
right:-20px;
top:-9px;
border-radius:50px 0 45px 20px/45px 0 50px 20px;
transform:rotate(45deg);
}
.witch div:nth-child(1):after{
width:25px;
height:18px;
right:-25px;
top:-15px;
border-bottom:5px solid #224;
border-radius:45%;
transform:rotate(-30deg);
}
.witch div:nth-child(2){
width:11px;
height:18px;
margin-top:-22px;
left:70px;
background:#224;
border-radius:50px 20px 20px 40px/50px 23px 5px 61px;
transform:rotate(-23deg);
}
.witch div:nth-child(2):before,
.witch div:nth-child(2):after{
width:12px;
height:17px;
background:#224;
left:1px;
top:18px;
border-radius:0 60px 70px 0/0 60px 45px 0;
transform:rotate(64deg);
}
.witch div:nth-child(2):after{
width:10px;
height:10px;
left:-1px;
top:3px;
border-radius:3px;
transform:rotate(42deg);
}
.witch div:nth-child(3){
width:16px;
height:18px;
background:#224;
left:65px;
margin-top:-42px;
border-radius:40px 0 30px 10px/33px 0 30px 35px;
}
.witch div:nth-child(3):before{
width:4px;
height:0px;
margin-top:-12px;
margin-left:8px;
border-radius:30px 0 0 0;
transform:rotate(37deg);
border-left:10px solid transparent;
border-right:2px solid transparent;
border-bottom:20px solid #224;
}
.witch div:nth-child(3):after{
width:39px;
height:8px;
border-bottom:6px solid #224;
border-radius:0 0 30px 30px/0 0 15px 15px;
left:-9px;
top:-3px;
transform:rotate(37deg);
}
.witch div:nth-child(4){
width:6px;
height:8px;
margin-left:51px;
margin-top:-26px;
background:#224;
transform:rotate(-15deg);
}
.witch div:nth-child(4):before{
left:7px;
top:6px;
width:23px;
height:17px;
border-top:4px solid #224;
border-radius:0 50% 0 0;
transform:rotate(20deg);
}
.witch div:nth-child(4):after{
width:4px;
height:7px;
background:#224;
border-radius:1px;
left:-3px;
top:-11px;
transform:rotate(45deg) skewX(-10deg);
}
.witch div:nth-child(5){
width:27px;
height:12px;
background:#224;
margin-left:40px;
margin-top:-1px;
transform:rotate(-9deg);
border-radius:35px 0 30px 30px/50px 0 30px 100px;
}
.witch div:nth-child(5):before,
.witch div:nth-child(5):after{
width:3.5px;
height:5px;
left:9px;
top:26px;
background:#224;
border-radius:0 3px 0 5px;
transform:rotate(-5deg);
}
.witch div:nth-child(5):after{
left:19px;
top:20px;
transform:rotate(-21deg);
}
.witch div:nth-child(6){
width:13px;
height:6px;
margin-left:67px;
margin-top:-25px;
border-radius:50%;
border-left:0px solid transparent;
border-top:1px solid #224;
}
.witch div:nth-child(6):before,
.witch div:nth-child(6):after{
width:3px;
height:8px;
background:#224;
left:-3px;
top:42px;
border-radius:0 2px 10px 30px/0 2px 20px 75px;
transform:rotate(-55deg);
}
.witch div:nth-child(6):after{
left:-12px;
top:51px;
transform:rotate(-40deg);
}
.witch div:nth-child(7){
width:5px;
height:5px;
border-radius:50%;
border-bottom:1px solid #224;
margin-left:44px;
margin-top:-38px;
}
.witch div:nth-child(7):before{
width:5px;
height:5px;
background:#224;
border-radius:1px;
left:1px;
top:5.5px;
transform:rotate(10deg) skewX(-10deg);
box-shadow:1px 1.5px 0 #224,-4px 31px 0 #224;
}
.witch div:nth-child(7):after{
width:5px;
height:3px;
background:#224;
border-radius:3px;
left:2px;
top:11px;
transform:rotate(0deg);
}
.witch div:nth-child(8){
width:25px;
height:28px;
margin-top:6px;
margin-left:47px;
transform:rotate(-25deg);
overflow:hidden;
}
.witch div:nth-child(8):before,
.witch div:nth-child(8):after{
width:5px;
height:50px;
margin-top:-30px;
margin-left:1px;
background:#224;
border-radius:50%;
}
.witch div:nth-child(8):after{
width:5px;
height:50px;
margin-top:-30px;
margin-left:1px;
background:#224;
border-radius:50%;
transform:rotate(-28deg);
}
.witch div:nth-child(9){
width:9px;
height:10px;
margin-top:-11px;
overflow:hidden;
margin-left:56px;
}
.witch div:nth-child(9):before{
width:20px;
height:6px;
bottom:-6px;
left:-23px;
background:none;
border-radius:0 50% 50% 0;
border:5px solid #224;
}
.witch div:nth-child(9):after{
width:18px;
height:18px;
top:-18px;
right:-19px;
background:none;
border-radius:50%;
border:5px solid #224;
}
.witch div:nth-child(10){
width:4px;
height:9px;
border-radius:10px 10px 5px 5px/10px 10px 30px 30px;
background:#224;
margin-top:-14px;
margin-left:39px;
transform:rotate(46deg);
}
.witch div:nth-child(10):before{
width:4px;
height:16px;
border-radius:20px 0 30px 30px/125px;
background:#224;
top:-14px;
left:0px;
transform:rotate(2deg);
}
.witch div:nth-child(10):after{
width:2px;
height:0;
border:1px solid transparent;
border-top:12px solid #224;
top:4px;
left:0px;
}
.witch div:nth-child(11){
width:5px;
height:6px;
border-radius:6px 5px 6px 0/7px 5px 3px 0;
background:#224;
margin-top:-4px;
margin-left:30px;
transform:rotate(35deg);
}
.witch div:nth-child(11):before{
width:9px;
height:7px;
background:#224;
border-radius:4px;
left:1px;
top:-59px;
transform:rotate(-14deg) skewX(-40deg);
}
.witch div:nth-child(11):after{
width:22px;
height:9px;
border-bottom:5px solid #224;
border-radius:0 0 30px 0/0 0 15px 0;
left:1px;
top:-40px;
transform:rotate(21deg);
}
.witch div:nth-child(12){
width:23px;
height:8px;
border-bottom:5px solid #224;
border-radius:0 0 30px 0/0 0 15px 0;
margin-left:58px;
margin-top:-30px;
z-index:1;
transform:rotate(44deg);
}
.witch div:nth-child(12):before{
width:5px;
height:0;
top:19px;
left:-3px;
border-left:1px solid transparent;
border-top:2px solid #224;
transform:rotate(-47deg);
}
.witch div:nth-child(12):after{
width:0;
height:4px;
top:23px;
left:39px;
border-top:1px solid transparent;
border-bottom:1px solid transparent;
border-left:3px solid #224;
transform:rotate(-34deg);
}
.witch div:nth-child(13){
width:12px;
height:15px;
border:1px solid #224;
border-radius:8px 8px 10px 10px/17px 17px 6px 7px;
margin-top:0;
margin-left:7px;
transform:rotate(-20deg);
}
.witch div:nth-child(13):before{
width:10px;
height:3px;
border-radius:8px 8px 0 0;
margin-top:13px;
margin-left:0.5px;
background:#224;
}
.witch div:nth-child(13):after{
width:12px;
height:3px;
border-radius:50%;
margin-top:15px;
margin-left:-0.5px;
background:#224;
}
.witch div:nth-child(14){
width:10px;
height:15px;
background:rgba(100,100,120,0.3);
background:radial-gradient(ellipse at center,rgba(255,255,255,0) 0%,rgba(100,100,120,0.3) 100%);
border-radius:8px 8px 10px 10px/17px 17px 6px 7px;
margin-top:1px;
margin-left:9px;
transform:rotate(-20deg);
}
.witch div:nth-child(14):before{
width:6px;
height:0px;
border:2px solid transparent;
border-bottom:3px solid #224;
top:-4px;
left:0px;
}
.witch div:nth-child(14):after{
width:12px;
height:9px;
border:1px solid transparent;
border-top:1px solid #224;
border-left:1px solid #224;
border-radius:5px;
top:-6px;
left:-2px;
transform:rotate(65deg) skewX(42deg);
}
.css_lab:after{
content:"Created by XX";
display:block;
width:250px;
position:absolute;
bottom:10px;
left:50%;
margin-left:-125px;
text-align:center;
font-size:10pt;
color:#666;
}