zoukankan      html  css  js  c++  java
  • CSS3学习笔记之立体线框球形动画

    效果截图:

    HTML代码:

    <div class="ball-box">
        <div class="ball">
            <div class="line-1"></div>
            <div class="line-2"></div>
            <div class="line-3"></div>
            <div class="line-4"></div>
            <div class="line-5"></div>
            <div class="line-6"></div>
        </div>
    </div>

    CSS代码:

    body{ 
        background-color: #333; 
    }
    .ball-box{ 
        position: absolute; width: 300px; height: 300px; left: 50%; top: 50%; margin: -150px 0 0 -150px;
        perspective:3000px; /*为子元素设置3D透视属性*/
        perspective-origin:50% 50%;
    }
    /*定义关键帧*/
    @keyframes rotate3d{
        0%{ transform: rotateZ(-30deg) rotateY(0deg);}
        100%{ transform: rotateZ(-30deg) rotateY(360deg);}
    }
    .ball { 
        height: 100%; transform-style: preserve-3d; /*子元素按照3D空间展示属性*/
        animation: rotate3d 30s linear infinite;
    }
    /*通过after伪类方法在ball内部插入绿色中轴*/
    .ball:after{
        content: ''; display: block; position: absolute; width: 1px; height: 500px; 
        background-color: #00ff00; left: 0; top: 0; transform: translate(150px,-100px);
    }
    /*设置统一样式*/
    .ball > div{
        width: 100%; height: 100%; border:1px solid #fff; border-radius: 50%; position: absolute;
    }
    /*为每一个圆设置旋转角度*/
    .ball .line-1{ transform:rotateY(0deg);}
    .ball .line-2{ transform:rotateY(30deg);}
    .ball .line-3{ transform:rotateY(60deg);}
    .ball .line-4{ transform:rotateY(90deg);}
    .ball .line-5{ transform:rotateY(120deg);}
    .ball .line-6{ transform:rotateY(150deg);}
  • 相关阅读:
    macOS 终端可用的 Hex 查看与编辑器
    MAC brew install 跳过 update
    zstd
    JAVA中的时区设置
    conda虚拟环境中设置环境变量
    vertx 获取请求参数
    idea2020.3激活码最新破解教程(亲测有效)
    Camtasia recorder 的快捷键
    ARM STM32 各种缩写和全称
    如何解决keil mdk中文汉字乱码或设置编码问题
  • 原文地址:https://www.cnblogs.com/lvmylife/p/5287174.html
Copyright © 2011-2022 走看看