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

最新推荐文章于 2024-05-18 16:20:54 发布
最新推荐文章于 2024-05-18 16:20:54 发布
阅读量567 收藏 5
点赞数 26
分类专栏： 有趣的css 文章标签： css 动效设计 ui 交互设计 晶体悬浮 css动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/justliu1989/article/details/138794040
版权

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

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

目录

整体效果

知识点：
① 关于 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);
  }
}

页面渲染效果

以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。

[1] 原文阅读

CSS 是一种很酷很有趣的计算机语言，在这里跟大家分享一些 CSS 实例 Demo，为学习者获取灵感和思路提供一点帮助，希望你们喜欢。

我是 Just，这里是「设计师工作日常」，求点赞求关注！

设计师工作日常
关注
  • 26
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
09-25
主要介绍了纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式),本文给出了HTML和CSS实现代码,并给出了完整代码下载,需要的朋友可以参考下
论文，污水流量检测系统
mrliu123ggg的博客
05-27 4310
目 录 1设计背景与意义 1 1.1设计背景 1 1.2设计意义 1 2 设计任务及要求 2 2.1设计任务 2 2.2设计要求 3 3 系统方案 3 3.1传感器模块的论证与选择 3 3.2定时器模块的论证与选择 4 3.3显示模块的论证与选择 4 4 系统理论分析 4 4.1 AT89C51原理分析 5 4.2 GSM通信原理 6 4.3 超声波传感器分析 7 4.4 液晶显示分析 7 5 系统设计 9 5.1硬件电路设计 9 5.1.1系统总体框图 9 5.1.2 LCD显示电路设计 11 5.1.
IT英语4-计算机英语缩写术语
weixin_30394633的博客
04-20 7413
IT英语4-计算机英语缩写术语 1、CPU3DNow!（3D no waiting，无须等待的3D处理）AAM（AMD Analyst Meeting，AMD分析家会议）ABP（Advanced Branch Prediction，高级分支预测）ACG（Aggressive Clock Gating，主动时钟选择）AIS（Alternate Instruction Set，交...
293万人预约华为万元新机！余承东：我们活过来了
lsxxx2011的专栏
03-01 119
杨净 发自 凹非寺量子位 报道 | 公众号 QbitAI这可能是有史以来最贵的华为机型了吧。华为 Mate X2，售价17999起。其中，256G，17999元起；512G，18999元...
计算机专用术语总结--转
jarodlau的专栏
04-06 3265
本文帮助一些新手在刚刚接触计算机技术方面而出现的对一些老鸟们说的一些#￥%……—叫人看了也不能理解的术语的一个小小的总结。这个总结是需要大家来完善的，我希望这个帖子不要灌水。 1、CPU 3DNow!（3D no waiting） ALU（Arithmetic Logic Unit，算术逻辑单元） AGU（Address Generation Units，地址产成单元） BGA（Ball Grid
css实现悬浮效果的阴影的方法示例
09-24
主要介绍了css实现悬浮效果的阴影的方法示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS简单实现网页悬浮效果（对联广告）
12-12
css固定定位，即悬浮效果（例如对联广告），不用js，css中"position:fixed;"即可。position:fixed; 以视口为包含块，因此在浏览器窗口内固定。ie 6.0不支持，因此采用相对于html元素的绝对定位。 <!...
CSS导航菜单悬浮效果源码 CSSNavigationMenuLevitationEffect.rar
10-13
CSS导航菜单悬浮效果源码 源码描述： 一、源码特点 1、基于CSS编写的精致的导航菜单悬浮效果，适用于项目应用，有需要的欢迎下载 二、注意事项 1、开发环境为Visual Studio 2010，使用.net 4.0开发。
CSS javascript 结合实现悬浮固定菜单效果
10-23
本篇文章给大家介绍基于CSS javascript 结合实现悬浮固定菜单效果，附有源码下载，需要的朋友可以参考下
CSS-相对和绝对和固定位置
最新发布
Kevin7_35Durant的博客
05-18 307
将位置改成相对位置，与原先的位置顶部相距100px。原来的位置是占用状态，其他元素无法使用。改变位置的参照物是自己原来的位置。元素的位置在网页滚动时不变。属性值：relative。属性值：absolute。改变位置的参照物是父元素。属性：position。属性：position。属性：positon。
实用css整理
qq_37004501的博客
05-17 400
一般用于特殊时期，网页变灰，只需要给body标签添加这行样式代码。给body标签设置这个属性样式，改变角度看看效果吧。
Vue3无限滚动组件TypeScript、TailwindCSS
远小帅的博客
05-17 176
Vue3无限滚动组件TypeScript、TailwindCSS
css使用clip-path裁剪出不规则图形并绑定点击事件
qq_40576549的博客
05-16 318
使用工具拖拽出红色区域图形并获取到对应的 clip-path: polygon(使用方式见下方图解（ 多边形裁剪可视化工具。
谷歌浏览器css font-size 10px以下不生效
芳草萋萋鹦鹉洲哦
05-16 227
chrome://settings/fonts 外观——自定义字体——最小字号，修改此处配置即可。这时候如果是谷歌浏览器 需要在去浏览器设置重新设置字体大小。做页面时发现字体到达12px之后 ，无论多少小都无法改变。F12 浏览器控制台定义8px依然无效。
前端 CSS 经典：filter 滤镜
weixin_64684095的博客
05-17 391
什么叫滤镜呢，就是把元素里的。
复制即用！纯html&css写的炫酷input输入框
m0_74475812的博客
05-16 424
一般我们写css样式都要用样式库，但是嫌麻烦，如果能找到现成的内容复制上去就很香了，下文是笔者觉得好看的纯html&css写的样式，可以直接复制到Vue等内，十分方便。
三步在 vite 中配置 tailwindcss
biaov
05-16 343
三步在 vite 中配置 tailwindcss
百度页面奔跑的白熊html、css
2302_80141844的博客
05-16 756
用keyframes定义动画（类似定义类选择器）@keyframes动画名称{0%{100%{
html+css写一个悬浮效果的输入框
04-19
好的，关于HTML和CSS写一个悬浮效果的输入框，可以采用CSS中的:hover属性和transition属性来实现。具体实现方式如下： HTML代码： ``` 请输入内容"> ``` CSS代码： ``` input[type="text"] { width: 200px; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

设计师工作日常

请我炫个饼🫓

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值