有趣的css - 好看的晶体悬浮效果

精选原创

设计师工作日常 2024-08-02 16:49:59 博主文章分类：html/css ©著作权

文章标签 动效设计交互设计 ux/ui 晶体悬浮效果 css 文章分类 Html/CSS 前端开发 技术人为什么要写博客？

©著作权归作者所有：来自51CTO博客作者设计师工作日常的原创作品，请联系作者获取转载授权，否则将追究法律责任

大家好，我是 Just，这里是「设计师工作日常」，今天教你写出一个炫酷的悬浮晶体效果，让你的网站增光添彩～ hhhh。

最新文章通过公众号「设计师工作日常」发布。

(目录)

整体效果

知识点： ① 关于 transform 3d 模式的写法 ② transform 多个属性的联合使用 ③ background: linear-gradient 渐变的使用 ④ animation 的使用 ⑤使用 clip-path 绘制三角形

思路：使用 clip-path 绘制出三角体的三个三角面，搭配 transform 调整三角面的角度，搭建出一个三角体，再画出底部矩形，同样调整矩形角度放到合适的位置，然后三角体的每个面添加渐变背景；然后复制这个三角体使用 transform 来做一个镜像处理，这样一个由两个三角体组合成的镜体就完成了，然后再加上一些动画效果。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<div class="cube-box52">
  <div class="cube52">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="cube52">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

两个三角体 .cube52 。

css 部分代码

