CSS 实现土星外貌

效果展示：

CSS部分：

*{padding: 0;margin: 0;}body {margin: 0;height: 100vh;display: flex;align-items: center;justify-content: center;background-color: black;overflow: hidden;}.saturn {width: 20em;height: 20em;font-size: 20px;position: relative;transform: rotate(-15deg);}.saturn::before,.saturn::after {content: '';position: absolute;width: 9em;height: 9em;background:radial-gradient(circle at top,transparent 40%,black),radial-gradient(transparent 62%,black),linear-gradient(rgba(212, 203, 174, 1) 0%,rgba(212, 203, 174, 1) 10%,rgba(221, 203, 157, 1) 15%,rgba(221, 203, 157, 1) 17%,rgba(213, 181, 143, 1) 22%,rgba(213, 181, 143, 1) 26%,rgba(208, 180, 158, 1) 32%,rgba(208, 180, 158, 1) 36%,rgba(218, 188, 162, 1) 37%,rgba(218, 188, 162, 1) 39%,rgba(211, 184, 157, 1) 41%,rgba(211, 184, 157, 1) 49%,rgba(205, 186, 156, 1) 51%,rgba(205, 186, 156, 1) 52%,rgba(202, 176, 153, 1) 53%,rgba(202, 176, 153, 1) 65%,rgba(190, 177, 145, 1) 68%,rgba(190, 177, 145, 1) 80%,rgba(150, 144, 130, 1) 91%,rgba(150, 144, 130, 1) 95%,rgba(131, 129, 117, 1) 97%,rgba(131, 129, 117, 1) 100%);border-radius: 50%;left: calc((20em - 9em) / 2);top: calc((20em - 9em) / 2);}.saturn::before {clip-path: inset(50% 0 0 0);}.saturn::after {clip-path: inset(0 0 50% 0);}.rings {position: absolute;width: inherit;height: inherit;background: radial-gradient(rgba(24, 19, 25, 0) 0%,rgba(53, 52, 51, 0) 34%,rgba(55, 54, 52, 1) 36%,rgba(56, 55, 53, 1) 37%,rgba(68, 67, 66, 1) 38%,rgba(56, 55, 53, 1) 39%,rgba(68, 67, 66, 1) 40%,rgba(56, 55, 53, 1) 41%,rgba(87, 77, 76, 1) 42%,rgba(87, 77, 76, 1) 44%,rgba(113, 110, 103, 1) 46%,rgba(113, 110, 103, 1) 48%,rgba(113, 98, 93, 1) 49%,rgba(113, 98, 93, 1) 51%,rgba(122, 115, 105, 1) 52%,rgba(113, 98, 93, 1) 53%,rgba(113, 98, 93, 1) 54%,rgba(122, 115, 105, 1) 55%,rgba(106, 99, 89, 1) 56%,rgba(106, 99, 89, 1) 58%,rgba(79, 76, 76, 0) 60%,rgba(65, 64, 70, 1) 61%,rgba(65, 64, 70, 1) 62%,rgba(90, 85, 89, 1) 63%,rgba(78, 74, 73, 1) 65%,rgba(78, 73, 74, 1) 67%,rgba(78, 73, 74, 0) 68%,rgba(78, 73, 75, 1) 69%,rgba(78, 73, 75, 1) 70%,rgba(78, 73, 76, 0) 71%,rgba(77, 72, 76, 0) 72%,rgba(24, 19, 25, 0) 100%);transform: rotateX(75deg);}

HTML部分：

//  saturn容器本身表示土星星球，其中的 rings 元素表示土星环<div class="saturn"><span class="rings"></span></div>

主要用的技术点：

transform
radial-gradient函数。

这里是一个基于hexo搭建的一个博客:https://nanxiangscholar.github.io/
欢迎访问!

CSS 实现土星外貌相关推荐

绝对经典的滑轮新闻显示(javascript+css)实现
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org ...
HTML/CSS/JavaScript学习总结(转)
HTML 网站开发的主要原则是: – 用标签元素HTML描述网页的内容结构: – 用CSS描述网页的排版布局: – 用JavaScript描述网页的事件处理,即鼠标或键盘在网页元素上的动作后的程序 H ...
【HTML＋CSS网页设计与布局从入门到精通】第11章-CSS
目录图像class选择器设置图片每个边框的格式:颜色,线型另一个例子图文混排图片左对齐,居中,右对齐竖直对齐竖直对齐:具体数值-负数八大行星:图文混排图像class选择器 <h ...
HTML页面显示透视效果,《前端每日实战》第176号作品：用透视图表现 HTML、CSS 和 JS 的关系...
今年年初时我偶然看到了下面这张图片,顺手把它记在了微博里,近日抽时间把它们制作成了交互页面,本文记录了开发的过程. 效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接 ...
HTML、CSS、JavaScript学习总结
网站开发的主要原则是: – 用标签元素HTML描述网页的内容结构: – 用CSS描述网页的排版布局: – 用JavaScript描述网页的事件处理,即鼠标或键盘在网页元素上的动作后的程序 HTML(H ...
银河土星_设计师来自土星，开发人员来自木星：或者，为什么沟通很重要
银河土星 by Albino Tonnina 通过白化Tonnina 设计师来自土星,开发人员来自木星:或者,为什么沟通很重要 (Designers are from Saturn, develope ...
HTML+CSS 绘制太阳系各个行星运行轨迹
模拟宇宙太阳系 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
Web前端HTML+CSS全套（1~20）
Web前端HTML+CSS全套(1~20) 拨云见日 CSS基础切图流程 PC企业站布局 PC游戏站布局溯本求源 HTML扩展 CSS扩展 HTMLS新语法 CSS3新语法兼容与hack 风生水 ...
【前端基础】12.CSS 基础知识学习——基本语法结构
视频目录一,css基本规则规范 1.快捷方式 2.css注释 3.css命名规范 4.css书写规范 (1)空格规范 (2)选择器规范 (3)属性规范 5.css样式规则二,字体样式 1.fon ...

CSS 实现土星外貌

CSS 实现土星外貌

效果展示：

CSS部分：

HTML部分：

CSS 实现土星外貌相关推荐

最新文章

热门文章