送女朋友-css動畫製作立方體相簿
阿新 • • 發佈：2021-01-23
圖片可以換成女朋友照片~
直接上程式碼！
巢狀立方體相簿
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { background-image: radial-gradient(907px at 3.4% 19.8%, rgb(255, 243, 122) 0%, rgb(255, 102, 145) 97.4%); } li { list-style: none; } .list { width: 200px; height: 200px; top: 50%; left: 50%; position: absolute; margin-top: -100px; margin-left: -100px; transform-style: preserve-3d; /* transition: all 2s; */ animation: move 2s linear infinite; transform: rotateX(20deg); } .list-big { width: 600px; height: 600px; position: absolute; top: 50%; left: 50%; margin-left: -200px; margin-top: -200px; transform-style: preserve-3d; /* transition: all 2s; */ animation: move 6s linear infinite; transform: rotateX(20deg); background-size: 600px; } .item { width: 200px; height: 200px; position: absolute; top: 0; left: 0; background-size: 200px; /* opacity: 0.8; */ } .item:nth-child(1) { background: url("./img/hl1.jpg"); transform: translateZ(100px); } .item:nth-child(2) { background: url("img/hl2.jpg"); transform: translateZ(100px) rotateY(180deg); } .item:nth-child(3) { background: url("./img/hl3.jpg"); transform: translateX(-100px) rotateY(-90deg); } .item:nth-child(4) { background: url("./img/hl4.jpg"); transform: translateX(100px) rotateY(90deg); } .item:nth-child(5) { background: url("./img/hl5.jpg"); transform: translateY(-100px) rotateX(90deg); } .item:nth-child(6) { background: url("./img/hl6.jpg"); transform: translateY(100px) rotateX(-90deg); } /* } .item:nth-child(1) { background-image: url("./img/hl1.jpg") no-repeat; } */ /* .list:hover { transform: rotateX(20deg) rotateY(36000deg); } */ @keyframes move { 100% { transform: rotateX(20deg) rotateY(360deg); } } @keyframes turn { to { transform: translateZ(600px); } } @keyframes turn1 { to { transform: translateZ(-600px) rotateY(180deg); } } @keyframes turn2 { to { transform: translateX(-600px) rotateY(-90deg); } } @keyframes turn3 { to { transform: translateX(600px) rotateY(90deg); } } @keyframes turn4 { to { transform: translateY(-600px) rotateX(90deg); } } @keyframes turn5 { to { transform: translateY(600px) rotateX(-90deg); } } .item-big { width: 600px; height: 600px; position: absolute; top: 0; left: 0; opacity: .8; } .item-big:nth-child(1) { animation: turn 2s linear infinite; background: url("./img/2.jpg"); transform: translateZ(300px); } .item-big:nth-child(2) { animation: turn1 2s linear infinite; background: url("img/3.jpg"); transform: translateZ(-300px) rotateY(180deg); } .item-big:nth-child(3) { animation: turn2 2s linear infinite; background: url("./img/4.jpg"); transform: translateX(-300px) rotateY(-90deg); } .item-big:nth-child(4) { animation: turn3 2s linear infinite; background: url("./img/5.jpg"); transform: translateX(300px) rotateY(90deg); } .item-big:nth-child(5) { animation: turn4 2s linear infinite; background: url("./img/6.jpg"); transform: translateY(-300px) rotateX(90deg); } .item-big:nth-child(6) { animation: turn5 2s linear infinite; background: url("./img/7.jpg"); transform: translateY(300px) rotateX(-90deg); } </style> </head> <body> <ul class="list"> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul> <ul class="list-big"> <li class="item-big"></li> <li class="item-big"></li> <li class="item-big"></li> <li class="item-big"></li> <li class="item-big"></li> <li class="item-big"></li> </ul> </body> </html>