一、 CSS3鼠标悬停相册预览特效

我不是女神ヾ 2022-11-11 13:25 254阅读 0赞

文章目录

  • 一、9款CSS3鼠标悬停相册预览特效
    • 1.1 图片预览
    • 1.2 html代码
    • 1.3 main.css代码
    • 1.4 sim-prev-anim.css代码
    • 1.5 所用图片

一、9款CSS3鼠标悬停相册预览特效

1.1 图片预览

在这里插入图片描述

在这里插入图片描述

1.2 html代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>9款CSS3鼠标悬停相册预览特效</title>
  7. <link href="css/main.css" rel="stylesheet" type="text/css"/>
  8. <link href="css/sim-prev-anim.css" rel="stylesheet" type="text/css" />
  10. </head>
  11. <body>
  13. <div class="albums">
  14. <div class="albums-inner">
  15. <div class="albums-tab">
  16. <div class="albums-tab-thumb sim-anim-1">
  17. <img src="images/studio_0001.jpg" class="all studio"/>
  18. <img src="images/studio_0002.jpg" class="all studio"/>
  19. <img src="images/studio_0003.jpg" class="all studio"/>
  20. <img src="images/studio_0004.jpg" class="all studio"/>
  21. <img src="images/studio_0005.jpg" class="all studio"/>
  22. <img src="images/studio_0006.jpg" class="all studio"/>
  23. <img src="images/studio_0001.jpg" class="all studio"/>
  24. </div>
  25. <div class="albums-tab-text">.sim-anim-1 <span>(7 pictures)</span></div>
  26. </div>
  28. <div class="albums-tab">
  29. <div class="albums-tab-thumb sim-anim-2">
  30. <img src="images/studio_0001.jpg" class="all studio"/>
  31. <img src="images/studio_0002.jpg" class="all studio"/>
  32. <img src="images/studio_0003.jpg" class="all studio"/>
  33. <img src="images/studio_0004.jpg" class="all studio"/>
  34. <img src="images/studio_0010.jpg" class="all studio"/>
  36. </div>
  37. <div class="albums-tab-text">.sim-anim-2 <span>(5 pictures)</span></div>
  38. </div>
  41. <div class="albums-tab">
  42. <div class="albums-tab-thumb sim-anim-3">
  43. <img src="images/studio_0001.jpg" class="all studio"/>
  44. <img src="images/studio_0002.jpg" class="all studio"/>
  45. <img src="images/studio_0003.jpg" class="all studio"/>
  46. <img src="images/studio_0004.jpg" class="all studio"/>
  47. <img src="images/studio_0005.jpg" class="all studio"/>
  48. <img src="images/studio_0006.jpg" class="all studio"/>
  49. <img src="images/studio_0007.jpg" class="all studio"/>
  50. <img src="images/studio_0008.jpg" class="all studio"/>
  51. <img src="images/studio_0011.jpg" class="all studio"/>
  53. </div>
  54. <div class="albums-tab-text">.sim-anim-3 <span>(9 pictures)</span></div>
  55. </div>
  58. <div class="albums-tab">
  59. <div class="albums-tab-thumb sim-anim-4">
  60. <img src="images/studio_0001.jpg" class="all studio"/>
  61. <img src="images/studio_0002.jpg" class="all studio"/>
  62. <img src="images/studio_0003.jpg" class="all studio"/>
  63. <img src="images/studio_0004.jpg" class="all studio"/>
  64. <img src="images/studio_0005.jpg" class="all studio"/>
  65. <img src="images/studio_0006.jpg" class="all studio"/>
  66. <img src="images/studio_0007.jpg" class="all studio"/>
  67. <img src="images/studio_0008.jpg" class="all studio"/>
  68. <img src="images/studio_0009.jpg" class="all studio"/>
  70. </div>
  71. <div class="albums-tab-text">.sim-anim-4 <span>(9 pictures)</span></div>
  72. </div>
  74. <div class="albums-tab">
  75. <div class="albums-tab-thumb sim-anim-5">
  76. <img src="images/studio_0001.jpg" class="all studio"/>
  77. <img src="images/studio_0002.jpg" class="all studio"/>
  78. <img src="images/studio_0003.jpg" class="all studio"/>
  79. <img src="images/studio_0004.jpg" class="all studio"/>
  80. <img src="images/studio_0005.jpg" class="all studio"/>
  82. </div>
  83. <div class="albums-tab-text">.sim-anim-5 <span>(5 pictures)</span></div>
  84. </div>
  87. <div class="albums-tab">
  88. <div class="albums-tab-thumb sim-anim-6">
  89. <img src="images/studio_0001.jpg" class="all studio"/>
  90. <img src="images/studio_0009.jpg" class="all studio"/>
  91. <img src="images/studio_0003.jpg" class="all studio"/>
  92. <img src="images/studio_0004.jpg" class="all studio"/>
  93. <img src="images/studio_0005.jpg" class="all studio"/>
  94. <img src="images/studio_0006.jpg" class="all studio"/>
  95. <img src="images/studio_0007.jpg" class="all studio"/>
  96. <img src="images/studio_0008.jpg" class="all studio"/>
  97. <img src="images/studio_0002.jpg" class="all studio"/>
  98. </div>
  99. <div class="albums-tab-text">.sim-anim-6 <span>(9 pictures)</span></div>
  100. </div>
  103. <div class="albums-tab">
  104. <div class="albums-tab-thumb sim-anim-7">
  105. <img src="images/studio_0001.jpg" class="all studio"/>
  106. <img src="images/studio_0002.jpg" class="all studio"/>
  107. <img src="images/studio_0003.jpg" class="all studio"/>
  108. <img src="images/studio_0004.jpg" class="all studio"/>
  110. </div>
  111. <div class="albums-tab-text">.sim-anim-7 <span>(4 pictures)</span></div>
  112. </div>
  114. <div class="albums-tab">
  115. <div class="albums-tab-thumb sim-anim-8">
  116. <img src="images/studio_0001.jpg" class="all studio"/>
  117. <img src="images/studio_0002.jpg" class="all studio"/>
  118. <img src="images/studio_0009.jpg" class="all studio"/>
  119. <img src="images/studio_0004.jpg" class="all studio"/>
  120. <img src="images/studio_0005.jpg" class="all studio"/>
  121. <img src="images/studio_0006.jpg" class="all studio"/>
  122. <img src="images/studio_0007.jpg" class="all studio"/>
  123. <img src="images/studio_0008.jpg" class="all studio"/>
  124. <img src="images/studio_0003.jpg" class="all studio"/>
  125. </div>
  126. <div class="albums-tab-text">.sim-anim-8 <span>(9 pictures)</span></div>
  127. </div>
  129. <div class="albums-tab">
  130. <div class="albums-tab-thumb sim-anim-9">
  131. <img src="images/studio_0001.jpg" class="all studio"/>
  132. <img src="images/studio_0002.jpg" class="all studio"/>
  133. <img src="images/studio_0003.jpg" class="all studio"/>
  134. <img src="images/studio_0004.jpg" class="all studio"/>
  135. <img src="images/studio_0005.jpg" class="all studio"/>
  136. <img src="images/studio_0009.jpg" class="all studio"/>
  137. <img src="images/studio_0007.jpg" class="all studio"/>
  138. <img src="images/studio_0008.jpg" class="all studio"/>
  139. <img src="images/studio_0006.jpg" class="all studio"/>
  140. </div>
  141. <div class="albums-tab-text">.sim-anim-9 <span>(9 pictures)</span></div>
  142. </div>
  145.     </div>
  147. </div>
  149. <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  150. </div>
  151. </body>
  152. </html>

