@-moz-keyframes rotate_flex{0%{-moz-transform:rotate(-360deg)}}旋转效果
需求（从左到右）：
1、当鼠标移动到第一个时候，圆圈会变360度旋转，圆圈颜色变成深蓝色；
2、当鼠标移动到第二个时候，盾牌里面的白色变成深蓝色，还有锁颜色会变成白色，然后锁扣进行180度从左像右旋转，锁上一点再打开！
3、当鼠标移动到第三个时候，下面横条变成浅蓝色，中间竖横条从下面隐藏到显示，颜色变成深蓝色；上面箭头的那个也是一样的！
HTML结构：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>transition动画</title> <style type="text/css"> html{color:#333;background:#f3f3f3;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}li{list-style:none;} caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom}input,textarea,select,strong{font-family:inherit;font-size:inherit;}input,textarea,select{*font-size:100%;}legend{color:#333;}.clear{height:0;font-size:0;line-height:0;clear:both; display:block;}body{font-size:12px;font-family:tahoma,verdana,arial,helvetica,sans-serif;text-align:center;color:#333; line-height:20px;}a{color:#816353;text-decoration:none;}a:hover{color:#c01313;}.clearfix{zoom:1;}.clearfix:after{content:'\0020';display:block;height:0;clear:both;} .guide_wap{ width:1198px; border:1px solid #e6e6e6; background:#fff; height:84px; margin:15px auto;} .invest_guide{ float:left;} .invest_guide li{ width:279px; float:left; height:84px;} .invest_guide li a{ display:block; width:100%; height:100%;} .invest_guide li a:hover{ cursor:pointer;} .animate_icons,.animate_icons span{background:url(http://images.cnblogs.com/cnblogs_com/chenguiya/643079/o_animation_s.png) -999em -999em no-repeat;} .animate_icons{ float:left; position:relative; width:100px; height:100%; } .animate_icons span{ position:absolute; display:inline-block; font-size:0;}
.n_flexible .animate_icons{ background-position: -12px -201px;} .n_flexible a:hover .animate_icons .icon1{ width:53px; height:53px; background-position:-231px -217px; left:26px; top:16px;-webkit-animation:rotate_flex 2s linear infinite;-moz-animation:rotate_flex 2s linear infinite} @-webkit-keyframes rotate_flex{0%{-webkit-transform:rotate(-360deg)}}@-moz-keyframes rotate_flex{0%{-moz-transform:rotate(-360deg)}}@keyframes rotate_flex{0%{transform:rotate(-360deg)}} .n_flexible a:hover .animate_icons .icon2{ width:42px; height:59px; background-position:-326px -211px; left:27px; top:12px;} .invest_guide li a:hover .animate_icons{ background-position:-999em -999em;}
.n_safe .animate_icons{ background-position:-12px -25px;} .n_safe a:hover .animate_icons .icon1{ width:47px; height:51px; background-position:-235px -41px; left:30px; top:16px;} .n_safe a:hover .animate_icons .icon2{ width:21px; height:14px; background-position:-321px -66px; left:43px; top:38px;} .n_safe a:hover .animate_icons .icon3{ width:15px; height:13px; background-position:-355px -57px; left:46px; top:25px;-webkit-animation:scale_f 1s ease 1;-moz-animation:scale_f 1s ease 1} @-webkit-keyframes scale_f{0%{left:34px;-webkit-transform:scale(-1,1)}80%{top:25px}100%{top:29px}}@-moz-keyframes scale_f{0%{left:34px;-moz-transform:scale(-1,1)}80%{top:25px}100%{top:29px}}
.n_gain .animate_icons{ background-position:-12px -110px;} .n_gain a:hover .animate_icons .icon1{ width:57px; height:3px; background-position:-408px -168px; left:23px; top:65px;} .n_gain a:hover .animate_icons .icon2{ width:51px; height:30px; background-position:-316px -141px; left:26px; top:31px;-webkit-animation:ease_tops 1s ease 1;-moz-animation:ease_tops 1s ease 1} @-webkit-keyframes ease_tops{0%{opacity:0.3; background-position:-316px -111px;}100%{opacity:1;}}@-moz-keyframes ease_tops{0%{opacity:.3; background-position:-316px -111px;}100%{opacity:1}} .n_gain a:hover .animate_icons .icon3{ width:66px; height:35px; background-position:-220px -125px; left:15px; top:15px;-webkit-animation:ease_tops2 1s ease 1;-moz-animation:ease_tops2 1s ease 1} @-webkit-keyframes ease_tops2{0%{opacity:.3; top:30px;}100%{opacity:1;}}@-moz-keyframes ease_tops2{0%{opacity:.3;top:30px;}100%{ opacity:1;}}
.animate_content{ float:left;} .animate_content .title{ margin-top:16px; font-size:18px; color:#ea544a; font-family:"Microsoft YaHei"; font-weight:700;} .animate_content .content{ color:#858585; line-height:16px;} .app_down{ float:right; width:360px; height:84px;} </style> </head> <body> <div class="guide_wap clearfix"> <ul class="invest_guide cl"> <li class="n_flexible"> <a href="" target="_blank"> <div class="animate_icons"> <span class="icon1"> </span> <span class="icon2"> </span> </div> <div class="animate_content"> <p class="title">12%-18%</p> <p class="content">预期年化收益率比同行<br>高30%，100%本息保障</p> </div> </a> </li> <li class="n_safe"> <a href="" target="_blank"> <div class="animate_icons"> <span class="icon1"> </span> <span class="icon2"> </span> <span class="icon3"> </span> </div> <div class="animate_content"> <p class="title">安全专业</p> <p class="content">超低风险<br>第三方担保机构</p> </div> </a> </li> <li class="n_gain"> <a href="" target="_blank"> <div class="animate_icons"> <span class="icon1"> </span> <span class="icon2"> </span> <span class="icon3"> </span> </div> <div class="animate_content"> <p class="title">固定收益</p> <p class="content">项目多样化不同投资<br>门槛，不同期限</p> </div> </a> </li> </ul> <div class="app_down"><a href="" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/chenguiya/643079/t_362app.png" width="360" height="84" border="0"></a></div> </div> </body> </html>
其中做金融项目里面提及到！
浙公网安备 33010602011771号