<!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. 【笔记】Java相关大杂烩②

    [笔记]Java相关大杂烩② if单分支情况下,如果没有加 {},那么默认只包含第一条语句. if 和 else 分支后面如果包含多条语句,那么需要使用 {} 括起来. 不能随意地使用数学上的表达方式 ...

  2. 【笔记】Oracle列转行unpivot&行转列 PIVOT

    unpivot 说明:将表中多个列缩减为一个聚合列(多列转多行) 语法:unpivot(新列名 for 聚合列名 in (对应的列名1-列名n )) 写到了一个力扣的题,发现这个unpivot函数还没 ...

  3. 使用 Docker 部署 TailChat 开源即时通讯平台

    1)介绍 TailChat 官网: https://tailchat.msgbyte.com/ 作者:https://www.moonrailgun.com/about/ GitHub : https ...

  4. 从技术到科学，中国AI向何处去？

    ​简介: 如果从达特茅斯会议起算,AI已经走过65年历程,尤其是近些年深度学习兴起后,AI迎来了空前未有的繁荣.不过,最近两年中国AI热潮似乎有所回落,在理论突破和落地应用上都遇到了挑战,外界不乏批评 ...

  5. [Trading] 买卖如何移动 ( 影响 ) 市场价格

    大多数人都知道市场价格的变化是因为买卖行为,但却没有多少人了解买卖行为是如何影响市场价格的. 乍一看,这可能令人困惑,因为每一笔市场交易都要求总有一个买家和一个卖家. 首先,重要的是要明白市场上总是有 ...

  6. 21.3K star！推荐一款可视化自动化测试/爬虫/数据采集神器！功能免费且强大！

    大家好,我是狂师! 在大数据时代,信息的获取与分析变得尤为重要.对于开发者.数据分析师乃至非技术人员来说,能够高效地采集网络数据并进行分析是一个强有力的工具.今天,我要向大家推荐的是一款功能强大.操作 ...

  7. WPF 对接 Vortice 绘制 WIC 图片

    本文告诉大家如何通过 Vortice 在 Direct2D 里面绘制图片,图片的来源是 WIC 加载出的图片 在上一篇博客 WPF 对接 Vortice 调用 WIC 加载图片 告诉了大家如何对接 V ...

  8. 一个在线下载地图XYZ瓦片的网站实现

    1. 什么是XYZ瓦片 XYZ瓦片是一种在线地图数据格式,常见的地图底图如Google.OpenStreetMap 等互联网的瓦片地图服务,都是XYZ瓦片,严格来说是ZXY规范的地图瓦片 ZXY规范的 ...

  9. windows版 navicat_15.0.18 安装

    视频安装地址: https://www.ghpym.com/ghvideo07.html 一.下载安装包 下载地址(百度网盘): 链接:https://pan.baidu.com/s/1MIZfmS5 ...

  10. Linux-0.11操作系统源码调试

    学习操作系统有比较好的两种方式,第一种是跟着别人写一个操作系统出来,<操作系统真相还原>.<Orange's:一个操作系统的实现>等书就是教学这个的:另一种方式就是调试操作系统 ...