旋转切换字体
效果图
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>give for you</title> <style type="text/css"> .pikaqiu{ width: 100%; text-align: center; } .trangle{ width: 100px; height: 100px; border-radius: 15%; background: #FF5722; position: relative; display: inline-block; margin: 50px; text-align: center; vertical-align: middle; animation: rotate 1s linear infinite; } @-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)} to{-webkit-transform: rotate(360deg)} } @-moz-keyframes rotate{from{-moz-transform: rotate(0deg)} to{-moz-transform: rotate(359deg)} } @-o-keyframes rotate{from{-o-transform: rotate(0deg)} to{-o-transform: rotate(359deg)} } @keyframes rotate{from{transform: rotate(0deg)} to{transform: rotate(359deg)} } .font{ font-size: 32px; display:inline-block; line-height:100px; color: springgreen; } </style> </head> <body> <div class="pikaqiu"> <div class="trangle"><div class="font color1 font1">马</div></div> <div class="trangle"><div class="font color2 font2">好</div></div> <div class="trangle"><div class="font color1 font3">燕</div></div> </div> </div> </body> <script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ tab("1"); }) function tab(type){ if("1"==type){ $(".font1").text("最"); $(".font2").text("小"); $(".font3").text("看"); $(".color1").css("color","springgreen"); $(".color2").css("color","#673ab7"); type = "2"; setTimeout('tab(2)', 1000); //延迟1秒; } else { $(".font1").text("马"); $(".font2").text("好"); $(".font3").text("燕"); $(".color2").css("color","springgreen"); $(".color1").css("color","#673ab7"); setTimeout('tab(1)', 1000); //延迟1秒; } } </script> </html>