.cube-box52{
  width: 200px;
  height: 200px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transform: rotateX(-10deg);
}
.cube-box52:after,.cube-box52:before{
  content: '';
  width: 2px;
  height: 40px;
  position: absolute;
  left: 40px;
  background: linear-gradient(180deg, rgba(4,222,248,0.7) 0%, rgba(127, 255, 212, 0) 100%);
  animation: movetop52 4s linear infinite;
}
.cube-box52:before{
  left: 160px;
  background: linear-gradient(180deg, rgba(255,225,33,0.7) 0%, rgba(255, 225, 33, 0) 100%);
  animation-delay: 2s;
}
@keyframes movetop52{
  0%{
    bottom: 0px;
  }
  100%{
    bottom: 200px;
    height: 0;
  }
}
.cube52{
  width: 100px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  animation: spin52 4s linear infinite;
}
@keyframes spin52{
  0{
    transform: translateY(0px) rotateY(0deg);
  }
  50% {
    transform: translateY(-10px) rotateY(180deg);
  }
  100%{
    transform: translateY(0px) rotateY(360deg);
  }
}
.cube52 > div{
  width: 70px;
  height: 70px;
  clip-path: polygon(50% 0%, 0 100%, 100% 100%);
  background: conic-gradient(from 180deg at 50% 50%, #7FFFD4 0deg, #045AF8 59deg, #EA04F8 149deg, #FFE121 219deg, #04DEF8 301deg, #7FFFD4 360deg);
  position: absolute;
  transform-origin: center top;
}
.cube52 div:nth-of-type(1){
  background-color: rgba(4,222,248,0.7);
  transform: rotateZ(-30deg) rotateY(90deg);
}
.cube52 div:nth-of-type(2){
  background-color: rgba(234,4,248,0.7);
  transform: rotateZ(30deg) rotateY(90deg);
}
.cube52 div:nth-of-type(3){
  background-color: rgba(127,255,212,0.7);
  transform: rotateX(30deg);
}
.cube52 div:nth-of-type(4){
  background-color: rgba(4,90,248,0.7);
  transform: rotateX(-30deg);
}
.cube52 div:nth-of-type(5){
  clip-path: none;
  background-color: rgba(255,225,33,0.7);
  transform: rotateX(90deg) translateY(-35px) translateZ(-60px);
}
.cube-box52 .cube52:nth-of-type(2){
  transform: rotateX(180deg);
  animation: spin52b 4s linear infinite;
}
@keyframes spin52b{
  0{
    transform: rotateX(180deg) translateY(0px) rotateY(0deg);
  }
  50% {
    transform: rotateX(180deg) translateY(-10px) rotateY(180deg);
  }
  100%{
    transform: rotateX(180deg) translateY(0px) rotateY(360deg);
  }
}

1、.cube52 开启 transform-style: preserve-3d 3d 模式，然后让其子元素 div 用 clip-path: polygon(50% 0%, 0 100%, 100% 100%) 绘制出三角形，并且设置 transform-origin 参数确定变形原点，然后利用 nth-of-type() 选择器来调整每个子元素 div 的变形位置，搭建出三角体

2、然后给 .cube52 加上一个动画，让其旋转的同时上下浮动

3、复制三角体代码，然后用 transform: rotateX(180deg) 来实现镜像翻转，同时设置 animation 动画参数

4、最后再用 :before 和 :after 创建两个小火焰，加上 animation 动画，让小火焰动起来。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>好看的晶体悬浮效果</title>
  </head>
  <body>
    <div class="app">
      <div class="cube-box52">
        <div class="cube52">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="cube52">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
  </body>
</html>

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #000000;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cube-box52{
  width: 200px;
  height: 200px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transform: rotateX(-10deg);
}
.cube-box52:after,.cube-box52:before{
  content: '';
  width: 2px;
  height: 40px;
  position: absolute;
  left: 40px;
  background: linear-gradient(180deg, rgba(4,222,248,0.7) 0%, rgba(127, 255, 212, 0) 100%);
  animation: movetop52 4s linear infinite;
}
.cube-box52:before{
  left: 160px;
  background: linear-gradient(180deg, rgba(255,225,33,0.7) 0%, rgba(255, 225, 33, 0) 100%);
  animation-delay: 2s;
}
@keyframes movetop52{
  0%{
    bottom: 0px;
  }
  100%{
    bottom: 200px;
    height: 0;
  }
}
.cube52{
  width: 100px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  animation: spin52 4s linear infinite;
}
@keyframes spin52{
  0{
    transform: translateY(0px) rotateY(0deg);
  }
  50% {
    transform: translateY(-10px) rotateY(180deg);
  }
  100%{
    transform: translateY(0px) rotateY(360deg);
  }
}
.cube52 > div{
  width: 70px;
  height: 70px;
  clip-path: polygon(50% 0%, 0 100%, 100% 100%);
  background: conic-gradient(from 180deg at 50% 50%, #7FFFD4 0deg, #045AF8 59deg, #EA04F8 149deg, #FFE121 219deg, #04DEF8 301deg, #7FFFD4 360deg);
  position: absolute;
  transform-origin: center top;
}
.cube52 div:nth-of-type(1){
  background-color: rgba(4,222,248,0.7);
  transform: rotateZ(-30deg) rotateY(90deg);
}
.cube52 div:nth-of-type(2){
  background-color: rgba(234,4,248,0.7);
  transform: rotateZ(30deg) rotateY(90deg);
}
.cube52 div:nth-of-type(3){
  background-color: rgba(127,255,212,0.7);
  transform: rotateX(30deg);
}
.cube52 div:nth-of-type(4){
  background-color: rgba(4,90,248,0.7);
  transform: rotateX(-30deg);
}
.cube52 div:nth-of-type(5){
  clip-path: none;
  background-color: rgba(255,225,33,0.7);
  transform: rotateX(90deg) translateY(-35px) translateZ(-60px);
}
.cube-box52 .cube52:nth-of-type(2){
  transform: rotateX(180deg);
  animation: spin52b 4s linear infinite;
}
@keyframes spin52b{
  0{
    transform: rotateX(180deg) translateY(0px) rotateY(0deg);
  }
  50% {
    transform: rotateX(180deg) translateY(-10px) rotateY(180deg);
  }
  100%{
    transform: rotateX(180deg) translateY(0px) rotateY(360deg);
  }
}