<!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. Flink 自定义 ClickHouse Table Connector 的简单实现

    本次实现基于 Flink 1.18 版本,具体的对象之间的关系可以先参考官网的图: 先拿官网上的 Socket 示例来说一下实现过程: 首先编写 SocketDynamicTableFactory 实 ...

  2. Jenkins实战系列（一）——Jenkins简介

    Jenkins是一个开源的自动化构建工具,可以帮助开发人员自动构建.测试和部署软件.它支持多种编程语言.版本控制系统和构建工具,如Java.Git.Maven等.Jenkins的核心功能是通过一系列插 ...

  3. 使用Oracle SQL Developer工具完成Mariadb数据库迁移到Oracle数据库

    Oracle SQL Developer 是一个免费的集成开发环境,简化了传统部署和云部署中 Oracle 数据库的开发和管理.SQL Developer 提供完整的端到端的 PL/SQL 应用开发, ...

  4. Redis 数据类型list以及使用场景

    简介: Redis 数据类型list以及使用场景 数据存储需求:存储多个数据,并对数据进入存储空间的顺序进行区分需要的存储结构:一个存储空间保存多个数据,且通过数据可以体现进入顺序list类型:保存多 ...

  5. 划重点｜iOS15正式发布， 全新的通知推送系统，你必须要知道！

    ​简介: 今年友盟+联合达摩院决策智能实验室讲算法技术,推出国内首个智能推送功能,帮助产品运营人员实现一键式触达的精细化运营.通过精心打磨的在线学习与优化算法,对推送人群与推送文案进行精准匹配,最大化 ...

  6. [GPT] nodejs 有哪些类似 jquery 语法的 html 解析库

      在Node.js中,有一些类似jQuery语法的HTML解析库可供选择. 以下是其中几个常用的库: 1. Cheerio: Cheerio是一个快速.灵活且易于使用的HTML解析库,它提供了类似于 ...

  7. [Go] httprouter 自动 OPTIONS 响应 和 CORS

    httprouter 是 Gin framework 使用的路由组件. 要对 OPTIONS 请求自动响应,比如支持 CORS 请求或者设置请求头,可用 Router.GlobalOPTIONS. r ...

  8. [PHP] 浅谈 Laravel Scout 的存在意义

    注:Laravel Scout 是官方支持的对框架模型数据进行全文检索功能的扩展包. Laravel 的 Scout 与 Eloquent ORM 进行了深度集成,不用开发者再自己进行代码侵入了. L ...

  9. 低开开发笔记(五)：修bug-深拷贝与浅拷贝

    好家伙   今天遇到一个bug 0.问题描述 描述如下:  代码如下: copynodefunc() { this.copynode = this.model.selected }, affixnod ...

  10. Oracle和达梦：相似度函数：UTL_MATCH

    UTL_MATCH介绍: Oracle的UTL_MATCH包是一个提供字符串匹配和相似度计算功能的工具包.它包含了一系列函数,用于执行字符串比较.相似度计算和模式匹配等操作. UTL_MATCH包中的 ...