1.3 main.css代码

  1. body { 
  2.     margin: 0px;
  3.     padding: 0px;
  4.     background-color: #C3CCD5;
  5.     font-family: 'Source Sans Pro', sans-serif;
  6. }
  7. .albums{ 
  8.     width: 100%;
  9.     float: left;
  10. }
  11. .albums-inner{ 
  12.     width: 1100px;
  13.     margin-top: 20px;
  14.     margin-right: auto;
  15.     margin-left: auto;
  16. }
  17. .albums-title { 
  18.     float: left;
  19.     width: 100%;
  20.     color: rgba(53,117,159,1);
  21.     font-size: 20px;
  22.     border-bottom-width: 2px;
  23.     border-bottom-style: solid;
  24.     border-bottom-color: rgba(53,117,159,1);
  25.     line-height: 50px;
  26.     margin-bottom: 100px;
  27. }
  28. .albums-tab{ 
  29.     float: left;
  30.     width: 300px;
  31.     margin-right: 100px;
  32.     margin-bottom: 100px;
  33. }
  34. .albums-tab:nth-child(3n+0) { 
  35.     margin-right: 0px;
  36. }
  38. .albums-tab-thumb{ 
  39.     float: left;
  40.     width: 300px;
  41.     height: 200px;
  42. }
  43. .albums-tab-thumb img { 
  44.     height: auto;
  45.     width: 290px;
  46.     background-color: rgba(255,255,255,1);
  47.     padding: 5px;        
  48. }
  49. .albums-tab-text{ 
  50.     float: left;
  51.     width: 100%;
  52.     text-align: center;
  53.     color: rgba(53,117,159,1);
  54.     margin-top: 15px;
  55.     font-size: 18px;
  56. }
  57. .albums-tab-text span { 
  58.     font-size: 14px;
  59.     color: rgba(102,102,102,1);
  60. }

