原创html5+css3实现莲动效果

页面代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>莲动</title>
  
  <script src="js/jquery-3.2.1.js"></script>
  <script src="js/index.js"></script>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head>

<body>
   <div class="box">
       
      <ul>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
		 <li></li>
         <li></li>
         <li></li>
         <li></li>
      </ul>
   </div>
   <div class="box1">
     <div class="f one"></div>
     <div class="f two"></div>
     <div class="f three"></div>
   </div>
   <audio src="source/flower.mp3" id="play"></audio>
</body>
</html>

CSS代码

*{margin:0; padding: 0;}
	  body{ background-image: url(../img/timg.jpg);}
	  .box{ width:400px; height: 400px; 
		  position: relative;
		   text-align: center;
		  margin-top: 80px;
		  margin-left: 440px;
		  z-index: 333;
		  transition: 10s;  
	  }
	  .box1{ 
		  width:600px; height: 600px;
		  border-radius: 50%;
		  background-color:rgba(16,247,78,0.5);
		  position: absolute;
		  overflow:hidden;
		  top:0px;
		  left: 384px;
		  box-shadow:10px 10px 50px 20px gray;
	     }
	  .f{ width: 700px;
	      height: 700px;
		  background-color: rgba(23,144,164,0.2);
		  border-radius: 220px;
		  position: absolute;
		  top:-220px;
		  left:-60px;
		  
	  }
	  .one{
		  
		  background-color: rgba(23,144,164,0.2);
		  transform: rotate(20deg);
	  }
	   .two{
		  
		  background-color: rgba(23,144,164,0.4);
		   transform: rotate(15deg);
	  }
	   .three{
		  
		  background-color: rgba(23,144,164,0.3);
		   transform: rotate(5deg);
	  }
	  ul{}
	  li{ list-style: none;
		  width:150px;height: 150px;   
		  position: absolute;
		  top:200px; left: 250px;
		  background:-webkit-linear-gradient(top,rgba(255,3,97,0.5),rgba(255,255,255,0.5),rgba(247,6,118,0.5));
		  border-radius: 100% 0 100% 0;  
		  transform-origin: left bottom;
		  transform: rotate(-45deg);
		  transition: 10s;

	  }
	  .box:hover li:nth-child(1){
		  transform:rotate(-25deg);  
	  }
	  .box:hover li:nth-child(2){
		  transform:rotate(-5deg);	  
	  }
	  .box:hover li:nth-child(3){
		  transform:rotate(25deg);	  
	  }
	  .box:hover li:nth-child(4){
		  transform:rotate(45deg);	  
	  }
	  .box:hover li:nth-child(6){
		  transform:rotate(-85deg);  
	  }
	  .box:hover li:nth-child(7){
		  transform:rotate(-105deg);  
	  }
	  .box:hover li:nth-child(8){
		  transform:rotate(-65deg);  
	  }  
	  .box:hover li:nth-child(10){
		  transform:rotate(-135deg);  
	  }

JS代码

 $(function(){
		 var deg1=0;
		 var deg2=0;
		 var deg3=0;
		   
		 setInterval(function(){
			 deg1+=1.25;
			 deg2+=1.45;
			 deg3+=1.65;
		$(".one").css("transform","rotate("+deg1+"deg)");
		$(".two").css("transform","rotate("+deg2+"deg)");
		$(".three").css("transform","rotate("+deg3+"deg)");
		     
		 },50);  
		 setInterval(function(){
			 var rand=Math.floor(Math.random()*-99+50);
			 
		      $(".box").css("transform","rotate("+rand+"deg)"); 
			 var rand1=Math.floor(Math.random()*99+30);
			 moves(rand1);
			 
		 },200);
		 function moves(rand1){
			 $(".box").mousemove(function(){
				 
				 console.log(rand1);
				 $(".box ul li:eq(7)").css("transform","rotate("+rand1+"deg)");
				  $("#play")[0].play();
		 
			 });
			$(".box").mouseout(function(){
				 $(".box ul li:eq(7)").css("transform","rotate("+(-45)+"deg)"); 
				 $("#play")[0].pause();
			 });
		 }
	 
	      
	 });

原创html5+css3实现莲动效果

相关推荐