css 渐变、圆角、制作球体、气泡动画
制作一个球体
- 制作一个基本图形圆
// 基本图形// css.circle { display: block; background: black; border-radius: 50%; height: 300px; width: 300px; margin: 0;}复制代码
2.为圆添加径向渐变
.circle { display: block; background: black; border-radius: 50%; height: 300px; width: 300px; margin: 0; background: radial-gradient(circle at 100px 100px, #5cabff, #000);}复制代码 - 至此已经创建了一个看起来像3d的球体，近进一步美化，使他更好看一些。
3D&阴影
- 根据应用于曲面的着色阴影，可以创建不同的外观。首先，让我们设置一个场景来放球。
.stage { width: 300px; height: 300px; display: inline-block; margin: 20px; perspective: 1200px; perspective-origin: 50% 50%;}.ball { display: block; background: black; margin: 0; border-radius: 50%; height: 300px; width: 300px; background: radial-gradient(circle at 100px 100px, #5cabff, #000);}.ball .shadow { position: absolute; width: 100%; height: 100%; background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%); transform: rotateX(90deg) translateZ(-150px); z-index: -1;}复制代码
利用伪类元素在曲面上着色
.ball { display: inline-block; width: 100%; height: 100%; margin: 0; border-radius: 50%; background: radial-gradient(circle at 50% 120%, #323232, #0a0a0a 80%, #000000 100%);}.ball:before { content: ""; position: absolute; background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%); border-radius: 50%; bottom: 2.5%; left: 5%; opacity: 0.6; height: 100%; width: 90%; -webkit-filter: blur(5px); z-index: 2;}.ball:after { width: 100%; height: 100%; content: ""; position: absolute; top: 5%; left: 10%; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%); transform: translateX(-80px) translateY(-90px) skewX(-20deg); -webkit-filter: blur(10px);}.ball .shadow { position: absolute; width: 100%; height: 100%; background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%); transform: rotateX(90deg) translateZ(-150px); z-index: -1;}.stage { width: 300px; height: 300px; display: inline-block; margin: 20px; perspective: 1200px; perspective-origin: 50% 50%;}复制代码
气泡动画
复制代码
眼睛动画
复制代码
地球仪
- 利用一张平铺的世界地图作为背景图片，通过图片不断改变background-position位置
复制代码