当前位置: 首页 > Web前端 > HTML5

【css灵感】模拟3D地球

时间:2023-04-05 13:51:43 HTML5

css中有一个3D变换的方法。一般用来制作一些矩形的效果。如果是圆圈,那就更难了。这里以蒙住眼睛的方式实现了3D效果。点击这里查看无纯广告版现方法

样式>:root{--stars:5vw15vh2px白色,1vw33vh0px白色,2vw25vh2px白色,10vw10vh2px白色,12vw20vh0px白色,30vw15vh2px白色,16vw5vh2px白色,24vw3vwh2px10v40VH0PX白色,33VW35VH2PX白色,12VW38VH2PX白色,24VW10VH0PX白色,33VW5VH2PX白色,20VW10VH0PX白色,80VW10VH10VH10VH2PXWHITE50vh0pxwhite,65vw35vh2pxwhite,64vw10vh0pxwhite,85vw2vh0pxwhite,92vw40vh0pxwhite,75vw35vh2pxwhite,90vw10vh0pxwhite,80vw33vh2pxwhite,80vw10vh0pxwhite,95vw2vh2pxwhite,95vw25vh0pxwhite,65vw25vh0pxwhite,85vw20vh0pxwhite,75vw17vh0pxwhite,25vw25vh0pxwhite,95vw95vh2pxwhite,1vw90vh0pxwhite,2vw80vh2pxwhite,10vw70vh2pxwhite,12vw65vh0pxwhite,30vw80vh2pxwhite,16vw85vh2pxwhite,14vw50vh0pxwhite,5vw55vh0pxwhite,20vw58vh2pxwhite,80vw38vh2pxwhite,90vw90vh0pxwhite,90vw95vh2pxwhite,88vw10vh0pxwhite,80vw10vh2pxwhite,62vw20vh0pxwhite,60vw15vh2pxwhite,70vw7vh0pxwhite,62vw50vh0pxwhite,65vw35vh2pxwhite,64vw10vh0pxwhite,85vw55vh0pxwhite,92vw60vh0pxwhite,75vw67vh2pxwhite,60vw80vh0px白色,56vw95vh2px白色,75vw70vh0px白色,70vw96vh2px白色,79vw87vh0px白色,80vw78vh0px白色,85vw70vh0px白色,90vw80vh0px白色,25vw-th-x-whitespiration25-行星体{高度:100vh;}.css-inspiration-earth-planet-body{背景:#060817;溢出:隐藏;显示:弹性;对齐项目:居中;证明内容:中心;}.css-inspiration-earth-planet-body:before{content:'';位置:绝对;顶部:0;左:0;右:0;底部:50%;边界半径:100%;宽度:3pX;高度:4px;z-指数:-1;不透明度:0.3;box-shadow:var(--stars);}.css-inspiration-earth-planet-earth{perspective:400vmin;变换样式:保留3d;宽度:最小值(80vmin,320px);height:min(80vmin,320px);}.css-inspiration-earth-planet-earth::before{内容:'';位置:绝对;宽度:100%;高度:100%;顶部:0%;左:0%;背景:url(../../../../uploads/css/css-inspiration-earth-planet/earth.jpg)repeat-x;背景尺寸:封面;边界半径:50%;动画:旋转30s无限线性;box-shadow:-80px-15px80px10pxrgba(0,0,0,.9)inset,-10px0px15px-7px#f0df1759;}@keyframesrotate{0%{background-position:0px0px;}100%{背景位置:1200px0px;}}