<!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. 转载（localStorage设置过期时间）

    转载地址:https://blog.csdn.net/zhaoxiang66/article/details/86703438 class Storage{ constructor(name){ th ...

  2. Dubbo-go-Mesh 开启新一代 Go 微服务形态

    ​简介:Proxyless Service Mesh 能力将跟随 Dubbo-go 下一版本发布,稳定的性能需要社区成员们共同的关注与建设.在此基础之上,我们还会进一步探索轻量级 sdk + side ...

  3. Ollama是什么,为什么这么好用

    Ollama 是一个开源框架,专为在本地机器上便捷部署和运行大型语言模型(LLM)而设计. 以下是其主要特点和功能概述: 1. 简化部署:Ollama 目标在于简化在 Docker 容器中部署大型语言 ...

  4. [Cloud] From Borg to Kubernetes

    Borg System Architect: Kubernetes System Architect: Link:https://www.cnblogs.com/farwish/p/12751861. ...

  5. dotnet C# 如何使用 MemoryFailPoint 检查是否有足够的内存资源来执行操作

    在 dotnet 里面的 MemoryFailPoint 可用来测试当前进程是否还能分配申请给定大小的内存空间,这个是一个高级编程的类型,大部分情况下都不需要用到.本文内容由 New Bing 编写, ...

  6. IEC104 从站/服务端模拟器 调试工具推荐

    目录 IEC104 从站/服务端模拟器 调试工具推荐 主要功能 软件截图 IEC104 从站/服务端模拟器 调试工具推荐 下载地址:http://www.redisant.cn/iec104serve ...

  7. EasyRepro与测试自动化（ 一） 概览

    EasyRepro是一个框架,允许在特定的Dynamics 365组织上执行自动化UI测试.你可以使用它来自动化冒烟测试.回归测试和负载测试等.该框架是由开源项目Selenium构建的,Seleniu ...

  8. 一些简单的Post方式WebApi接收参数和传递参数的方法及总结

    原文地址:https://www.zhaimaojun.top/Note/5475297(我自己的博客网站) 各种Post方式上传参数到服务器,服务器接收各种参数的示例 webapi可以说是很常用了, ...

  9. 使用Lagent AgentLego 搭建智能体-书生浦语大模型实战营第二期第6节作业

    书生浦语大模型实战营第二期第6节作业 对于这个作业,这里只给出截图,不给详细过程,因为确实没有什么好写的,会做Demo那个作业就会做这个作业.具体的步骤可以查看官方教程. 基础作业 完成 Lagent ...

  10. Asynq 实现 Go 异步任务处理

    目录 Asynq 实现 Go 异步任务处理 一.概述 二.快速开始 1. 准备工作 2. 安装asynq软件包 3. 创建项目asynq_task 2. Redis连接项 4. Task任务 5. 编 ...