<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background:#000;
        }
        ul,li{
            list-style:none;
        }
        .fixed_center{
            position:fixed;
            left:0;right:0;
            top:0;bottom:0;
            margin:auto;
        }
        /* 光晕 */
        .box{
            width:600px;
            height:600px;
            /* border:10px solid #fff; */
            /* 形成一个圆 */
            border-radius:100%;
            /* 阴影 css3 */
            box-shadow:0 0 51px 22px #fff;
            /* 3d场景 */
            transform-style:preserve-3d;
            /* 转动一个角度 */
            transform:rotateX(64deg) rotateY(-29deg);
            /* 光晕转动 */
            animation:gyRotate 20s linear infinite;
        }
        /* 球体 */
        .ball{
            width:380px;
            height:380px;
            /* 正圆 */
            border-radius:100%;
            /* 3d场景 */
            transform-style:preserve-3d;
            /* 调用关键帧 */
            animation:ballRotate 10s linear infinite;
        }
        .ball li{
            position: absolute;
            width:100%;
            height:100%;
            /* border:1px solid red; */
            /* 正圆 */
            border-radius:100%;
            /* 阴影 */
            box-shadow:0 0 18px -1px orange;
        }
        .ball .li1{
            transform:rotateX(20deg);
        }
        .ball .li2{
            transform:rotateX(40deg);
        }
        .ball .li3{
            transform:rotateX(60deg);
        }
        .ball .li4{
            transform:rotateX(80deg);
        }
        .ball .li5{
            transform:rotateX(100deg);
        }
        .ball .li6{
            transform:rotateX(120deg);
        }
        .ball .li7{
            transform:rotateX(140deg);
        }
        .ball .li8{
            transform:rotateX(160deg);
        }
        .ball .li9{
            transform:rotateX(180deg);
        }
        .ball .li11{
            transform:rotateY(20deg);
        }
        .ball .li12{
            transform:rotateY(40deg);
        }
        .ball .li13{
            transform:rotateY(60deg);
        }
        .ball .li14{
            transform:rotateY(80deg);
        }
        .ball .li15{
            transform:rotateY(100deg);
        }
        .ball .li16{
            transform:rotateY(120deg);
        }
        .ball .li17{
            transform:rotateY(140deg);
        }
        .ball .li18{
            transform:rotateY(160deg);
        }
        .ball .li19{
            transform:rotateY(180deg);
        }
        /* 第二个球 */
        .ball2{
            width:100px;
            height:100px;
            animation:ballRotate 2s linear infinite;
        }
        .ball2 li{
            box-shadow:0 0 18px -1px red; 
        }
        /* 球体转动的关键帧 */
        @keyframes ballRotate {
            0%{
                transform:rotate(0deg);
            }
            100%{
                transform:rotate(360deg);
            }
        }
        /* 光晕转动 */
        @keyframes gyRotate {
            0%{
                transform:rotateX(64deg) rotateY(-29deg) rotateZ(0deg);
            }
            100%{
                transform:rotateX(64deg) rotateY(-29deg) rotateZ(360deg); 
            }
        }
    </style>
</head>
<body>
    <!-- 光晕 -->
    <div class="box fixed_center">
        <ul class="ball fixed_center">
            <li class="li1"></li>
            <li class="li2"></li>
            <li class="li3"></li>
            <li class="li4"></li>
            <li class="li5"></li>
            <li class="li6"></li>
            <li class="li7"></li>
            <li class="li8"></li>
            <li class="li9"></li>
            <li class="li11"></li>
            <li class="li12"></li>
            <li class="li13"></li>
            <li class="li14"></li>
            <li class="li15"></li>
            <li class="li16"></li>
            <li class="li17"></li>
            <li class="li18"></li>
            <li class="li19"></li>
        </ul>
        <!-- 第二个球体 -->
        <ul class="ball ball2">
            <li class="li1"></li>
            <li class="li2"></li>
            <li class="li3"></li>
            <li class="li4"></li>
            <li class="li5"></li>
            <li class="li6"></li>
            <li class="li7"></li>
            <li class="li8"></li>
            <li class="li9"></li>
            <li class="li11"></li>
            <li class="li12"></li>
            <li class="li13"></li>
            <li class="li14"></li>
            <li class="li15"></li>
            <li class="li16"></li>
            <li class="li17"></li>
            <li class="li18"></li>
            <li class="li19"></li>
        </ul>
    </div>
