html – 如何在css中创建一个球体?
发布时间:2020-12-14 21:19:34 所属栏目:资源 来源:网络整理
导读:我试图用纯粹的css创建一个3D球体,但我无法生成所需的形状.我见过 cylinder,但我找不到创建实际球体的任何参考. 我目前的代码如下: .red { background-color: red;}.green { background-color: green;}.blue { background-color: blue;}.yellow { backgroun
我试图用纯粹的css创建一个3D球体,但我无法生成所需的形状.我见过
cylinder,但我找不到创建实际球体的任何参考.
我目前的代码如下: .red { background-color: red; } .green { background-color: green; } .blue { background-color: blue; } .yellow { background-color: yellow; } .sphere { height: 200px; width: 200px; border-radius: 50%; text-align: center; vertical-align: middle; font-size: 500%; position: relative; box-shadow: inset -10px -10px 100px #000,10px 10px 20px black,inset 0px 0px 10px black; display: inline-block; margin: 5%; } .sphere::after { background-color: rgba(255,255,0.3); content: ''; height: 45%; width: 12%; position: absolute; top: 4%; left: 15%; border-radius: 50%; transform: rotate(40deg); } <div class="sphere red"></div> <div class="sphere green"></div> <div class="sphere blue"></div> <div class="sphere yellow"></div> <div class="sphere"></div> 然而, >答:这些只是2D圆形,而不是3D形状 对不起,如果我错过了什么,但我不太确定我应该去哪里问这个. 解决方法
以下答案不是实际的3D形状.它只是给人一种轻微的3D幻觉,但是,根据你的使用情况,你可能会“伪造”它:
html,body{margin:0;padding:0;background:#222;} div{ height:300px; width:300px; background:url(http://lorempixel.com/300/300); border-radius:50%; animation:spin 3s linear infinite; transform:rotate(-15deg); position:relative; } div:before{ content:""; position:absolute; bottom:-50px; border-radius:50%; left:0; height:10%; width:100%; transform:rotate(15deg); background:rgba(0,0.6); box-shadow: 0 0 10px 2px rgba(0,0.6); } div:after{ content:""; position:absolute;z-index:12; top:0;left:0;height:100%;width:100%;border-radius:50%; box-shadow:inset -20px -20px 20px 2px #222,inset 20px 20px 20px 5px rgba(200,200,0.4); } @keyframes spin{ to{background-position:-300px 0;} } <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div></div> 它可以为div的背景位置设置动画,通过使用框阴影,您可以“模仿”3D形状的阴影. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |