html3d动画制作（纯CSS绘制3D立体效果软件包装封面）
html3d动画制作（纯CSS绘制3D立体效果软件包装封面）全代码如下：<!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;ma
特色如下：
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>
版权声明：
转载请务必保留版权信息。
