使用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源码
120 24
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
94 5
【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
293 7
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
141 6
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等