特色如下：
1、纯CSS+div代码，包括css样式、html（div）结构；
2、无其他依赖，不含javascript或其他外用文件；
3、感兴趣的小伙伴可以自己修改细节优化动画。
小白使用教程：
1、PC桌面新建txt文件，将.txt后缀改成.html；
2、将代码复制粘贴进去并保存；
3、使用市面流行浏览器打开即可呈现效果。
全代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>纯CSS绘制效果3D立体软件包装封面</title> <style> body{background:#bbbbbb;background-image:-webkit-radial-gradient(top,circle cover,#2f2f2f 0%,#2e2e2e 80%);padding:0;margin:0;height:100vh;display:flex;align-items:center;justify-content:center} .soft{width:450px;height:600px;display:flex;align-items:center;justify-content:center;position:relative} .wrap{width:250px;height:400px;perspective:800px} .box{position:relative;width:100%;height:100%;transition:all .5s;transform-style:preserve-3d;transform:rotateY(38deg)} .front,.left{position:absolute;top:0;left:0;line-height:50px;text-align:center;-webkit-box-reflect:below 2px -webkit-linear-gradient(transparent 80%,rgba(0,0,0,.2))} .front{width:280px;height:394px;background-color:#bbbbbb;transform:translateZ(23px);position:absolute;box-shadow:10px 0 11 0px rgb(0 0 0 / 18%);top:-1px;left:15px;-webkit-box-reflect:below 2px -webkit-linear-gradient(transparent 80%,rgba(0,0,0,.2))} .front:after{content:'';width:280px;height:190px;background-color:#593b3b;transform:translateZ(23px);position:absolute;top:-1px;left:0} .left{width:30px;height:400px;background-color:#7a7a7a;box-shadow:0 0 20px 0px rgb(0 0 0 / 18%);transform:translateY(-4px) rotateY(-68deg)} .left:after{content:'';width:81px;height:192px;left:-26px;top:4px;position:absolute;background-color:#412b2b;transform:translateY(-4px) rotateY(-68deg)} .disc{position:absolute;right:-28px;border:100px solid #d6d6d6;width:40px;height:40px;box-shadow:0 0 20px 0px rgb(0 0 0 / 58%);bottom:87px;z-index:5;border-radius:100%;-webkit-box-reflect:below 2px -webkit-linear-gradient(transparent 60%,rgba(0,0,0,0.2))} .disc:after{content:'';position:absolute;left:-19px;border:14px solid #593b3b;width:50px;height:50px;bottom:-19px;z-index:0;border-radius:100%} </style></head><body> <div class="soft"> <div class="wrap"> <div class="box"> <div class="left"></div> <div class="front"></div> </div> </div> <div class="disc"></div> </div></body></html>版权声明：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！