1.4 sim-prev-anim.css代码

  1. .sim-anim-1{ 
  2.     position: relative;
  3.     }
  4. .sim-anim-1 img{ 
  5.     position: absolute;
  6.     -webkit-transition: all 0.5s;
  7.     -moz-transition: all 0.5s;
  8.     -o-transition: all 0.5s;
  9.     transition: all 0.5s;
  10.     }    
  11. .sim-anim-1:hover img{ 
  12.     z-index: 1;
  13.     }        
  14. .sim-anim-1:hover img:nth-child(1){ 
  15.      -ms-transform: rotate(10deg); 
  16.     -webkit-transform: rotate(10deg); 
  17.     transform: rotate(10deg);
  18.     }
  19. .sim-anim-1:hover img:nth-child(2){ 
  20.      -ms-transform: rotate(-10deg); 
  21.     -webkit-transform: rotate(-10deg); 
  22.     transform: rotate(-10deg);
  23.     }
  24. .sim-anim-1:hover img:nth-child(3){ 
  25.     -ms-transform: rotate(20deg); 
  26.     -webkit-transform: rotate(20deg); 
  27.     transform: rotate(20deg);
  28.     }    
  29. .sim-anim-1:hover img:nth-child(4){ 
  30.      -ms-transform: rotate(-20deg); 
  31.     -webkit-transform: rotate(-20deg); 
  32.     transform: rotate(-20deg);
  33.     }
  34. .sim-anim-1:hover img:nth-child(5){ 
  35.      -ms-transform: rotate(30deg); 
  36.     -webkit-transform: rotate(30deg); 
  37.     transform: rotate(30deg);
  38.     }
  39. .sim-anim-1:hover img:nth-child(6){ 
  40.      -ms-transform: rotate(-30deg); 
  41.     -webkit-transform: rotate(-30deg); 
  42.     transform: rotate(-30deg);
  43.     }
  44. .sim-anim-1:hover img:nth-child(7){ 
  45.     -ms-transform: scale(0.9,0.9); 
  46.     -webkit-transform: scale(0.9,0.9); 
  47.     transform: scale(0.9,0.9); 
  48.     }    
  51. .sim-anim-2{ 
  52.     position: relative;
  53.     }    
  54. .sim-anim-2 img{ 
  55.     position: absolute;
  56.         -webkit-transition: all 0.5s;
  57.     -moz-transition: all 0.5s;
  58.     -o-transition: all 0.5s;
  59.     transition: all 0.5s;
  60.     }
  61. .sim-anim-2:hover img{ 
  62.     z-index: 1;
  63.     }            
  64. .sim-anim-2:hover img:nth-child(1){ 
  65.     -ms-transform: translate(-40%,-80%) rotate(-40deg); 
  66.        -webkit-transform: translate(-40%,-80%)  rotate(-40deg); 
  67.     transform: translate(-40%,-80%)  rotate(-40deg);
  68.     }
  69. .sim-anim-2:hover img:nth-child(2){ 
  70.     -ms-transform: translate(-30%,-60%) rotate(-30deg); 
  71.        -webkit-transform: translate(-30%,-60%)  rotate(-30deg); 
  72.     transform: translate(-30%,-60%)  rotate(-30deg);
  73.     }    
  74. .sim-anim-2:hover img:nth-child(3){ 
  75.     -ms-transform: translate(-20%,-40%) rotate(-20deg); 
  76.        -webkit-transform: translate(-20%,-40%)  rotate(-20deg); 
  77.     transform: translate(-20%,-40%)  rotate(-20deg);
  78.     }        
  79. .sim-anim-2:hover img:nth-child(4){ 
  80.     -ms-transform: translate(-10%,-20%) rotate(-10deg); 
  81.        -webkit-transform: translate(-10%,-20%)  rotate(-10deg); 
  82.     transform: translate(-10%,-20%)  rotate(-10deg);
  83.     }
  84. .sim-anim-2:hover img:nth-child(5){ 
  85.       -ms-transform: scale(1.1,1.1) rotate(-5deg); 
  86.     -webkit-transform: scale(1.1,1.1) rotate(-5deg); 
  87.     transform: scale(1.1,1.1) rotate(-5deg);
  88.     }
  91. .sim-anim-3{ 
  92.     position: relative;
  93.     }    
  94. .sim-anim-3 img{ 
  95.     position: absolute;
  96.     -webkit-transition: all 0.5s;
  97.     -moz-transition: all 0.5s;
  98.     -o-transition: all 0.5s;
  99.     transition: all 0.5s;
  100.     }
  101. .sim-anim-3:hover img{ 
  102.     z-index: 1;
  103.     }        
  104. .sim-anim-3:hover img:nth-child(1){ 
  105.     -ms-transform: translate(40%,80%) rotate(-40deg); 
  106.        -webkit-transform: translate(40%,80%) rotate(-40deg); 
  107.     transform: translate(40%,80%) rotate(-40deg); 
  108.     }
  109. .sim-anim-3:hover img:nth-child(2){ 
  110.     -ms-transform: translate(30%,60%)  rotate(-30deg);
  111.        -webkit-transform: translate(30%,60%)  rotate(-30deg);
  112.     transform: translate(30%,60%)  rotate(-30deg);
  113.     }    
  114. .sim-anim-3:hover img:nth-child(3){ 
  115.     -ms-transform: translate(20%,40%) rotate(-20deg); 
  116.        -webkit-transform: translate(20%,40%)  rotate(-20deg); 
  117.     transform: translate(20%,40%)  rotate(-20deg);
  118.     }        
  119. .sim-anim-3:hover img:nth-child(4){ 
  120.     -ms-transform: translate(10%,20%) rotate(-10deg); 
  121.        -webkit-transform: translate(10%,20%)  rotate(-10deg); 
  122.     transform: translate(10%,20%)  rotate(-10deg);
  123.     }
  124. .sim-anim-3:hover img:nth-child(5){ 
  125.     -ms-transform: translate(40%,-80%) rotate(40deg); 
  126.        -webkit-transform: translate(40%,-80%) rotate(40deg); 
  127.     transform: translate(40%,-80%) rotate(40deg); 
  128.     }
  129. .sim-anim-3:hover img:nth-child(6){ 
  130.     -ms-transform: translate(30%,-60%)  rotate(30deg);
  131.        -webkit-transform: translate(30%,-60%)  rotate(30deg);
  132.     transform: translate(30%,-60%)  rotate(30deg);
  133.     }    
  134. .sim-anim-3:hover img:nth-child(7){ 
  135.     -ms-transform: translate(20%,-40%) rotate(20deg); 
  136.        -webkit-transform: translate(20%,-40%)  rotate(20deg); 
  137.     transform: translate(20%,-40%)  rotate(20deg);
  138.     }        
  139. .sim-anim-3:hover img:nth-child(8){ 
  140.     -ms-transform: translate(10%,-20%) rotate(10deg); 
  141.        -webkit-transform: translate(10%,-20%)  rotate(10deg); 
  142.     transform: translate(10%,-20%)  rotate(10deg);
  143.     }    
  144. .sim-anim-3:hover img:nth-child(9){ 
  145.       -ms-transform: scale(1.1,1.1) ; 
  146.     -webkit-transform: scale(1.1,1.1) ; 
  147.     transform: scale(1.1,1.1) ;
  148.     }    
  153. .sim-anim-4{ 
  154.     position: relative;
  155.     }    
  156. .sim-anim-4 img{ 
  157.     position: absolute;
  158.         -webkit-transition: all 0.5s;
  159.     -moz-transition: all 0.5s;
  160.     -o-transition: all 0.5s;
  161.     transition: all 0.5s;
  162.     }
  163. .sim-anim-4:hover img{ 
  164.     z-index: 1;
  165.     }
  166. .sim-anim-4:hover img:nth-child(1){ 
  167.     -ms-transform: translate(-80%,-160%) rotate(-80deg) scale(0.3,0.3);
  168.        -webkit-transform: translate(-80%,-160%)  rotate(-80deg) scale(0.3,0.3);
  169.     transform: translate(-80%,-160%)  rotate(-80deg) scale(0.3,0.3);
  170.     }    
  171. .sim-anim-4:hover img:nth-child(2){ 
  172.     -ms-transform: translate(-70%,-140%) rotate(-70deg) scale(0.4,0.4);
  173.        -webkit-transform: translate(-70%,-140%)  rotate(-70deg) scale(0.4,0.4);
  174.     transform: translate(-70%,-140%)  rotate(-70deg) scale(0.4,0.4);
  175.     }        
  176. .sim-anim-4:hover img:nth-child(3){ 
  177.     -ms-transform: translate(-60%,-120%) rotate(-60deg)  scale(0.5,0.5); 
  178.        -webkit-transform: translate(-60%,-120%)  rotate(-60deg)  scale(0.5,0.5); 
  179.     transform: translate(-60%,-120%)  rotate(-60deg)  scale(0.5,0.5); 
  180.     }    
  181. .sim-anim-4:hover img:nth-child(4){ 
  182.     -ms-transform: translate(-50%,-100%) rotate(-50deg)  scale(0.6,0.6); 
  183.        -webkit-transform: translate(-50%,-100%)  rotate(-50deg)  scale(0.6,0.6); 
  184.     transform: translate(-50%,-100%)  rotate(-50deg)  scale(0.6,0.6); 
  185.     }            
  186. .sim-anim-4:hover img:nth-child(5){ 
  187.     -ms-transform: translate(-40%,-80%) rotate(-40deg) scale(0.7,0.7); 
  188.        -webkit-transform: translate(-40%,-80%)  rotate(-40deg) scale(0.7,0.7); 
  189.     transform: translate(-40%,-80%)  rotate(-40deg) scale(0.7,0.7); 
  190.     }
  191. .sim-anim-4:hover img:nth-child(6){ 
  192.     -ms-transform: translate(-30%,-60%) rotate(-30deg) scale(0.8,0.8);  
  193.        -webkit-transform: translate(-30%,-60%)  rotate(-30deg) scale(0.8,0.8); 
  194.     transform: translate(-30%,-60%)  rotate(-30deg) scale(0.8,0.8); 
  195.     }    
  196. .sim-anim-4:hover img:nth-child(7){ 
  197.     -ms-transform: translate(-20%,-40%) rotate(-20deg) scale(0.9,0.9); 
  198.        -webkit-transform: translate(-20%,-40%)  rotate(-20deg) scale(0.9,0.9);  
  199.     transform: translate(-20%,-40%)  rotate(-20deg) scale(0.9,0.9); 
  200.     }        
  201. .sim-anim-4:hover img:nth-child(8){ 
  202.     -ms-transform: translate(-10%,-20%) rotate(-10deg); 
  203.        -webkit-transform: translate(-10%,-20%)  rotate(-10deg); 
  204.     transform: translate(-10%,-20%)  rotate(-10deg);
  205.     }
  206. .sim-anim-4:hover img:nth-child(9){ 
  207.       -ms-transform: scale(1.1,1.1) ; 
  208.     -webkit-transform: scale(1.1,1.1) ; 
  209.     transform: scale(1.1,1.1) ;
  210.     }
  214. .sim-anim-5{ 
  215.     position: relative;
  216.     }    
  217. .sim-anim-5 img{ 
  218.     position: absolute;
  219.         -webkit-transition: all 0.5s;
  220.     -moz-transition: all 0.5s;
  221.     -o-transition: all 0.5s;
  222.     transition: all 0.5s;
  223.     }    
  224. .sim-anim-5:hover img{ 
  225.     z-index: 1;
  226.     }    
  227. .sim-anim-5:hover img:nth-child(1){ 
  228.     -ms-transform: translate(0,50%) rotate(-20deg); 
  229.        -webkit-transform: translate(0,50%) rotate(-20deg); 
  230.     transform: translate(0,50%) rotate(-20deg);
  231.     }
  233. .sim-anim-5:hover img:nth-child(2){ 
  234.     -ms-transform: translate(50%,0) rotate(-20deg); 
  235.        -webkit-transform: translate(50%,0) rotate(-20deg); 
  236.     transform: translate(50%,0) rotate(-20deg);
  237.     }
  238. .sim-anim-5:hover img:nth-child(3){ 
  239.     -ms-transform: translate(0,-50%)  rotate(-20deg); 
  240.        -webkit-transform: translate(0,-50%)  rotate(-20deg); 
  241.     transform: translate(0,-50%)  rotate(-20deg);
  242.     }    
  243. .sim-anim-5:hover img:nth-child(4){ 
  244.     -ms-transform: translate(-50%,0)  rotate(-20deg); 
  245.        -webkit-transform: translate(-50%,0)  rotate(-20deg); 
  246.     transform: translate(-50%,0)  rotate(-20deg);
  247.     }
  248. .sim-anim-5:hover img:nth-child(5){ 
  249.         -ms-transform: scale(1.1,1.1) rotate(-20deg);
  250.     -webkit-transform: scale(1.1,1.1) rotate(-20deg);
  251.     transform: scale(1.1,1.1) rotate(-20deg);
  252.     }    
  256. .sim-anim-6{ 
  257.     position: relative;
  259.     }    
  260. .sim-anim-6 img{ 
  261.     position: absolute;
  262.     -webkit-transition: all 0.5s ;
  263.     -moz-transition: all 0.5s;
  264.     -o-transition: all 0.5s;
  265.     transition: all 0.5s;
  266.     }
  267. .sim-anim-6:hover img{ 
  268.     z-index: 1;
  269.     }        
  270. .sim-anim-6:hover img:nth-child(1){ 
  271.     -ms-transform:translate(-20%,-85%) scale(0.8,0.8) rotate(-20deg); 
  272.        -webkit-transform: translate(-20%,-85%) scale(0.8,0.8) rotate(-20deg); 
  273.     transform: translate(-20%,-85%) scale(0.8,0.8) rotate(-20deg); 
  274.     }        
  275. .sim-anim-6:hover img:nth-child(2){ 
  276.     -ms-transform:translate(-80%,45%) scale(0.8,0.8) rotate(-20deg); 
  277.        -webkit-transform: translate(-80%,45%) scale(0.8,0.8) rotate(-20deg); 
  278.     transform: translate(-80%,45%) scale(0.8,0.8) rotate(-20deg);
  279.     }        
  280. .sim-anim-6:hover img:nth-child(3){ 
  281.     -ms-transform:translate(20%,85%) scale(0.8,0.8) rotate(-20deg); 
  282.        -webkit-transform: translate(20%,85%) scale(0.8,0.8) rotate(-20deg); 
  283.     transform: translate(20%,85%) scale(0.8,0.8) rotate(-20deg);    
  284.     }        
  285. .sim-anim-6:hover img:nth-child(4){ 
  286.     -ms-transform: translate(80%,-45%) scale(0.8,0.8) rotate(-20deg); 
  287.        -webkit-transform: translate(80%,-45%) scale(0.8,0.8) rotate(-20deg); 
  288.     transform: translate(80%,-45%) scale(0.8,0.8) rotate(-20deg); 
  289.     }    
  290. .sim-anim-6:hover img:nth-child(5){ 
  291.     -ms-transform:translate(-100%,-40%) scale(0.8,0.8) rotate(-20deg); 
  292.        -webkit-transform: translate(-100%,-40%) scale(0.8,0.8) rotate(-20deg); 
  293.     transform: translate(-100%,-40%) scale(0.8,0.8) rotate(-20deg);
  294.     }
  295. .sim-anim-6:hover img:nth-child(6){ 
  296.     -ms-transform:translate(100%,40%) scale(0.8,0.8) rotate(-20deg); 
  297.        -webkit-transform: translate(100%,40%) scale(0.8,0.8) rotate(-20deg); 
  298.     transform: translate(100%,40%) scale(0.8,0.8) rotate(-20deg);
  299.     }
  300. .sim-anim-6:hover img:nth-child(7){ 
  301.     -ms-transform:translate(60%,-130%) scale(0.8,0.8) rotate(-20deg); 
  302.        -webkit-transform: translate(60%,-130%) scale(0.8,0.8) rotate(-20deg); 
  303.     transform: translate(60%,-130%) scale(0.8,0.8) rotate(-20deg);
  304.     }
  305. .sim-anim-6:hover img:nth-child(8){ 
  306.     -ms-transform:translate(-60%,130%) scale(0.8,0.8) rotate(-20deg); 
  307.        -webkit-transform: translate(-60%,130%) scale(0.8,0.8) rotate(-20deg); 
  308.     transform: translate(-60%,130%) scale(0.8,0.8) rotate(-20deg);
  309.     }    
  310. .sim-anim-6:hover img:nth-child(9){ 
  311.      -ms-transform: scale(1.2,1.2) rotate(-20deg); 
  312.        -webkit-transform: scale(1.2,1.2) rotate(-20deg); 
  313.     transform: scale(1.2,1.2) rotate(-20deg);
  314.     }            
  317. .sim-anim-7{ 
  318.     position: relative;
  319.     }    
  320. .sim-anim-7 img{ 
  321.     position: absolute;
  322.     -webkit-transition: all 0.5s ;
  323.     -moz-transition: all 0.5s;
  324.     -o-transition: all 0.5s;
  325.     transition: all 0.5s;
  326.     }
  327. .sim-anim-7:hover img{ 
  328.     z-index: 1;
  329.     }
  330. .sim-anim-7:hover img:nth-child(1){ 
  331.     -ms-transform: translate(0,-40%) scale(0.5,0.5); 
  332.        -webkit-transform: translate(0,-40%) scale(0.5,0.5); 
  333.     transform: translate(0,-40%) scale(0.5,0.5); 
  334.     }            
  335. .sim-anim-7:hover img:nth-child(2){ 
  336.     -ms-transform: translate(0,-20%) scale(0.7,0.7);
  337.        -webkit-transform: translate(0,-20%) scale(0.7,0.7);
  338.     transform: translate(0,-20%) scale(0.7,0.7); 
  339.     }        
  340. .sim-anim-7:hover img:nth-child(3){ 
  341.     -ms-transform: scale(0.9,0.9) ; 
  342.        -webkit-transform: scale(0.9,0.9); 
  343.     transform: scale(0.9,0.9); 
  344.     }        
  345. .sim-anim-7:hover img:nth-child(4){ 
  346.  -ms-transform: translate(0,20%) scale(1.1,1.1); 
  347.        -webkit-transform: translate(0,20%) scale(1.1,1.1);  
  348.     transform: translate(0,20%) scale(1.1,1.1);  
  349.     }        
  353. .sim-anim-8{ 
  354.     position: relative;
  355.     }    
  356. .sim-anim-8 img{ 
  357.     position: absolute;
  358.     -webkit-transition: all 0.5s ;
  359.     -moz-transition: all 0.5s;
  360.     -o-transition: all 0.5s;
  361.     transition: all 0.5s;
  362.     }
  363. .sim-anim-8:hover img{ 
  364.     z-index: 1;
  365.     }
  366. .sim-anim-8:hover img:nth-child(1){ 
  367.     -ms-transform: translate(20%,-80%) scale(0.2,0.2) rotate(-80deg); 
  368.        -webkit-transform: translate(20%,-80%) scale(0.4,0.2) rotate(-80deg); 
  369.     transform: translate(20%,-80%) scale(0.2,0.2) rotate(-80deg); 
  370.     }    
  371. .sim-anim-8:hover img:nth-child(2){ 
  372.     -ms-transform: translate(30%,-60%) scale(0.4,0.4) rotate(-60deg); 
  373.        -webkit-transform: translate(30%,-60%) scale(0.4,0.4) rotate(-60deg); 
  374.     transform: translate(30%,-60%) scale(0.4,0.4) rotate(-60deg); 
  375.     }        
  376. .sim-anim-8:hover img:nth-child(3){ 
  377.     -ms-transform: translate(40%,-40%) scale(0.6,0.6) rotate(-40deg); 
  378.        -webkit-transform: translate(40%,-40%) scale(0.6,0.6) rotate(-40deg);  
  379.     transform: translate(40%,-40%) scale(0.6,0.6) rotate(-40deg); 
  380.     }    
  381. .sim-anim-8:hover img:nth-child(4){ 
  382.     -ms-transform:translate(50%,-20%) scale(0.8,0.8) rotate(-20deg); 
  383.        -webkit-transform: translate(50%,-20%) scale(0.8,0.8)rotate(-20deg); 
  384.     transform: translate(50%,-20%) scale(0.8,0.8) rotate(-20deg); 
  385.     }
  386. .sim-anim-8:hover img:nth-child(5){ 
  387.     -ms-transform: translate(-20%,-80%) scale(0.2,0.2) rotate(80deg); 
  388.        -webkit-transform: translate(-20%,-80%) scale(0.4,0.2) rotate(80deg); 
  389.     transform: translate(-20%,-80%) scale(0.2,0.2) rotate(80deg); 
  390.     }            
  391. .sim-anim-8:hover img:nth-child(6){ 
  392.     -ms-transform: translate(-30%,-60%) scale(0.4,0.4) rotate(60deg); 
  393.        -webkit-transform: translate(-30%,-60%) scale(0.4,0.4) rotate(60deg); 
  394.     transform: translate(-30%,-60%) scale(0.4,0.4) rotate(60deg); 
  395.     }            
  396. .sim-anim-8:hover img:nth-child(7){ 
  397.     -ms-transform: translate(-40%,-40%) scale(0.6,0.6) rotate(40deg); 
  398.        -webkit-transform: translate(-40%,-40%) scale(0.6,0.6) rotate(40deg);  
  399.     transform: translate(-40%,-40%) scale(0.6,0.6) rotate(40deg); 
  400.     }        
  401. .sim-anim-8:hover img:nth-child(8){ 
  402.     -ms-transform:translate(-50%,-20%) scale(0.8,0.8) rotate(20deg); 
  403.        -webkit-transform: translate(-50%,-20%) scale(0.8,0.8) rotate(20deg); 
  404.     transform: translate(-50%,-20%) scale(0.8,0.8) rotate(20deg); 
  405.     }        
  406. .sim-anim-8:hover img:nth-child(9){ 
  407.  -ms-transform: translate(0,20%) scale(1.1,1.1); 
  408.        -webkit-transform: translate(0,20%) scale(1.1,1.1);  
  409.     transform: translate(0,20%) scale(1.1,1.1);  
  410.     }        
  414. .sim-anim-9{ 
  415.     position: relative;
  416.     -webkit-perspective: 500px; /* Chrome, Safari, Opera */
  417.     perspective: 500px;
  419.     }    
  420. .sim-anim-9 img{ 
  421.     position: absolute;
  422.     -webkit-transition: all 0.5s ;
  423.     -moz-transition: all 0.5s;
  424.     -o-transition: all 0.5s;
  425.     transition: all 0.5s;
  426.     }
  427. .sim-anim-9:hover img{ 
  428.     z-index: 1;
  429.     }
  430. .sim-anim-9:hover img:nth-child(1){ 
  431.      -ms-transform: translate(0,75%) scale(0.7,0.7) rotateX(10deg);
  432.        -webkit-transform: translate(0,75%)  scale(0.7,0.7) rotateX(10deg);  
  433.     transform: translate(0,75%)  scale(0.7,0.7) rotateX(10deg);
  435.     }    
  436. .sim-anim-9:hover img:nth-child(2){ 
  437.      -ms-transform: translate(72%,75%) scale(0.7,0.7) rotateX(10deg);
  438.        -webkit-transform: translate(72%,75%)  scale(0.7,0.7) rotateX(10deg);  
  439.     transform: translate(72%,75%)  scale(0.7,0.7) rotateX(10deg);
  440.     }        
  441. .sim-anim-9:hover img:nth-child(3){ 
  442.      -ms-transform: translate(-72%,75%) scale(0.7,0.7) rotateX(10deg);
  443.        -webkit-transform: translate(-72%,75%)  scale(0.7,0.7) rotateX(10deg);  
  444.     transform: translate(-72%,75%)  scale(0.7,0.7) rotateX(10deg);
  446.     }    
  447. .sim-anim-9:hover img:nth-child(4){ 
  448.     -ms-transform: translate(-72%,0) scale(0.7,0.7) rotateX(10deg);
  449.        -webkit-transform: translate(-72%,0)  scale(0.7,0.7) rotateX(10deg);  
  450.     transform: translate(-72%,0)  scale(0.7,0.7) rotateX(10deg); 
  452.     }        
  453. .sim-anim-9:hover img:nth-child(5){ 
  454.     -ms-transform: translate(72%,0) scale(0.7,0.7) rotateX(10deg);
  455.        -webkit-transform: translate(72%,0)  scale(0.7,0.7) rotateX(10deg);  
  456.     transform: translate(72%,0)  scale(0.7,0.7) rotateX(10deg);
  458.     }    
  459. .sim-anim-9:hover img:nth-child(6){ 
  460.     -ms-transform: translate(72%,-70%) scale(0.7,0.7) rotateX(10deg);
  461.        -webkit-transform: translate(72%,-70%)  scale(0.7,0.7) rotateX(10deg);  
  462.     transform: translate(72%,-70%)  scale(0.7,0.7) rotateX(10deg); 
  464.     }    
  465. .sim-anim-9:hover img:nth-child(7){ 
  466.     -ms-transform: translate(-72%,-70%)  scale(0.7,0.7) rotateX(10deg);  
  467.        -webkit-transform: translate(-72%,-70%)  scale(0.7,0.7) rotateX(10deg);  
  468.     transform: translate(-72%,-70%)  scale(0.7,0.7) rotateX(10deg); 
  470.     }        
  471. .sim-anim-9:hover img:nth-child(8){ 
  472.     -ms-transform: translate(0,-70%) scale(0.7,0.7) rotateX(10deg); 
  473.        -webkit-transform: translate(0,-70%) scale(0.7,0.7) rotateX(10deg);
  474.     transform: translate(0,-70%) scale(0.7,0.7) rotateX(10deg);
  476.     }    
  477. .sim-anim-9:hover img:nth-child(9){ 
  478.     -ms-transform: scale(0.7,0.7) rotateX(10deg); 
  479.        -webkit-transform:scale(0.7,0.7) rotateX(10deg);
  480.     transform: scale(0.7,0.7) rotateX(10deg); 
  481.     }

1.5 所用图片

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，254人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS鼠标悬停

    > 在学习中遇到许多好看的样式，虽然只是用HTML+CSS简单的实现，仅作为我的学习笔记和同爱好学习者的分享： 先看效果 ![这里写图片描述][70] HTM

    港控/mmm°港控/mmm°/ 0 赞/ 411 阅读