七夕表白相册-源人也有情调.zip资源-CSDN文库

共11个文件

jpg：5个

gif：5个

html：1个

javascript

需积分: 5 143 浏览量 2023-06-08 11:00:03 上传评论收藏 26.55MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

七夕表白相册-源人也有情调.zip （11个子文件）

七夕表白相册-3d自转

最美相册.html 4KB

images

02.jpg 144KB

06.jpg 114KB

10.jpg 269KB

07.gif 6.42MB

09.gif 729KB

03.gif 5.09MB

08.jpg 395KB

05.gif 6.28MB

04.jpg 219KB

01.gif 7.03MB

<!doctype html> <html> <head> <meta charset="utf-8"/> <title>最美相册</title> <style> body { margin:0; background:#000; } #wrap { width:300px; height:400px; position: relative; margin: 300px auto; -webkit-perspective:3000px; -moz-perspective:3000px; -ms-transform:perspective(3000px); -ms-perspective:3000px; } #head { width:100%; height:100%; position: absolute; -webkit-transform-style: preserve-3d; -webkit-animation:donghua 15s linear 0s infinite; -moz-transform-style: preserve-3d; -moz-animation:donghua 15s linear 0s infinite; -ms-transform-style: preserve-3d; -ms-animation:donghua 25s linear 0s infinite; } #head div { position: absolute; top:0; left:0; width:300px; height:400px; border:1px solid #000 text-align: center; line-height:100px; } #head div:nth-child(1) { -webkit-transform:rotateY(0deg) translateZ(400px); -moz-transform:rotateY(0deg) translateZ(400px); -ms-transform:rotateY(0deg) translateZ(400px); background:url(images/01.gif); background-size:cover; } #head div:nth-child(2) { -webkit-transform:rotateY(36deg) translateZ(500px); -moz-transform:rotateY(36deg) translateZ(500px); -ms-transform:rotateY(36deg) translateZ(500px); background:url(images/02.jpg); background-size:cover; } #head div:nth-child(3) { -webkit-transform:rotateY(72deg) translateZ(400px); -moz-transform:rotateY(72deg) translateZ(400px); -ms-transform:rotateY(72deg) translateZ(400px); background:url(images/03.gif); background-size:cover; } #head div:nth-child(4) { -webkit-transform:rotateY(108deg) translateZ(500px); -moz-transform:rotateY(108deg) translateZ(500px); -ms-transform:rotateY(108deg) translateZ(500px); background:url(images/04.jpg); background-size:cover; } #head div:nth-child(5) { -webkit-transform:rotateY(144deg) translateZ(400px); -moz-transform:rotateY(144deg) translateZ(400px); -ms-transform:rotateY(144deg) translateZ(400px); background:url(images/05.gif); background-size:cover; } #head div:nth-child(6) { -webkit-transform:rotateY(180deg) translateZ(500px); -moz-transform:rotateY(180deg) translateZ(500px); -ms-transform:rotateY(180deg) translateZ(500px); background:url(images/06.jpg); background-size:cover; } #head div:nth-child(7) { -webkit-transform:rotateY(216deg) translateZ(400px); -moz-transform:rotateY(216deg) translateZ(400px); -ms-transform:rotateY(216deg) translateZ(400px); background:url(images/07.gif); background-size:cover; } #head div:nth-child(8) { -webkit-transform:rotateY(252deg) translateZ(500px); -moz-transform:rotateY(252deg) translateZ(500px); -ms-transform:rotateY(252deg) translateZ(500px); background:url(images/08.jpg); background-size:cover; } #head div:nth-child(9) { -webkit-transform:rotateY(288deg) translateZ(400px); -moz-transform:rotateY(288deg) translateZ(400px); -ms-transform:rotateY(288deg) translateZ(400px); background:url(images/09.gif); background-size:cover; } #head div:nth-child(10) { -webkit-transform:rotateY(324deg) translateZ(500px); -moz-transform:rotateY(324deg) translateZ(500px); -ms-transform:rotateY(324deg) translateZ(500px); background:url(images/10.jpg); background-size:cover; } @-webkit-keyframes donghua{ 0%{transform:rotateX(5deg) rotateY(360deg)} 50%{transform:rotateX(-5deg) rotateY(180deg)} 100%{transform:rotateX(5deg) rotateY(0deg)} } @-moz-keyframes donghua{ 0%{transform:rotateY(10deg) rotateY(0deg)} 50%{transform:rotateY(-10deg) rotateY(180deg)} 100%{transform:rotateY(10deg) rotateY(360deg)} } @-ms-keyframes donghua{ 0%{transform:rotateY(10deg) rotateY(0deg)} 50%{transform:rotateY(-10deg) rotateY(180deg)} 100%{transform:rotateY(10deg) rotateY(360deg)} } </style> </head> <body> <div id="wrap"> <div id="head"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </body> </html>

评论收藏

内容反馈