使用CSS mask-image和background-image实现带阴影的3D球体

3D sphere with shadows，使用遮挡图（mask-image）实现的阴影效果。

css, sphere, 3d

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2796
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

$sphere-color: hsl(0, 0%, 40%);
$sphere-highlight: radial-gradient(
	circle at 30% 20%,
	hsla(0, 100%, 100%, 1),
	hsla(0, 100%, 100%, 0) 80%
);
$sphere-core: radial-gradient(
	ellipse 50% 50% at 70% 40%,
	hsla(0, 0%, 10%, 0.5),
	hsla(0, 0%, 10%, 0)
);
// $sphere-reflection: radial-gradient(
// 	ellipse 47% 50% at 46% 49%,
// 	hsla(0, 0%, 10%, 1) 93%,
// 	hsla(0, 0%, 10%, 0) 100%
// );

$shadow-color: hsla(0, 0%, 10%, 0.6);
$shadow-body: radial-gradient(
	ellipse 45% 50% at 45% 50%,
	hsla(0, 0%, 10%, 1) 99%,
	hsla(0, 0%, 10%, 0) 100%
);
$shadow-penumbra: radial-gradient(
	ellipse 47% 50% at 46% 49%,
	hsla(0, 0%, 10%, 1) 93%,
	hsla(0, 0%, 10%, 0) 100%
);
$shadow-occlusion: radial-gradient(
	ellipse 25% 25% at 30% 65%,
	hsla(0, 0%, 10%, 1) 30%,
	hsla(0, 0%, 10%, 0)
);

.sphere {
	z-index: 2;
	position: absolute;
	top: 20vw;
	left: 50vw;
	width: 30vw;
	height: 30vw;
	overflow: hidden;
	border-radius: 100%;
	background-color: $sphere-color;
	background-image: $sphere-core;
}

.highlight {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: $sphere-highlight;
	mask-image: radial-gradient(
		ellipse 55% 50% at 33% 30%,
		hsla(0, 0%, 0%, 1) 90%,
		hsla(0, 0%, 0%, 0)
	);
}

.shadow {
	z-index: 1;
	position: absolute;
	top: 38vw;
	left: 54vw;
	width: 40vw;
	height: 17vw;
	mask-image: $shadow-body, $shadow-penumbra;
	background-color: $shadow-color;
	background-image: $shadow-occlusion;
}

body {
	background-color: #7086a2;
}

HTML

3D sphere with shadows，使用遮挡图（mask-image）实现的阴影效果。

css, sphere, 3d

编辑器支持Emmet

快捷键

3D sphere with shadows，使用遮挡图（mask-image）实现的阴影效果。

css, sphere, 3d

使用CSS3 PerspectiveTransform实现的逼真3D地球自转动画

使用CSS3 border-image和SVG实现的美丽边界图形

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：