<..._background: url(../img/02.png) no-repeat 0 0;">
devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

抖音上很火的3D立体动态相册实现代码!_background: url(../img/02.png) no-repeat 0 0;

作者：小丑西瓜9 | 2024-02-21 23:48:38

赞

踩

background: url(../img/02.png) no-repeat 0 0;

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>酷炫3d</title>
  6. <link type="text/css" href="css/style.css" rel="stylesheet" />
  7. </head>
  8. <body>
  9. <div class="box">
  10. 	<ul class="minbox">
  11. 		<li>
  12. 			<img src="./img/01.jpg" alt="">
  13. 		</li>
  14. 		<li>
  15. 			<img src="./img/02.jpg" alt="">
  16. 		</li>
  17. 		<li>
  18. 			<img src="./img/03.jpg" alt="">
  19. 		</li>
  20. 		<li>
  21. 			<img src="./img/04.jpg" alt="">
  22. 		</li>
  23. 		<li>
  24. 			<img src="./img/05.jpg" alt="">
  25. 		</li>
  26. 		<li>
  27. 			<img src="./img/06.jpg" alt="">
  28. 		</li>
  29. 	</ul>
  30. 	<ol class="maxbox">
  31. 		<li>
  32. 			<img src="./img/1.jpg" alt="">
  33. 		</li>
  34. 		<li>
  35. 			<img src="./img/2.jpg" alt="">
  36. 		</li>
  37. 		<li>
  38. 			<img src="./img/3.jpg" alt="">
  39. 		</li>
  40. 		<li>
  41. 			<img src="./img/4.jpg" alt="">
  42. 		</li>
  43. 		<li>
  44. 			<img src="./img/5.jpg" alt="">
  45. 		</li>
  46. 		<li>
  47. 			<img src="./img/6.jpg" alt="">
  48. 		</li>
  49. 	</ol>
  50. </div>
  51. </body>
  52. </html>

