* { margin:0; padding:0; touch-action:pan-y; } body { background:#000; overflow:hidden; } #perspective { perspective:800px; } #wrap { width:120px; height:180px; margin:0 auto; position:relative; transform-style:preserve-3d; transform:rotateX(-10deg) rotateY(0deg); } #wrap img { width:100%; height:100%; position:absolute; border-radius:1px; transform:rotateY(0deg) translateZ(0px); /*倒影:朝向 偏移 遮盖*//*线性渐变(从哪里开始,开始时候的颜色,结束时候的颜色)*/ -webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%); } #wrap p { width:1200px; height:1200px; background:-webkit-radial-gradient(center center,600px 600px,rgba(244,23,234,0.2),rgba(0,0,0,0)); border-radius:100%; position:absolute; left:50%; top:102%; margin-left:-600px; margin-top:-600px; transform:rotateX(90deg); }
更新时间:2019-12-05 00:51:43
注意:只支持移动端中拖拽旋转,PC端无效果。