html5 灯笼旋转特效,HTML5 CSS3大红灯笼高高挂动画

CSS

语言：

CSSSCSS

确定

body {

padding: 25% 30%;

background-color: #000;

background-repeat: no-repeat;

}

div {

height: 100px;

width: 100px;

border: solid 1px #f00;

border-radius: 30px;

-webkit-box-shadow: 0px 0px 206px 34px rgba(250, 108, 0, 1);

-moz-box-shadow: 0px 0px 206px 34px rgba(250, 108, 0, 1);

box-shadow: 0px 0px 206px 34px rgba(250, 108, 0, 1);

background-color: #f00;

}

div:before {

height: 20px;

width: 60px;

background-color: #000;

content: " ";

display: block;

margin-top: -21px;

border-radius: 5px;

margin-left: 20px;

border: solid 1px #333;

}

div:after {

display: block;

border: solid 1px #333;

height: 20px;

width: 60px;

background-color: #000;

content: " ";

margin-left: 20px;

border-radius: 5px;

}

span {

display: block;

width: 100%;

height: 100%;

border-radius: 30px;

background-color: #ff0;

-webkit-box-shadow: inset 0px 0px 50px 34px rgba(250, 0, 0, 1);

-moz-box-shadow: inset 0px 0px 50px 34px rgba(250, 0, 0, 1);

box-shadow: inset 0px 0px 70px 34px rgba(250, 0, 0, 1);

text-align: center;

padding-top: 50%;

color: orange;

font-family: "Microsoft Yahei";

}

div {

-moz-animation: 3s ease 0s normal none infinite swing;

-moz-transform-origin: center top;

-webkit-animation: swing 3s infinite ease-in-out;

-webkit-transform-origin: 50% -100px;

}

@-moz-keyframes swing {

0% {

-moz-transform: rotate(-10deg)

}

50% {

-moz-transform: rotate(10deg)

}

100% {

-moz-transform: rotate(-10deg)

}

}

@-webkit-keyframes swing {

0% {

-webkit-transform: rotate(-10deg)

}

50% {

-webkit-transform: rotate(10deg)

}

100% {

-webkit-transform: rotate(-10deg)

}

}