CSS3：3D环绕实现篇
废话不多说，直接给大家看效果：[不仅有背景，还有音乐]
大神请绕道：小白请继续往下看：
是不是心动了呢，心动不如行动：代码在手，天下我有，表白利器可不要错过了。
HTML,CSS代码都在下方，至于图片的话就不在这里粘贴了，把图片路径改成自己喜欢的就可以了。
源代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3D播放器</title> <style> *{ margin: 0;padding: 0; } body{ background-size: cover;background:url("images/image10/bg.jpg") center top;background-repeat: no-repeat;overflow: hidden; } ul{ width: 200px;height: 200px;position: absolute;top: 400px;left: 20%;margin-left: -100px;transform-style: preserve-3d; transform: rotateX(0deg) rotateY(0deg);animation: play 6s linear 0s infinite normal; } ul li { list-style: none;width: 200px;height: 200px;line-height: 200px;font-size: 60px;text-align: center;position: absolute;top: 0; left: 0; } ul li img{ width: 200px;height: 200px;border: 5px solid skyblue;box-sizing: border-box; } ul:hover{ animation-play-state: paused; } ul:hover li img{ opacity: 0.7; } ul li:hover img{ opacity: 1; } ul li:nth-child(1){ transform: rotateY(60deg) translateZ(200px); } ul li:nth-child(2){ transform: rotateY(120deg) translateZ(200px); } ul li:nth-child(3){ transform: rotateY(180deg) translateZ(200px); } ul li:nth-child(4){ transform: rotateY(240deg) translateZ(200px); } ul li:nth-child(5){ transform: rotateY(300deg) translateZ(200px); } ul li:nth-child(6){ transform: rotateY(360deg) translateZ(200px); } @keyframes play { from{ transform: rotateX(-12deg) rotateY(0deg); } to{ transform: rotateX(-12deg) rotateY(360deg); } } .heart{ width: 173px;height: 157px;position: absolute;left: 100px;bottom: 100px;animation:plays 5s linear 0s infinite normal; } @keyframes plays { 0%{ left: 150px;bottom: 150px;opacity: 0.8; } 20%{ left: 250px;bottom: 250px;opacity: 0.6; } 40%{ left: 350px;bottom: 350px;opacity: 0.5; } 60%{ left: 500px;bottom: 500px;opacity: 0.3; } 80%{ left: 600px;bottom: 300px;opacity: 0.5; } 90%{ left: 800px;bottom: 100px;opacity: 0.8; } 100%{ left: 900px;bottom: 0px;opacity: 0.1; } } </style></head><body><ul> <li><img src="images/image10/y1.jpeg"></li> <li><img src="images/image10/y2.jpg"></li> <li><img src="images/image10/y3.jpeg"></li> <li><img src="images/image10/y4.png"></li> <li><img src="images/image10/y5.jpg"></li> <li><img src="images/image10/y6.jpg"></li></ul><img src="images/image10/xin.png"class="heart"><audio src="images/image10/song.mp3" autoplay="autoplay" loop="loop"></audio><script>
</script></body></html>
CSS3:3D环绕实现
时间： 2024-11-11 08:44:55