HTMLCSS:3D金字塔加载动画

效果演示

这段代码通过CSS3的3D变换和动画功能,创建了一个旋转的金字塔加载动画,每个侧面都有不同的颜色渐变,底部还有一个模糊的阴影效果,增加了视觉的立体感。
在这里插入图片描述

HTML

<div class="pyramid-loader"><div class="wrapper"><span class="side side1"></span><span class="side side2"></span><span class="side side3"></span><span class="side side4"></span><span class="shadow"></span></div>
</div>
  • pyramid-loader 是最外层的容器,用于包含整个金字塔动画。
  • wrapper 是金字塔的主体部分,包含四个 span 元素,每个代表金字塔的一个侧面,以及一个 span 元素用于表示阴影效果。

CSS

.pyramid-loader {position: relative;width: 300px;height: 300px;display: block;transform-style: preserve-3d;transform: rotateX(-20deg);
}.wrapper {position: relative;width: 100%;height: 100%;transform-style: preserve-3d;animation: spin 4s linear infinite;
}@keyframes spin {100% {transform: rotateY(360deg);}
}.pyramid-loader .wrapper .side {width: 70px;height: 70px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;transform-origin: center top;clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}.pyramid-loader .wrapper .side1 {transform: rotateZ(-30deg) rotateY(90deg);background: conic-gradient( #2BDEAC, #F028FD, #D8CCE6, #2F2585);
}.pyramid-loader .wrapper .side2 {transform: rotateZ(30deg) rotateY(90deg);background: conic-gradient( #2F2585, #D8CCE6, #F028FD, #2BDEAC);
}.pyramid-loader .wrapper .side3 {transform: rotateX(30deg);background: conic-gradient( #2F2585, #D8CCE6, #F028FD, #2BDEAC);
}.pyramid-loader .wrapper .side4 {transform: rotateX(-30deg);background: conic-gradient( #2BDEAC, #F028FD, #D8CCE6, #2F2585);
}.pyramid-loader .wrapper .shadow {width: 60px;height: 60px;background: #8B5AD5;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;transform: rotateX(90deg) translateZ(-40px);filter: blur(12px);
}
  • .pyramid-loader 设置了容器的位置、大小和3D变换样式,使其能够包含3D元素,并且整体沿X轴旋转-20度。
  • .wrapper 设置了内部容器的位置、大小和3D变换样式,并且应用了一个名为spin的动画,这个动画会使容器无限循环地旋转。
  • @keyframes spin 定义了一个关键帧动画,使元素绕Y轴旋转360度。
  • .side 类定义了金字塔侧面的尺寸、位置和剪裁路径,使其呈现为一个三角形。
  • .side1 设置了第一个侧面的旋转角度和背景渐变色。
  • .side2 设置了第二个侧面的旋转角度和背景渐变色。
  • .side3 设置了第三个侧面的旋转角度和背景渐变色。
  • .side4 设置了第四个侧面的旋转角度和背景渐变色。
  • .shadow 设置了阴影的尺寸、位置、背景色、旋转角度和模糊效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/61971.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++中定义类型名的方法

什么是 C 中的类型别名和 using 声明&#xff1f; 类型别名与using都是为了提高代码的可读性。 有两种方法可以定义类型别名 一种是使用关键字typedef起别名使用别名声明来定义类型的别名&#xff0c;即使用using. typedef 关键字typedef作为声明语句中的基本数据类型的一…

Java 查询最大最小值 详解

在 Java 中&#xff0c;查询最大值和最小值是常见需求。以下将详细介绍 最大值和最小值的查询方法&#xff0c;包括适用于数组、集合、以及更复杂的数据结构的解决方案。 1. 使用 Math 类 Java 提供了 Math.max 和 Math.min 方法&#xff0c;可用于直接比较两个值。 适用场景…

git标签和分支

在 Git 中&#xff0c;标签&#xff08;Tag&#xff09;和分支&#xff08;Branch&#xff09;都是用来标识代码快照的工具&#xff0c;但是它们有着不同的用途和行为方式。 分支&#xff08;Branch&#xff09; 目的&#xff1a;分支主要用于开发过程中的不同功能或版本的开…

selinux及防火墙

selinux说明 SELinux 是 Security-Enhanced Linux 的缩写&#xff0c;意思是安全强化的 linux 。 SELinux 主要由美国国家安全局&#xff08; NSA &#xff09;开发&#xff0c;当初开发的目的是为了避免资源的误用。 httpd进程标签&#xff08;/usr/share/nginx/html &#…

vue 富文本图片如何拖拽

在Vue项目中实现富文本编辑器&#xff08;如vue-quill-editor&#xff09;的图片拖拽功能&#xff0c;需要结合Quill.js及其相关插件进行配置 安装必要的依赖包&#xff1a; 你需要安装vue-quill-editor作为富文本编辑器的基础组件。为了支持图片拖拽功能&#xff0c;你还需要…

秋招面试基础总结,Java八股文基础(串联知识),四万字大全

目录 值传递和引用传递 静态变量和静态代码块的执行顺序 Java​​​​​​​集合的框架&#xff0c;Set,HashSet,LinkedHashSet这三个底层是什么 多线程篇 Java实现多线程的方式 假设一个线程池&#xff0c;核心线程数是2&#xff0c;最大线程数是3&#xff0c;阻塞队列是4…

MySQL原理简介—12.MySQL主从同步

大纲 1.异步复制为MySQL搭建一套主从复制架构 2.半同步复制为MySQL搭建一套主从复制架构 3.GTID为MySQL搭建一套主从复制架构 4.并行复制降低主从同步延迟或强制读主库 1.异步复制为MySQL搭建一套主从复制架构 (1)MySQL主从复制的原理 (2)搭建主从复制架构的配置 (1)MySQ…

一文了解Spring提供的几种扩展能力

基于 spring bean 的扩展 1. BeanPostProcessor spring 提供的针对 bean 的初始化过程时提供的扩展能力&#xff0c;从方法名也很容易看出&#xff0c;提供的两个方法分别是为 bean 对象提供了初始化之前以及初始化之后的扩展能力。 package com.wyl.conf;import org.spring…

【隐私计算大模型】联邦深度学习之拆分学习Split learning原理及安全风险、应对措施以及在大模型联合训练中的应用案例

Tips&#xff1a;在两方场景下&#xff0c;设计的安全算法&#xff0c;如果存在信息不对等性&#xff0c;那么信息获得更多的一方可以有概率对另一方实施安全性攻击。 1. 拆分学习原理 本文介绍了一种适用于隐私计算场景的深度学习实现方案——拆分学习&#xff0c;又称分割…

Linux 下进程基本概念与状态

文章目录 一、进程的定义二、 描述进程-PCBtask_ struct内容分类 三、 进程状态 一、进程的定义 狭义定义&#xff1a;进程是正在运行的程序的实例&#xff08;an instance of a computer program that is being executed&#xff09;。广义定义&#xff1a;进程是一个具有一定…

k8s1.31版本最新版本集群使用容器镜像仓库Harbor

虚拟机 rocky9.4 linux master node01 node02 已部署k8s集群版本 1.31 方法 一 使用容器部署harbor (1) wget https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo -O /etc/yum.repos.d/docker-ce.repo yum -y install docker-ce systemctl enable docker…

数据库MYSQL——表的设计

文章目录 前言三大范式&#xff1a;几种实体间的关系&#xff1a;一对一关系&#xff1a;一对多关系&#xff1a;多对多关系&#xff1a; 前言 之前的博客中我们讲解的是关于数据库的增删改查与约束的基本操作&#xff0c; 是在已经创建数据库&#xff0c;表之上的操作。 在实…

慢查询优化思路

本文介绍慢查询的优化思路&#xff0c;但不以索引优化作为重点&#xff0c;索引相关的优化可以参考《索引使用原则、索引失效》、《MySQL单表查询时索引使用情况》。 1.应用层面 对于报表类页面&#xff0c;一般涉及到的数据库表较多且数据量大&#xff0c;容易造成接口查询较…

自然语言处理: RAG优化之Embedding模型选型重要依据:mteb/leaderboard榜

本人项目地址大全&#xff1a;Victor94-king/NLP__ManVictor: CSDN of ManVictor git地址&#xff1a;https://github.com/opendatalab/MinerU 写在前面: 笔者更新不易&#xff0c;希望走过路过点个关注和赞&#xff0c;笔芯!!! 写在前面: 笔者更新不易&#xff0c;希望走过路…

使用 Python 快速完成管理系统开发:详细教程

如何使用 Python 快速完成管理系统开发&#xff1a;详细教程 Python 是一门功能强大且易于学习的编程语言&#xff0c;广泛应用于各种开发任务&#xff0c;包括管理系统开发。本文将详细介绍如何使用 Python 快速完成一个简单的管理系统开发&#xff0c;涵盖环境搭建、数据库设…

《生成式 AI》课程 作业6 大语言模型(LLM)的训练微调 Fine Tuning -- part1

资料来自李宏毅老师《生成式 AI》课程&#xff0c;如有侵权请通知下线 Introduction to Generative AI 2024 Spring 该文档主要介绍了国立台湾大学&#xff08;NTU&#xff09;2024 年春季 “生成式人工智能&#xff08;GenAI&#xff09;” 课程的作业 5&#xff08;GenAI HW…

LSA详情与特殊区域

LSA是构成LSDB的重要原材料&#xff0c;在OSPF中发挥很大作用。 报文 通用头部 LS age&#xff1a;LSA寿命&#xff0c;0-3600s Options&#xff1a;可选项 LS type&#xff1a;LSA类型&#xff0c;三要素之一 Link State ID&#xff1a;LSAID 三要素之一 Advertising Ro…

C#构建一个简单的循环神经网络,模拟对话

循环神经网络&#xff08;Recurrent Neural Network, RNN&#xff09;是一种用于处理序列数据的神经网络模型。与传统的前馈神经网络不同&#xff0c;RNN具有内部记忆能力&#xff0c;可以捕捉到序列中元素之间的依赖关系。这种特性使得RNN在自然语言处理、语音识别、时间序列预…

线性代数的发展简史

线性代数的发展简史 线性代数作为数学的一个重要分支&#xff0c;其发展历史悠久而丰富。从古代文明中的基础计算到现代复杂的理论体系&#xff0c;线性代数经历了多个阶段的演变。 古代的起源 线性代数的雏形可以追溯到古埃及、古希腊、古印度和古代中国时期。这些早期文明…

网安瞭望台第4期:nuclei最新poc分享

国内外要闻 多款 D-Link 停产路由器漏洞&#xff1a;攻击者可远程执行代码 近日&#xff0c;知名网络硬件制造商 D-Link 发布重要安全公告。由于存在严重的远程代码执行&#xff08;RCE&#xff09;漏洞&#xff0c;其敦促用户淘汰并更换多款已停产的 VPN 路由器型号。 此次…