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

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

2023032715391542.gif

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

<!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>
AI 代码解读
目录
打赏
0
2
2
0
299
分享
相关文章
|
16天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
34 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
129 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
54 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
66 34
|
1月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
90 33
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
36 2
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
119 24
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
94 5
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
130 7