<!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. vue中img标签图片 加载时 与 加载失败 的处理方法

    开发过程中经常需要和图片处理打交道,看了网上很多有关图片处理的方法,都是讲解得一知半解,没有比较全面的总结.下面,将简单总结一个我们通过vue去处理img标签过程中,图片加载时,与图片加载失败时的处理 ...

  2. 力扣27(java&python)-移除元素（简单）

    题目: 给你一个数组 nums 和一个值 val,你需要 原地 移除所有数值等于 val 的元素,并返回移除后数组的新长度. 不要使用额外的数组空间,你必须仅使用 O(1) 额外空间并 原地 修改输入 ...

  3. HarmonyOS NEXT应用开发案例—使用弹簧曲线实现抖动动画及手机振动效果案例

    介绍 本示例介绍使用vibrator.startVibration方法实现手机振动效果,用animateTo显示动画实现点击后的抖动动画. 效果图预览 使用说明 加载完成后显示登录界面,未勾选协议时点 ...

  4. 一文读懂 BizDevOps：数字化转型下的技术破局

    简介: 目标.方法与实践. 我们正迈向数字经济时代,数字化转型成为普遍行动.未来绝大多数业务都将运行在数字基座之上,软件系统成为业务创新和发展的核心引擎.在这一趋势下,产品研发的交付能力面临巨大挑战, ...

  5. 持续定义Saas模式云数据仓库+实时分析

    简介: 从实时分析的价值.场景和数据流程,以及用户对平台能力要求展开,讲述云数据仓库MaxCompute的产品能力优势 ,面对实时分析场景的能力演进要求.进而以实时分析典型场景的全数据流程处理.建模和 ...

  6. WPF 使用 VisualBrush 在 4k 加 200 DPI 设备上某些文本不渲染看不见问题

    这是我做一个十万点实时刷新的图表控件遇到的问题,做过高性能图表的伙伴大概都知道,此时需要关闭命中测试的功能,无论是控件的还是 Drawing 的,否则计算命中测试的耗时将会让主线程卡住.为了解决此问题 ...

  7. 7.deployment扩容-查看pod使用的CPU-统计ready状态节点数量

    官方文档:https://kubernetes.io/zh-cn/docs/tasks/run-application/scale-stateful-set/题目1: 将名为loadbalancer的 ...

  8. 【深度学习】基础--NumPy

    因为深度学习会应用到我们大学时候学习的数学知识---线性代数.(矩阵当年想起来还是挺有意思的,有考研的经历都有感觉) 而在计算机里面如何展示矩阵的计算和应用,就需要运用到NumPy,是Python的一 ...

  9. 【进阶篇】基于 Redis 实现分布式锁的全过程

    目录 前言 一.关于分布式锁 二.RedLock 红锁(不推荐) 三.基于 setIfAbsent() 方法 四.使用示例 4.1RedLock 使用 4.2setIfAbsent() 方法使用 五. ...

  10. Git reset 的hard、soft、mixed参数对比

    目录 分区概念 1. --soft参数 2. --mixed参数 3. --hard参数 分区概念 先要清楚在本地,git会分三个区:工作区.暂存区.本地库. 当使用去做版本移动的时候,那么在使用[- ...