Fork me on GitHub

杂乱排序transform

字数统计: 335字   |   阅读时长≈ 2分

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head> 
  	<meta charset="UTF-8" /> 
  	<title>Document</title> 
  	<style type="text/css">
  		*{  			
  			margin: 0;  			
  			padding: 0;  		
  		}

  		body{			
  			background-color: #31965b;		
  		}		
  		.box{			
  			width: 640px;			
  			margin: 100px auto;		
  		}		
  		.box>img{			
  			transition: transform 1s;		
  		}		
  		.box>img:nth-of-type(1){			
  			transform: translate(100px,100px) rotate(30deg);		
  		}		
  		.box>img:nth-of-type(2){			
  			transform: translate(100px,100px) rotate(-30deg);		
  		}		
  		.box>img:nth-of-type(3){			
  			transform: translate(200px,200px) rotate(60deg);		
  		}		
  		.box>img:nth-of-type(4){			
  			transform: translate(200px,200px) rotate(-60deg);		
  		}		
  		.box>img:nth-of-type(5){			
  			transform: translate(150px,150px) rotate(90deg);		
  		}		
  		.box>img:nth-of-type(6){			
  			transform: translate(50px,150px) rotate(-90deg);		
  		}		
  		.box>img:nth-of-type(7){	        
  			transform: translate(-150px,-150px) rotate(60deg);	    
  		}	    
  		.box>img:nth-of-type(8){	        
  			transform: translate(10px,-250px) rotate(-90deg);	    
  		}	    
  		.box>img:nth-of-type(9){	        
  			transform: translate(-250px,10px) rotate(45deg);	    
  		}	    
  		.box:hover>img{	    	
  		transform: none;	    
  	}	
 	</style>
</head>
<body> 

  	<div class="box"> 
   	<img src="1.png" alt="" /> 
   	<img src="2.png" alt="" /> 
   	<img src="3.png" alt="" /> 
   	<img src="4.png" alt="" /> 
   	<img src="5.png" alt="" /> 
   	<img src="6.png" alt="" /> 
   	<img src="7.png" alt="" /> 
   	<img src="8.png" alt="" /> 
   	<img src="9.png" alt="" />
  	</div> 

</body>
</html>

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true


web前端开发小菇娘