</body>
</html>

css球体的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. 你想不到的！CSS 实现的各种球体效果【附在线演示】

    CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题:另外一种是使用 CSS3 ...

  3. CSS之立体球体

    <!DOCTYPE html><html><head> <title>球体</title> <meta charset="u ...

  4. CSS 实现的各种球体效果

    CSS 实现的各种球体效果[附在线演示] CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有 ...

  5. 【酷】JS+CSS打造沿Y轴纵深运动的3D球体

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  6. CSS环绕球体的旋转文字-3D效果

    代码地址如下:http://www.demodashi.com/demo/12482.html 项目文件结构截图 只需要一个html文件既可: 项目截图: 代码实现原理: 该示例的实现过程很简单,主要 ...

  7. CSS Vocabulary – CSS 词汇表，你都掌握了吗？

    CSS 是前端开发必备技能,入门容易,深入难.比如像 Pseudo-class.Pseudo-element.Media query.Media type 以及 Vendor prefix 的概念,很 ...

  8. CSS Shake – 摇摆摇摆！动感的 CSS 抖动效果

    CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...

  9. Hover.css：一组超实用的 CSS3 悬停效果和动画

    Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...

  10. 优秀工具推荐：超实用的 CSS 库，样板和框架

    当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间.在这篇文章中,我编译整理了我最喜欢的 CSS 样板,框架和库,帮助你在建立网站或应用程序时更加高效. 您可能感兴趣的相关文章 精 ...

随机推荐

  1. verilog中端口定义方式以及如何使用变量

    一.module端口定义方式 目前有两种方式能够对module端口进行定义, 第一种是我目前使用比较多的,把I/O说明写在端口声明语句里,方式A: 1 module block( 2 input a, ...

  2. 如何高效完成ECS多环境部署？

    ​简介:通过本文,你可以了解到,如何通过云效流水线有效拉通开发与运维,打破二者之间的壁垒墙,让开发与运维高效联动.在软件开发和部署过程中,我们的软件往往需要在不同的运行环境中运行,例如:开发人员本地开 ...

  3. 阿里云边缘云ENS再升级 四大场景应用加速产业数字化落地

    ​简介: 云栖大会 | 于10月21日上午举办的边缘云应用升级与技术创新论坛中,阿里云边缘云ENS产品全面升级,从边缘云产品.技术.行业应用等维度全面阐述阿里云在边缘计算领域的技术积累.产品& ...

  4. [GPT] golang代码组织的核心思想

    1/golang代码组织的核心思想 Go语言(Golang)在代码组织上的核心思想是模块化和封装,主要体现在以下几个方面: 1.包(Packages): Go语言通过包(Packages)来组织代码, ...

  5. WPF 如何获取有哪些 VisualBrush 用了某个控件

    我写了一个特殊的控件,我期望了解到有哪些 VisualBrush 捕获了此控件,或者说有哪些 VisualBrush 用了此控件的界面 本文的方法需要用到反射,需要使用 WPF 框架里面没有公开的字段 ...

  6. 2019-8-31-PowerShell-使用-WMI-获取信息

    title author date CreateTime categories PowerShell 使用 WMI 获取信息 lindexi 2019-08-31 16:55:58 +0800 201 ...

  7. vim 使用clang-format 格化C/C++/Java/JavaScript

    vim 使用clang-format 格化C/C++/Java/JavaScript 参考信息 官方参考https://clang.llvm.org/docs/ClangFormat.html 安装 ...

  8. ZJC比赛

    \(\large{Uptatete}\) 先放张图 这次是真的没想再改了,但是一到教室就又会怎么优化了 没必要每个点都让它和其他所有点判断一下,可以从上一个点加加减减啥的转过来 然后我就在昨天那个 \ ...

  9. U.2与M.2接口

    U.2接口 U.2接口别称SFF-8639,是由固态硬盘形态工作组(SSD Factor Work Group)推出的接口规范.U.2接口不但能支持SATA-Express(一种PCI-E与SATA混 ...

  10. createRange表示文档中的一个范围——用于js判断文字添加省略号情况

    document.createRange() 是 JavaScript 中的一个方法,用于创建一个 Range 对象,表示文档中的一个范围.Range 对象通常用于选择文档中的一部分内容,然后对其进行 ...