html简单组件(五):点击旋转箭头

html简单组件(五):点击旋转箭头

实现效果图:

html简单组件(五):点击旋转箭头_第1张图片

完整代码


<html>
	<head>
		<meta charset="utf-8" />
		<title>testtitle>
		<script src="https://cdn.staticfile.org/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>

你可能感兴趣的:(HTML简单组件,html5,css3,jquery)