css 外圆角旋转,CSS3 图片圆角旋转滤镜动效

CSS

语言：

CSSSCSS

确定

#animation{

width:180px;

height:180px;

background-image:url(http://www.qqttxx.com/upimg/allimg/120213/co120213120630-12.jpg);

border-radius:90px;

border:8px solid #ffffff;

-webkit-animation:swing 1s .2s ease both;

-moz-animation:swing 1s .2s ease both;}

@-webkit-keyframes swing{

20%,40%,60%,80%,100%{-webkit-transform-origin:center center}

20%{-webkit-transform:rotate(15deg)}

40%{-webkit-transform:rotate(-10deg)}

60%{-webkit-transform:rotate(5deg)}

80%{-webkit-transform:rotate(-5deg)}

100%{-webkit-transform:rotate(0deg)}

}

@-moz-keyframes swing{

20%,40%,60%,80%,100%{-moz-transform-origin:center center}

20%{-moz-transform:rotate(15deg) }

40%{-moz-transform:rotate(-10deg)}

60%{-moz-transform:rotate(5deg)}

80%{-moz-transform:rotate(-5deg)}

100%{-moz-transform:rotate(0deg)}

}

#animation:hover{

border-radius:90px;

border-color:#72ae00;

border-left:8px solid #ddcc00;

border-right:8px solid yellow;

border-top:8px solid #9900cc;

-webkit-animation:rotateIn 1s .2s ease both;

-moz-animation:rotateIn 1s .2s ease both;}

@-webkit-keyframes rotateIn{

0%{-webkit-transform-origin:center center;

-webkit-transform:rotate(-200deg);

opacity:0}

100%{-webkit-transform-origin:center center;

-webkit-transform:rotate(0);

opacity:1}

}