html简单组件(五):点击旋转箭头
实现效果图:
完整代码
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>test</title><script src="/jquery/1.10.2/jquery.min.js"></script><style>.text{display: inline-block;border-top: 5px solid;border-right: 5px solid;width: 50px;height: 50px;border-color: #EA6000;transform: rotate(-45deg);margin: 50px auto auto 100px;transition: all 0.4s ease;-webkit-transition: all 0.5s ease;}</style></head><body><p>点击旋转箭头:</p><span class="text" onclick="change()"></span><script type="text/javascript">var flag = true;function change(){if(flag) {$(".text").css("transform","rotate(135deg)");flag = false;}else {$(".text").css("transform","rotate(-45deg)");flag = true;}}</script></body></html>