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

2024-08-01 12:23:36

一.话不多，看效果

二.实现（附完整代码）

1.定义标签：

<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>

2.定义外层盒子css：

 * {
        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);
        }
      }

transform-style 让转换的子元素保留3D转换
animation 开启动画

不了解3D的可以看我的这篇文章：

教你使用html+css制作一个3D立体相册

3.定义盒子6个面分别的样式：

 .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);
      }

完整代码：

<!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>
    <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制作一个发光立方体特效的文章就介绍到这了,更多相关html+css制作发光立方体特效内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

html+css+js实现canvas跟随鼠标的小圆特效源码

效果(源码在最后): 实现: 1.定义标签: <h1>北极光之夜</h1> <canvas id="draw" style=" position: fixed; display: block;"> 当前浏览器不支持Canvas,请更换浏览器后再试 </canvas> 2. 文字的基本样式: h1{ position: absolute; top: 50%; left: 50%; transform: translate
用html+css+js实现的一个简单的图片切换特效

如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下复制代码代码如下: <div class="wrapper"> <div id="focus"> <ul> <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" a
基于HTML+CSS+JS实现增加删除修改tab导航特效代码

先给大家展示下效果图,如果大家感觉还不错,请参考实现代码哦! HTML: <div class="container iden_top"> <ul> <li> <p class='iden_add_name'>应用标识1</p> <span class="iden_top_button"></span> <div class="iden_top_dete"&
使用html+css实现页面书本翻页特效

目录效果: 实现: 1.定义标签,shu是书本,feng是封面,wen是文字内容. 2.定义书本的基本属性,宽高,阴影等,伪类是下面和右面那两条阴影. 3.鼠标经过,阴影变化,然后书本向左旋转: 4.封面的基本样式: 5.封面旋转: 完整代码: 效果: 实现: 1.定义标签,shu是书本,feng是封面,wen是文字内容. <div class="shu"> <div class="feng"></div> <div cl
5分钟教你学会超简单的html+css魔幻霓虹灯文字特效

目录实现过程(完整源码在最后): 1. 定义h3标签: 2. 给个body背景色: 3. 设置h3基本样式: 4.定义动画,就是设置不同时间段显示不同颜色等实现闪烁霓虹灯效果~时间可以自己调自己要的效果: 完整源码: 话不多,先看效果: 今天继续分享简单但有趣的CSS创意特效~这个效果很简单看一分钟就明白了~初学前端的小伙伴们拿来练手是很不错的~ 实现过程(完整源码在最后): 1. 定义h3标签: <h3>Aurora Borealis night</h3> 2. 给个body背
2014 HTML5/CSS3热门动画特效TOP10

1.HTML5+CSS3实现的模拟真人奔跑动画特效今天要分享一款很酷的模拟真人奔跑动画,它主要是利用HTML5/CSS3技术结合多张图片的切换来实现的.这款HTML5动画的逼真之处在于人物在奔跑的时候很有节奏感,而且有人物的投影.更重要的是当人物跑的越来越近是,人物的大小也会随之变大.很像一个小男孩从远处跑过来. 在线演示源码下载 2.jQuery实现的四款支持不同自定义图片切换的焦点图插件特效 jQuery实现的四款支持不同自定义图片切换的焦点图插件特效源码L_slide.js,是一段可以
使用html+css制作一个发光立方体特效

目录一.话不多,看效果二.实现(附完整代码) 1.定义标签: 2.定义外层盒子css: 3.定义盒子6个面分别的样式: 一.话不多,看效果二.实现(附完整代码) 1.定义标签: <div class="container"> <div class="q1"></div> <div class="h2"></div> <div class="z3">&
教你使用html+css制作一个3D立体相册

目录前言一.先看效果二.实现步骤总结前言用css的transform属性做一个3D相册~~~值translate表示偏移:scale表示缩放:rotate就是转动. 一.先看效果二.实现步骤 1.我们知道一个正方体有6个面,所以定义一个父亲元素然后定义6个子元素作为6个面.每个面放一张图片.里面q1表示前面,h2表示后面,以此类推,就是首拼音. <div class="baba"> <div class="q1"> <im
基于Flutter制作一个心碎动画特效

目录前言实现步骤 1.绘制一个心 2.绘制心的裂痕 3.加入动画完整代码小结前言继续动画探索,今天用Flutter制作一个心碎的感觉,灵感来源于今天的股市,哎,心哇凉哇凉的.废话不多说,开始. 效果图先上: 实现步骤 1.绘制一个心首先我们使用两段三阶贝塞尔曲线制作一个心型,这里因为需要实现心碎的效果,所以我们需要将心的两段用两段路径path进行绘制出来,效果: 绘制代码: canvas.translate(size.width / 2, size.height / 2); Pai
利用CSS制作3D动画

目录 CSS 3D 基础知识使用 transform-style 启用 3D 模式利用 perspective & perspective-origin 设置 3D视距,实现透视/景深效果通过绘制 Webpack Logo 熟悉 CSS 3D 实现文字的 3D 效果 3D 氖灯文字效果利用 CSS 3D 配合 translateZ 实现真正的文字 3D 效果利用距离.角度及光影构建不一样的 3D 效果 3D 计数器空间效果空间 3D 效果热身利用图片素材 3D 无限延伸视角动画
基于replaceChild制作简单的吞噬特效

效果演示图: 源码查看 [HTML代码说明] <ul class="list" id="list"> <li class="in">1</li> <li class="in">2</li> <li class="in">3</li> <li class="in">4</
使用Three.js制作一个3D奖牌页面

目录背景效果实现引入资源场景初始化光照效果 Three.js 提供的光源添加网格和地面创建奖牌奖牌UI素材生成 Three.js 中的贴图 MeshPhysicalMaterial 物理材质特殊属性加载1000+文字模型补间动画动画更新礼花动画总结背景本文使用 React + Three.js 技术栈,实现粉丝突破1000的3D纪念页面,包含的主要知识点包括:Three.js 提供的光源.DirectionLight 平行光.HemisphereLight 半球
JS+CSS实现一个气泡提示框

分享一个气泡提示框,练习的技术有:(1)JS响应鼠标的事件:(2)纯CSS制作三角形. 效果这样: 这是html: 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>气泡对话框</title> <script src="myBubbleTooltip.js"></script>
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码

复制代码代码如下: <HTML> <HEAD> <TITLE>JS+CSS制作的DIV层最小化和随意拖拽排序功能</TITLE> <style type="text/css"> body { margin:10px; } #dragHelper { position:absolute;/*重要*/ border:2px dashed #000000; background-color:#FFFFFF; filter: alp
CSS制作树状目录教程

本篇详细介绍如何利用CSS能方便地控制对象的"显示"和"隐藏"属性原理,制作一个树状目录,用CSS制作这样的树状目录,方法简单,代码也比较少,所以把它写出来,给网友们共亨,以便在需要的时候也可动手做一个. 索易电子杂志大多采用树状目录,当鼠标点击主目录时,展开子目录:当再次点击主目录时,则关闭子目录.显得简捷明快,朴实无华. 制作这种树状目录的方法较多,最近我先看下面的示例:当用鼠标在主目录上点一下,就下拉出相应的子目录,再点一下,又恢复原状,其效果与索易电子杂志上
纯js代码制作的网页时钟特效【附实例】

纯js代码制作的网页时钟特效,需要的码农可以拿去看一下.给大家做个参考. <HTML><HEAD> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <META content="MSHTML 6.00.6000.16414" name=GENERATOR></HEAD> <BODY> <DIV style