使用html+css制作一个发光立方体特效

这篇具有很好参考价值的文章主要介绍了使用html+css制作一个发光立方体特效。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用html+css制作一个发光立方体特效,html,css,html,css3
使用html+css制作一个发光立方体特效文章来源地址https://www.toymoban.com/news/detail-839598.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!--QQ沐编程 www.qqmu.com 学习QQ群:290987565  域名抢注 33210.jm.cn -->
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: black;
      }
      .container {
        position: relative;
        width: 300px;
        height: 300px;
        transform-style: preserve-3d;
        animation: zuan 6s linear alternate infinite;
      }
      @keyframes zuan {
        0% {
          transform: rotateX(-30deg) rotateY(0deg);
        }

        100% {
          transform: rotateX(-30deg) rotateY(360deg);
        }
      }
      .q1,
      .h2,
      .z3,
      .y4 {
        position: absolute;
        width: 100%;
        height: 100%;
        /* opacity: 0.8; */
        /*   border-left: solid 1px rgba(9, 255, 9, 1); */
        background-image: linear-gradient(rgb(26, 26, 26), rgb(9, 255, 9));
      }

      .q1 {
        transform: translateZ(150px);
      }
      .h2 {
        transform: rotateY(180deg) translateZ(150px);
      }
      .z3 {
        transform: rotateY(-90deg) translateZ(150px);
      }
      .y4 {
        transform: rotateY(90deg) translateZ(150px);
      }
      .s5,
      .x6 {
        position: absolute;
        width: 100%;
        height: 100%;
      }
      .s5 {
        transform: rotateX(90deg) translateZ(150px);
        background-color: rgb(26, 26, 26);
      }
      .x6 {
        background-color: rgb(9, 255, 9);
        transform: rotateX(-90deg) translateZ(250px);
        box-shadow: 0 0 150px 30px rgb(9, 255, 9);
        filter: blur(30px);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="q1"></div>
      <div class="h2"></div>
      <div class="z3"></div>
      <div class="y4"></div>
      <div class="s5"></div>
      <div class="x6"></div>
    </div>
  </body>
</html>


到了这里,关于使用html+css制作一个发光立方体特效的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【css】动画:立方体相册

    2024年02月11日
    浏览(49)
  • css3实现3D立方体旋转特效源码

    CSS3自动旋转正方体3D特效是一款基于css3 keyframes属性制作的图片相册自动旋转立方体特效 css3实现3D立方体旋转特效代码

    2024年04月09日
    浏览(49)
  • 使用Unity3D创建一个立方体(Cube)游戏对象并启动Unity

    Unity3D是一个强大的游戏开发引擎,可以用来创建各种类型的游戏和交互应用程序。在本文中,我们将探讨如何使用Unity3D创建一个立方体(Cube)游戏对象,并启动Unity编辑器。 首先,确保你已经安装了Unity3D并且已经在你的计算机上成功启动。然后,按照以下步骤进行操作:

    2024年02月05日
    浏览(81)
  • OpenGLES:绘制一个混色旋转的3D立方体

    混色旋转的3D立方体 之前关于OpenGLES实战开发的博文,不论是实现相机滤镜还是绘制图形,都是在2D纬度 这篇博文开始,将会使用OpenGLES进入3D世界 本篇博文会实现一个颜色渐变、旋转的3D立方体 动态3D图形的绘制,需要具备一些基础的 线性代数 (向量、矩阵) 和 空间坐标系转

    2024年02月06日
    浏览(45)
  • 【Unity Shader】从入门到感慨(2)用C#画一个立方体

    这个问题是面试经常被问到的题。如上图,我们知道在几何中立方体有6个面,8个顶点。但在图形学中,顶点指的是模型空间的Vector3位置坐标,我们以A点为例,很明显为了表达三个面不同的方向,这里就需要三个重合的顶点来表达不同的方向。 那么,我们很容易得出每个立

    2024年02月11日
    浏览(49)
  • 【libGDX】立方体手动旋转

    ​ 本文主要介绍使用 libGDX 绘制立方体,并实现手动触摸事件控制立方体旋转。 ​ 为方便控制触摸旋转,并提高渲染性能,我们通过改变相机的位置和姿态实现立方体旋转效果。 ​ 读者如果对 libGDX 不太熟悉,请回顾以下内容。 使用Mesh绘制三角形 使用Mesh绘制矩形 使用M

    2024年03月09日
    浏览(54)
  • Opengl之立方体贴图

    简单来说, 立方体贴图就是一个包含了6个2D纹理的纹理 ,每个2D纹理都组成了 立方体的一个面 :一个有纹理的立方体。你可能会奇怪,这样一个立方体有什么用途呢?为什么要把6张纹理合并到一张纹理中,而不是直接使用6个单独的纹理呢?立方体贴图有一个非常有用的特

    2024年02月07日
    浏览(41)
  • OpenGLES:3D立方体纹理贴图

    前几篇博文讲解了OpenGLES绘制多种3D图形,并赋予丰富的色彩,但是在这些3D图形绘制过程中,有一点还没有涉及,就是 纹理贴图。 今天这篇博文我会用如下 六张图片 对立方体进行纹理贴图,实现 六个面都是贴图 的3D旋转立方体 2.1 常规变量定义 2.2 顶点、纹理相关变量定义

    2024年02月08日
    浏览(41)
  • 【Filament】立方体贴图(6张图)

    ​ 本文通过一个立方体贴图的例子,讲解三维纹理贴图(子网格贴图)的应用,案例中使用 6 张不同的图片给立方体贴图,图片如下。 ​ 读者如果对 Filament 不太熟悉,请回顾以下内容。 Filament环境搭建 绘制三角形 绘制矩形 绘制圆形 绘制立方体 纹理贴图 ​ 本文项目结构

    2024年03月09日
    浏览(48)
  • VCG 网格简化之移动立方体

    我们先来回顾一下原始的移动立方体算法,该算法的基本思想是通过找出所有与等值面相交的体素,在这些基础上再分别找出每个体素与等值面相交的交面,最终将这些交面连在一起即是我们所求的曲面。其大致过程如下所述: (1)首先将点云在空间上进行体素划分,并对

    2024年01月22日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包