js控制多种css样式依次显示

最新推荐文章于 2023-05-10 01:09:09 发布

霜月枫桥

最新推荐文章于 2023-05-10 01:09:09 发布

阅读量1.9k

点赞数

分类专栏： CSS&CSS3

本文链接：https://blog.csdn.net/MOONCOM/article/details/54599011

版权

CSS&CSS3 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

js控制多种css样式依次显示，一共有两种方法，第一种是传统的方法，使用window自带的setTimeout()，第二种是使用addEventListener()。

<script src="jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
	    $(function(){
	    	$("#div2").click(function(){
	    		$("#div2").css({"transform":"translate(200px,100px) rotate(60deg)"});
                  /*window.setTimeout("$('#div2').css({'transform':'translate(200px,100px) rotate(45deg)'});",2000);*/
	    		
	    		
	    	});
	    	document.getElementById("div2").addEventListener("transitionend",function(){
                  
                  $("#div2").css({"transform":"translate(200px,100px) rotate(45deg)"});
                  return false;
            });
	    });
          
	</script>
	<style type="text/css">
      #div1{
      	height: 300px;
      	width: 300px;
      	background-color: orange;
      	margin: 100px;
      	/* border-image-source: url(border-image.jpg);
      	border-image-slice: 30;
      	border-image-width: 30px;
      	border-image-outset: 30px;
      	border-image-repeat: round; */
      	-webkit-border-image:url(border-image.jpg) 30/30px/30px round; 
      	
      }


      #div2{
      	height:200px;
      	width:200px;
      	background-image: linear-gradient(30deg,orange,blue,red);
      	/* transform:translate(100px,10px) scale(1) rotate(-45deg); */
      	transform:translate(200px,100px);
      	margin:50px 0px;
      	transform-origin:left top;
      	transition:all 1s ease 0s;
      	/* transform:scale(1.5); */
      }






      #div3{
      	height: 200px;
      	width:200px;
      	margin: 50px 0px;
      	-webkit-perspective:100px;
      	-webkit-transform-style:preserve-3d;
      	background-image:radial-gradient(orange,red,green,blue);
      	transform:translate3d(100px,100px,100px);
      }
	</style>
</head>
<body>
	<div id="div3">
		
	</div>
	<hr>
	<div id="div2" class="div2">
		
	</div>
	<hr>
	<div id="div1">
	</div>
	
	
</body>