css重要的

  1. @charset "utf-8";
  2. *{
  3.     margin:0;
  4.     padding:0;
  5. }
  6. body{
  7.     max-width: 100%;
  8.     min-width: 100%;
  9.     height: 100%;
  10.     background-size: cover;
  11.     background-repeat: no-repeat;
  12.     background-attachment: fixed;
  13.     background-size:100% 100%;
  14.     position: absolute;
  15.     margin-left: auto;
  16.     margin-right: auto;
  17. }
  18. li{
  19.     list-style: none;
  20. }
  21. .box{
  22.     width:200px;
  23.     height:200px;
  24.     background-size: cover;
  25.     background-repeat: no-repeat;
  26.     background-attachment: fixed;
  27.     background-size:100% 100%;
  28.     position: absolute;
  29.     margin-left: 42%;
  30.     margin-top: 22%;
  31.     -webkit-transform-style:preserve-3d;
  32.     -webkit-transform:rotateX(13deg);
  33.     -webkit-animation:move 5s linear infinite;
  34. }
  35. .minbox{
  36.     width:100px;
  37.     height:100px;
  38.     position: absolute;
  39.     left:50px;
  40.     top:30px;
  41.     -webkit-transform-style:preserve-3d;
  42. }
  43. .minbox li{
  44.     width:100px;
  45.     height:100px;
  46.     position: absolute;
  47.     left:0;
  48.     top:0;
  49. }
  50. .minbox li:nth-child(1){
  51.     /*background: url(../img/01.png) no-repeat 0 0;*/
  52.     -webkit-transform:translateZ(50px);
  53. }
  54. .minbox li:nth-child(1) img{
  55.     width: 100%;
  56.     height: 100%;
  57. }
  58. .minbox li:nth-child(2) img{
  59.     width: 100%;
  60.     height: 100%;
  61. }
  62. .minbox li:nth-child(3) img{
  63.     width: 100%;
  64.     height: 100%;
  65. }
  66. .minbox li:nth-child(4) img{
  67.     width: 100%;
  68.     height: 100%;
  69. }
  70. .minbox li:nth-child(5) img{
  71.     width: 100%;
  72.     height: 100%;
  73. }
  74. .minbox li:nth-child(6) img{
  75.     width: 100%;
  76.     height: 100%;
  77. }
  78. .minbox li:nth-child(2){
  79.     /*background: url(../img/02.png) no-repeat 0 0;*/
  80.     -webkit-transform:rotateX(180deg) translateZ(50px);
  81. }
  82. .minbox li:nth-child(3){
  83.     /*background: url(../img/03.png) no-repeat 0 0;*/
  84.     -webkit-transform:rotateX(-90deg) translateZ(50px);
  85. }
  86. .minbox li:nth-child(4){
  87.     /*background: url(../img/04.png) no-repeat 0 0;*/
  88.     -webkit-transform:rotateX(90deg) translateZ(50px);
  89. }
  90. .minbox li:nth-child(5){
  91.     /*background: url(../img/05.png) no-repeat 0 0;*/
  92.     -webkit-transform:rotateY(-90deg) translateZ(50px);
  93. }
  94. .minbox li:nth-child(6){
  95.     /*background: url(../img/06.png) no-repeat 0 0;*/
  96.     -webkit-transform:rotateY(90deg) translateZ(50px);
  97. }
  98. .maxbox li:nth-child(1){
  99.     /*background: url(../img/1.png) no-repeat 0 0;*/
  100.     -webkit-transform:translateZ(50px);
  101. }
  102. .maxbox li:nth-child(2){
  103.     /*background: url(../img/2.png) no-repeat 0 0;*/
  104.     -webkit-transform:translateZ(50px);
  105. }
  106. .maxbox li:nth-child(3){
  107.     /*background: url(../img/3.png) no-repeat 0 0;*/
  108.     -webkit-transform:rotateX(-90deg) translateZ(50px);
  109. }
  110. .maxbox li:nth-child(4){
  111.     /*background: url(../img/4.png) no-repeat 0 0;*/
  112.     -webkit-transform:rotateX(90deg) translateZ(50px);
  113. }
  114. .maxbox li:nth-child(5){
  115.     /*background: url(../img/5.png) no-repeat 0 0;*/
  116.     -webkit-transform:rotateY(-90deg) translateZ(50px);
  117. }
  118. .maxbox li:nth-child(6){
  119.     /*background: url(../img/6.png) no-repeat 0 0;*/
  120.     -webkit-transform:rotateY(90deg) translateZ(50px);
  121. }
  122. .maxbox{
  123.     width: 800px;
  124.     height: 400px;
  125.     position: absolute;
  126.     left: 0;
  127.     top: -20px;
  128.     -webkit-transform-style: preserve-3d;
  129.  
  130. }
  131. .maxbox li{
  132.     width: 200px;
  133.     height: 200px;
  134.     background: #fff;
  135.     border:1px solid #ccc;
  136.     position: absolute;
  137.     left: 0;
  138.     top: 0;
  139.     opacity: 0.2;
  140.     -webkit-transition:all 1s ease;
  141. }
  142. .maxbox li:nth-child(1){
  143.     -webkit-transform:translateZ(100px);
  144. }
  145. .maxbox li:nth-child(1) img{
  146.    width: 100%;
  147.     height: 100%;
  148. }
  149. .maxbox li:nth-child(2) img{
  150.     width: 100%;
  151.     height: 100%;
  152. }
  153. .maxbox li:nth-child(3) img{
  154.     width: 100%;
  155.     height: 100%;
  156. }
  157. .maxbox li:nth-child(4) img{
  158.     width: 100%;
  159.     height: 100%;
  160. }
  161. .maxbox li:nth-child(5) img{
  162.     width: 100%;
  163.     height: 100%;
  164. }
  165. .maxbox li:nth-child(6) img{
  166.     width: 100%;
  167.     height: 100%;
  168. }
  169. .maxbox li:nth-child(2){
  170.     -webkit-transform:rotateX(180deg) translateZ(100px);
  171. }
  172. .maxbox li:nth-child(3){
  173.     -webkit-transform:rotateX(-90deg) translateZ(100px);
  174. }
  175. .maxbox li:nth-child(4){
  176.     -webkit-transform:rotateX(90deg) translateZ(100px);
  177. }
  178. .maxbox li:nth-child(5){
  179.     -webkit-transform:rotateY(-90deg) translateZ(100px);
  180. }
  181. .maxbox li:nth-child(6){
  182.     -webkit-transform:rotateY(90deg) translateZ(100px);
  183. }
  184. .box:hover ol li:nth-child(1){
  185.     -webkit-transform:translateZ(300px);
  186.     width: 400px;
  187.     height: 400px;
  188.     opacity: 0.8;
  189.     left: -100px;
  190.     top: -100px;
  191. }
  192. .box:hover ol li:nth-child(2){
  193.     -webkit-transform:rotateX(180deg) translateZ(300px);
  194.     width: 400px;
  195.     height: 400px;
  196.     opacity: 0.8;
  197.     left: -100px;
  198.     top: -100px;
  199. }
  200. .box:hover ol li:nth-child(3){
  201.     -webkit-transform:rotateX(-90deg) translateZ(300px);
  202.     width: 400px;
  203.     height: 400px;
  204.     opacity: 0.8;
  205.     left: -100px;
  206.     top: -100px;
  207. }
  208. .box:hover ol li:nth-child(4){
  209.     -webkit-transform:rotateX(90deg) translateZ(300px);
  210.     width: 400px;
  211.     height: 400px;
  212.     opacity: 0.8;
  213.     left: -100px;
  214.     top: -100px;
  215. }
  216. .box:hover ol li:nth-child(5){
  217.     -webkit-transform:rotateY(-90deg) translateZ(300px);
  218.     width: 400px;
  219.     height: 400px;
  220.     opacity: 0.8;
  221.     left: -100px;
  222.     top: -100px;
  223. }
  224. .box:hover ol li:nth-child(6){
  225.     -webkit-transform:rotateY(90deg) translateZ(300px);
  226.     width: 400px;
  227.     height: 400px;
  228.     opacity: 0.8;
  229.     left: -100px;
  230.     top: -100px;
  231. }
  232. @keyframes move{
  233.     0%{
  234.         -webkit-transform: rotateX(13deg) rotateY(0deg);
  235.     }
  236.     100%{
  237.         -webkit-transform:rotateX(13deg) rotateY(360deg);
  238.     }
  239. }

1.jpg  2.jpg~6.jpg是外层

01.jpg~06.jpg是里层

图片大小可随意设置  建议 外层100*100  里层400*400

如需要更改为png图片需要更改index.html的代码

 

提取代码无脑往img 里面放对应的图片就行

链接: https://pan.baidu.com/s/1_Xi1ohbwHSevvFM0qSEqJA 提取码: s86f 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/127352
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号